|
|
|
|
Home > ImageTest |
Image Testing on old Macs - JPG vs GIF
Introduction
I've been questing for faster load times for my old Macs on this website. Cuz really that's the only site I have control over.
Code Optimization
I've developed a separate index page specifically for Macs using 68K processors using PHP to redirect automatically when the the browser identifies itself. Here's the code I'm using below which I grabbed from Stack Overflow:
$user_agent = $_SERVER['HTTP_USER_AGENT'];
function getOS() {
global $user_agent;
$os_platform = "Unknown OS Platform";
$os_array = array(
'/windows nt 10/i' => 'Windows 10',
'/windows nt 6.3/i' => 'Windows 8.1',
'/windows nt 6.2/i' => 'Windows 8',
'/windows nt 6.1/i' => 'Windows 7',
'/windows nt 6.0/i' => 'Windows Vista',
'/windows nt 5.2/i' => 'Windows Server 2003/XP x64',
'/windows nt 5.1/i' => 'Windows XP',
'/windows xp/i' => 'Windows XP',
'/windows nt 5.0/i' => 'Windows 2000',
'/windows me/i' => 'Windows ME',
'/win98/i' => 'Windows 98',
'/win95/i' => 'Windows 95',
'/win16/i' => 'Windows 3.11',
'/macintosh|mac os x/i' => 'Mac OS X',
'/mac_powerpc/i' => 'Mac OS 9',
'/Mac_68000/i' => '68K Mac',
'/68K/i' => '68K Mac',
'/linux/i' => 'Linux',
'/ubuntu/i' => 'Ubuntu',
'/iphone/i' => 'iPhone',
'/ipod/i' => 'iPod',
'/ipad/i' => 'iPad',
'/android/i' => 'Android',
'/blackberry/i' => 'BlackBerry',
'/webos/i' => 'Mobile'
);
foreach ($os_array as $regex => $value)
if (preg_match($regex, $user_agent))
$os_platform = $value;
return $os_platform;
}
if (isset($_REQUEST['page'])){$newURL = "index2.php?page=" . $_REQUEST['page'];}
else{$newURL = "index2.php";}
if (getOS() == '68K Mac'){header('Location: '.$newURL);}
In addition modern browsers offer a nifty tag called srcset= that we can utilize to substitute different images based on various parameters. Old browsers such as Netscape 4.08 or Internet Explorer 4.01 ignore tags they don't recognize so we can use code like this below to load one image on a modern browser and a lower resolution image on an older browser:
<img src="BackAngle320.gif" srcset="BackAngle640.jpg" alt="BackTinker">
Older browsers will render the image using the src= code, however modern browsers will look to srcset= first to determine which image to render.
Image Format Options
Now that I have that sorted out, the next question comes down to render times. There a few options available on older Macintosh browsers:
GIF - The grandfather of all web image formats. It can only do a 256 colour palette but also supports animation (as we all know) and transparent backgrounds. For low colour and simple line drawings, this format can output very small files.
JPG - Unsupported on the earliest browsers without a separate plugin, JPGs have a 24bit colour palette and use DCT lossy compression. The advantages can be smaller file sizes compared to GIF on complex images and better image quality. The disadvantage is that the processor is used more intensely once an image is received to render onto the display.
PNG - Meant to be the successor and open source alternative to GIF. 24 bit colour palette and transparent backgrounds but no animation is supported. Many early browsers do not support PNG. Netscape 4.08 does support but IE 4 does not.
PICT - Native Mac vector and raster image format. Uses QuickDraw OpCodes to render images.
For my website, I chose to focus on GIF and JPG images. Although I mostly focus on older Macs I would also like my website to render on other platforms and a variety of older browsers. Therefore these two have the widest support.
The Test
K, so here are the rigs I'm testing image load times with...
| Lasercut Macintosh Centris 650 | Mystic Macintosh Color Classic |
| 25Mhz 68040 | 36.864MHz 68040 |
| 108MB RAM (2x16MB, 2x32MB and 8MB onboard) | 68MB RAM (1x64MB and 4MB onboard) |
| 16GB SCSI2SD HDD | 9GB Seagate 7200RPM SCSI HDD |
| Mac OS 7.6.1 | Mac OS 8.1 |
| NUBUS 10BaseT Ethernet Card | Communications Slot 10BaseT Ethernet Card |
My server is a Raspberry Pi 3 B+ board running Apache2 connected via 802.11AC on the same subnet as the Centris.
I've chosen to use Internet Explorer 4.01 mainly because for some reason I can't get Netscape 4.08 to load my site... It can render other sites so I'm not sure what's up yet. I tested on my Mystic Color Classic and it's not just a Centris thing, Netscape 3.01 works just fine so there's something messed with 4.08.
I'm timing load time using the super accurate my finger on the mouse and the timer thingy on my iPhone. It's accurate enough get an idea of what we're looking at.
Finally our base image is a 1024x768 JPG of my beloved Macintosh 128K in my front entry. I converted this image in GIMP 2.8 to a GIF. Here are output file details and their load times:
| File Name | Resolution | File Size | Computer | Browser | Load Time |
| JPGTest.jpg | 1024x768 | 274.5kB | Centris | IE 4.01 | 19.97s |
| | | | Mystic | IE 4.01 | 14.86s |
| | | | Mystic | Netscape 3.01 | 14.41s |
| GIFTest.gif | 1024x768 | 474.7kB | Centris | IE 4.01 | 11.57s |
| | | | Mystic | IE 4.01 | 9.75s |
| | | | Mystic | Netscape 3.01 | 9.95s |
I'm actually quite astonished... As you can see the file size is substantially larger by more than 200kB for our GIF, but yet it loads a full 8 seconds faster on my Centris!
To be fair though the image quality on GIF is lower at 256 colours but regardless, where colour depth is not important this indicates a clear win where network bottlenecks are no object. I plan to test this further on other old machines.
Concluding remarks
From my tests I can conclude that a large portion of the time is spent rendering and decompressing the JPG file. I was curious whether there was a difference between render times with a 68040 vs a 68LC040 which lacks an FPU. I swapped my full '40 for a 'LC040 that I had lying around and the results were almost identical. So the FPU seems to make no difference.
Finally....
I also realized that GIMP isn't the best at producing optimized image files. I found a site that creates great compressed versions of GIF, JPG, SVG and PNG files with little to no difference in noticeable quality. Here are the results for these optimized images from the Centris.
| File Name | Resolution | File Size | Load Time |
| JPGTest-compressor.jpg | 1024x768 | 93.5kB | 12.85s |
| GIFTest-compressor.gif | 1024x768 | 169.1kB | 9.30s |
See.... Way better on the load time for both image types! Check out the site in the links below....
Finally Finally....
You can do your own tests using the images below.
JPG Test
JPG Compressed (Compressor.io)
GIF Test
GIF Compressed (Compressor.io)
Links
Stack Overflow - Get Operating System Info
Compressor.io
Last Updated: March 25, 2019
|