What Formats Can I Use?

To accomodate as many browsers as possible, you should stick to using GIF and JPG for all inline images. Some super early browsers may not even support rendering JPEG images, so for the most essential things like navigation buttons, GIF should be used.

If you are targeting HTML4 browsers only, it's all fine to use PNGs inline with your pages as well. Should you need to use PNGs often for an HTML3 site intended for browsers from 1996 or earlier, it's best to create a separate "preview" image in a GIF format and link that to a PNG. This way, the user can get an idea of what the image looks like in their browser, and if they have a separate program on hand to view PNGs, the original image can be opened in there.

Size Does Matter!

Surely it would be cool to get images on your site to load on a highly constrained 486 computer at 640x480, right? But you're probably taking pictures with at least 12 megapixels these days, and that isn't exactly something which could be considered small enough to fit in an archaic resolution.

The <img> tag actually provides a way to downsize an image, using the width= and height= attributes. That sounds nice and all, but isn't the image still going to be at least 3 megabytes in size? I imagine that would be enough to create a swapping nightmare for computers with only 16MB of RAM, if not less. That's why I don't bother with these attributes, and instead use an external image manipulation program to create a downscaled version of a picture to place alongside the original.

Sometimes I'll use ImageMagick in a batch script to downscale JPGs for the gallery just to cut down on tedious manual work, but generally I use Photoshop's Save for Web function. This is available in version 5.5, so I'll be using that to give you an idea on how to go about this.

Open the image you wish to downscale in Photoshop. At the menu bar, click File, then Save for Web (or press <CTRL> + <ALT> + <SHIFT> + S). Give the program some time to generate an optimization of your image. If this is your first time using the Save for Web utility, you may want to set the view option to 2-Up using the tab at the top.

On the right sidebar, select a suitable format to use for the downscaled image using the drop down menu directly beneath Settings. Since I'm working with a JPEG image, the JPEG format should be used. For low color or transparent images, GIF should be used; I'll explain how to do that further down. JPEG images do not use a small color table, so click the Image Size tab if the width and height text boxes are not visible already.

Make sure the aspect ratio is being maintained; you'll be able to see if it is by checking to see if a chain graphic is present near the width and height boxes. If it is not there, either check Constrain Proportions or click the "unlinked" graphic to enable proportion constraining. Then, set a small enough width or height that should fit well enough in a small window; somewhere around 240 to 320 pixels wide is good enough as long as the image isn't too tall.

If you are working with a later version of Photoshop, you may have a wider variety of quality options available to use. For downscaling, Bicubic Sharper may be more appropriate to use.

Click Apply to reoptimize the image if necessary. Then, click OK or Save.

You will then be prompted to save the optimized image somewhere. For most pictures which need both full size and downscaled versions, I save them right next to each other, appending a capital T at the end of the base filename (not the extension) to the downscaled version to denote it as a "thumbnail".

Once you have both images where you want them, you can add the small image to your page and link that to the larger one.

<a href="enlight.jpg"><img src="enlightT.jpg" alt="Three Enlight AT mid towers"></a>

If you really want to, you can opt to create another downscaling of the original image for the thumbnail to link to on your page, one which would be around 600 pixels wide or so. I don't do this as I want to publish my images in the maximum fidelity they originally came in, even if at the detriment of a 486... but in my image gallery, I do implement a solution that brings both ideas together - take an original image and create two downscaled versions of it, one thumbnail and one slightly larger "preview" image to be displayed on a separate page. The preview can be clicked on to bring up the full size image as is.

Creating GIFs

While GIFs are best known today as animated loops of Homer Simpson saying "yes" to an exploding lie detector, they weren't always meant for that. GIFs have been around since 1987, and even though the latest specification from 1989 is capable of individually timing "frames" in an animation, browsers didn't start supporting animated GIFs until around 1996.

Animated GIFs will not be covered here; instead, we'll look into one of the format's other practical applications: lossless alpha channel images. I have on hand a PNG drawing of Bugfix that doesn't use very many unique colors and has an alpha channel (which is used for transparency). GIFs are limited to a total of 256 unique colors, or 255 if the image needs transparency. This is very limiting compared to what the JPEG format can allow, but if your image falls under that ceiling, it's perfect for the job since it won't have any of the artifacting which JPEG is notorious for.

Programs like Photoshop's Save for Web utility provide ways to compensate for images that are too color-rich such as automatically selecting the most prevalent colors and using dithering to create a perceivably higher color depth. It's the same technique used by operating systems trying to render high color images when the display is set to 256 colors.

If you're dealing with a very old version of Photoshop like 5.5, getting a PNG loaded in there may be tricky if it was exported with a later program. It may render incorrectly, ignore the alpha channel, or even crash the program! Strangely, another program included with Photoshop 5.5 called ImageReady doesn't exhibit such problems, so you could use that to adapt your PNG into a format Photoshop 5.5 can digest. With your image opened in ImageReady, select Save Optimized As from the File menu and save the image in Photoshop's native PSD format.

The newly exported file can be opened in Photoshop without any problems. Open the Save for Web dialog, and choose GIF as your format. If something looks wrong with the optimized format, select a new color setting like Perceptual in the drop down menu just below the image format menu. I don't recommend using the Windows or Mac OS palettes, as 256 color displays will dynamically adapt their own active palette to the visible contents on the screen anyway.

From here, you can tweak your GIF to an optimal state. If your image has transparency, you'll almost certainly want to enable it in the export by checking the Transparency box. If your image fits within the 256 color limit, you can select 256 in the Colors drop down menu and it'll use every color found in the image without size penalties.

If all goes well, your exported GIF should display in your browser with the transparency you want.

But say you're exporting an image with more than 256 colors to a GIF... there's certainly nothing stopping you from that. You can play around with the dithering settings, choosing the algorithm to use and the amount to set if applicable. If you're still working with a transparent image and your version of Photoshop has the feature available, you may want to turn on transparency dithering as well. Once you're satisfied, export the GIF.

With all of that taken into account, you should be able to export your images for viewing in the most ancient browsers!

One Last Trick

Remember when I said I used an empty GIF to force a table cell to expand to a certain width on all browsers? Creating one in Photoshop is trivial! Just follow these steps...

Create a new image with the exact width you need.
Create a new layer, then delete the background layer.
Open the Save for Web dialog and save the image as a transparent GIF.

Once you have the blank GIF saved, you can place it in an <img> tag wherever you need it in your table. For the alternate text, just input a space.

Ready to Go!

Congratulations! You've just read through an entire series of pages teaching you obsolete HTML standards like those found in my high school's web design textbook I used in 2014! I actually learned how to better leverage them on my own time when I was refining Razorback to work on old browsers. In any case, you should now be armed with the knowledge to create a website that'll load well on a 486!