Image Optimization For The Web: The Definitive Guide

By Jean-Baptiste Jung (webdevblog.com)

A quality website is a website with a fast page load. Readers don’t like to wait, and it’s also no secret that page loading time is playing a very important role in the way how Google is ranking websites. And when it comes to page loading time, image size and image optimization are very important factors.

Here’s a definitive guide on how to optimize images for the web as well as a few extra other techniques and guidelines.

Use The Right Image Format

The 3 most common image formats on the web are .jpg, .png and .gif. Here’s a brief summary of each image file format and when you should use it.

png: Use PNG images if the image has text in it, or if you need a transparent background.
gif: Use GIF for very small images such as a 5*5px background tile, or animated images.
jpg: Use JPG or JPEG images for displaying photos, illustration images, etc.

Use Thumbnails Instead of HTML Resizing

HTML and CSS offer you the possibility of resizing images by specifying the desired width and height. While this is a useful feature, the image isn’t actually resized, it’s only displayed at a smaller size. You want to display a 500px width image? Then, resize your original image to 500px and display the resized version instead of the original. This will result in a much faster page load and a better user experience.

If you’re using WordPress, the upload tool automatically resizes any uploaded image to various sizes (original, medium, thumb, etc) so you should always choose the appropriate size.

On php-based websites, there’s many different libraries that allow you to easily generate thumbnails on the fly. ImageMagick is one of the most popular.

Use CSS3 Effects Instead of Images

Need a gradient or a fancy text effect on your website? Don’t use images! The CSS3 specification allows you to add lots of visual effects. One of my rules of thumb when it comes to web design and development is to avoid using images as much as possible.

In other words, if you can do something using CSS, do it with CSS, not images. There’s tons of things that you can do with CSS3 instead of using images, and your website will be faster.

Use web fonts instead of encoding text in images

In late 2019, I still see lots of people encoding text in images. This is definitely bad. In 90% of the case, you can instead use a Webfont and CSS. Webfonts provide a faster page load than a whole bunch of encoded text images.

Using webfonts is super easy. In order to ensure a good cross-browser compatibility, you need to have the font you wish to use in the following formats: .ttf, .woff, .svg and .eot. If you only have one of those file formats, there’s a super useful online tool to help, the Fontsquirrel webfont generator.

Drop your fonts somewhere on your web server, then add the following on your .css file:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); 
       url('tagesschrift.woff') format('woff'),   
       url('tagesschrift.ttf') format('truetype'),
       url('tagesschrift.svg#font') format('svg');
}

Once done, you assign the webfont to an element using the font-family property:

p {
    font-family: "Tagesschrift", Georgia, Serif;
}

Make Use of Photoshop’s “Save For Web” Tool

When it comes to web design, Photoshop is by far the most popular program, and most of you are probably using it. Despite its popularity, a lot of users never use the “Save for web” feature. It’s a shame because this function allows Photoshop to provide the user presets to save an image in order for it to be displayed on a web page.
Basically, if you’re intending to display an image on your website, use Photoshop’s “Save for web” function. Always.

Online Tools for Image Optimization

If you don’t have Photoshop, don’t worry. Optimizing images online has never been easier, thanks to many free websites that provide online image compression. Here are a few tools you can use:

Optimizilla: This online image optimizer uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG and PNG images to the minimum possible size while keeping the required level of quality.
Tiny PNG: TinyPNG uses image optimization and smart lossy compression techniques to reduce the file size of your PNG files. Althouth this handy tool focuses on PNG, it can as well work with other image formats.
Compressor.io: Compressor is a very useful online tool for optimizing your images. It supports JPG, PNG, SVG and GIF, and offers both lossy and lossless image compression. Compressor.io can provide up to 90% file size reduction.

Using WordPress? Install an Image Optimization Plugin

If you’re using WordPress, you can save a lot of time by simply installing a plugin that will take care of optimizing your images. I’ve been using WP Smush. It works like a charm: install the plugin, then upload your images normally. WP Smush takes each file you’re uploading and perform an advance image compression technique that optimizes the image file size with no compromise on the image quality.

Results are impressive: file size can be reduced up to 80% in size. This will make your website load much faster while keeping good image quality.

Another interesting plugin is Optimole. It features most of the options offered by Smush and adds new functionalities: Images can be served from a global content delivery network, WebP images support, lazy-loading, etc.

Use Caching Techniques to Display Your Images Faster

Although this isn’t really an image optimization technique by itself, caching an image file will make your web page load faster to your returning visitors.

Here’s a ready-to-use code snippet that will cache various filetypes (gif, png and jpeg images, and also other kind of documents like pdf or flv).

This code has to be pasted in your website .htaccess file. Make sure you have a backup of it before applying this technique, just in case something goes wrong.

# 1 YEAR
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MIN
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>

Frequently Asked Questions

Why Is Image Optimization Important?

Image optimization makes your website lighter and therefore has as faster load time, resulting in better user experience.

How do I Optimize An Image For Web Without Losing Quality?

Both Photoshop’s “Save for Web” function and the online tools listed in this article allows you to optimize an image for web, without losing quality.

How Does Image Optimization Work?

Image optimization is a technique that removes all the unnecessary data that is saved within the image, in order to reduce the file size of the image. Optimized images are up to 80% lighter than uncompressed images, resulting in a much faster page load time.