So, are you tired of posting 20MB PNG images to your website and making all of your web developers cry as they die a little more inside?

Realtively high quality JPEG
All of the examples in this post are going to be variations on this relatively high quality JPEG image. If you open the image by itself, it is a full HD 1920x1080px image with a filesize of 237kb, well within what I would call optimal filesize for an image of this size.
Credit for the original photo: Photo by Etienne Girardet on Unsplash

Note: My website does use automated image optimizations, so it’s possible that the image you see above is not the format or the size I’m describing. Please click or tap on the image to see the full quality.

The secret to making web optimized images is actually pretty simple. There are three main rasterized formats you should be aware of, and one other one you should probably just let your developers (or a plugin) manage for you. I’m going to go through pros, cons, and use cases for all four.

JPEG

This format is really common, and often disparaged for the obvious compression artifacts that are a side effect of its compression method (large squares you can easily see in lower quality images).

JPEG – PROS
-Supported by all browsers.
-Highly variable compression meaning you can dial in the quality to match both your size and visual needs
-The most efficient way to compress images with many colors and photos while still getting acceptable quality.

JPEG – CONS
-No support for transparency
-High quality settings can result in very large files
-High complexity images can show very obvious visual artifacting on lower quality levels
-For simple images with few colors, this can result in a much larger file-size than other formats

Low quality JPEG example, note the artifcating, especially around the solid lines.
This is a low quality JPEG of the same size. The filesize is roughly 1/10th of the original, but displays significant JPEG artifacts especially around the hard lines of the pool edge and ladder.

Note: My website does use automated image optimizations, so it’s possible that the image you see above is not the format or the size I’m describing. Please click or tap on the image to see the full quality.

JPEG – USES
By and large, this is the best way to make photographs and images with high color counts reasonable sizes to be viewed online. This is for the same reason that JPEGs can show those terrible square artifacts. JPEG compression works in a grid, compressing each grid separately to reduce the number of colors used. By breaking the process down it can use relatively restrictive color pallets (which make for smaller file-sizes), and rotate them based on what is in that particular grid.

PNG

This is the second most common format online. PNGs tend to look a lot cleaner and show more consistent color across the image.

PNG – PROS
-Very clean and efficient format for images of relatively few colors
-Support for transparency
-A “true-color” format. One of the most accurate web safe formats for color.

PNG – CONS
-For images with high color complexity, file sizes balloon fast
-Common image techniques like anti-aliasing and blending raise the relative color complexity of images very quickly

Low resolution PNG example, note the color accuracy of the image, but also note how much smaller it has to be to be appropriately sized for the page
This is a PNG of the the same image. At the same resolution, the resulting image was well above 1.5MB, and to reduce the filesize to a similar level I had to reduce the resolution to 500x333px. But also note how color accurate this is compared to our high quality original.

Note: My website does use automated image optimizations, so it’s possible that the image you see above is not the format or the size I’m describing. Please click or tap on the image to see the full quality.

PNG – USES
Icons and low complexity accents are great as PNGs. Since PNGs encode every color in the image and use it throughout, this is a best rastered format for maintaining accurate branding. Additionally, because of the same encoding, filesize is most closely related to color count rather than image size, so a low complexity PNG of a large size can still be relatively small. This is why PNG photos are so large, but huge business logos might be orders of magnitude smaller.

GIF

GIF as a format has fallen out of favor in the last decade or so, but it’s still important to know about as it can still solve some problems.

GIF – PROS
-Support for transparency
-Supports frames for animation
-Can result in very small file-sizes

GIF – CONS
-Restrictive color palettes can result in low color accuracy
-Improvements in video encoding mean that the same animation encoded as a video and a GIF is usually smaller and higher quality as a video file.

Low quality GIF example, to demonstrate the restrictive color palette of the format
This is a very restrictive GIF pallet, the lowest Photoshop would allow me to use, so that you can easily see how GIF uses dithering to try to account for its restrictions. While this image is of a significantly lower quality that our original, but at 424kb it’s almost twice the size. A GIF can result in a smaller filesize, but often only if extreme compromises are made to get there. This is the reason that GIF images have fallen out of fashion with web designers over the years.

Note: My website does use automated image optimizations, so it’s possible that the image you see above is not the format or the size I’m describing. Please click or tap on the image to see the full quality.

GIF – USES
If an element is in the background, has a restrictive palette anyway, or is going to be moving, using a GIF might result in a smaller file-size than a PNG. They often look a little better than the more restrictive PNG-8 Encoding. I don’t think this is a format you’ll find yourself using all the time, but it’s always nice to have another option when you’re trying to shave filesizes.

WEBP

WEBP is a format developed by Google that combines the pros and cons of JPEGs and PNGs to compress both even further. At this point, it’s pretty widely supported by browsers, but it isn’t supported by all of them. My recommendation is to save your files as any of the above and upload them to your website. If you are working with a developer, there are tools available for them to easily convert them to WEBP, and there are many plugins available for popular CMS solutions to do the same thing automatically. In both cases, your website can be configured to optionally serve those images instead of the originals if the browser supports it.

You might notice that I’m not including an example image, that is because if your browser supports it and my image optimizations are working correctly, my website will have silently replaced some of, if not all of, the above images with WEBP copies. The real advantage of the format is that in a lot of cases, writers and designers can keep using the image formats they’re familiar with and the server can handle all the heavy lifting of putting WEBP in place if possible.

A Note on Vectored Images

There are many cases where you might choose to use a vectored image instead of a rasterized one. Online, the only vector format you need to worry yourself with is SVG, and I strongly recommend you work closely with a developer to decide when and where you should use SVG images, as the nature of the format means that they can quickly grow in size if you are not careful. That’s not to say you should avoid them, as a well made SVG means that your image will look amazing on any size screen.

If you have questions about how you can better optimize your images, or any other services I provide, please fill out the form below to get into direct contact with me, and join me next week when I start a several part series on Email Marketing.