The definitive guide to optimize images for the web

Use the right image format

The 3 most common file formats for images on the web are .jpg, .png and .gif. Here’s a brief summary of each image 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.
• jpg: Use this format for displaying photos, illustration images, etc.

Use thumbnails instead of html resizing

HTML and CSS offers 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.

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 2015, I still see lots of people encoding text in images. This is definitely bad. In 90% of case, you can instead use a webfont and CSS. Webfonts are faster to 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 a image in order for it to be displayed on a website.
Basically, if you’re intending to display and image on your website, use Photoshop’s “Save for web” function. Always.

If you don’t have Photoshop, don’t worry. You can use Optimizilla, an online image optimizer. Prefer using an app? Then I recommend RIOT.

Using WordPress? Install the WP Smush plugin

If you’re using WordPress, you can save a lot of time by simply installing a plugin that optimize 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 image you’re uploading and optimizing its size with no compromise on the quality. Results are impressive: images can be reduced up to 80% in size.

There’s also a “pro” version of the plugin, called WP Smush Pro. I haven’t tried it yet but the extra features are very appealing: optimization of images up to 32mb (WP Smush is limited to 1mb), bulk optimization of all your images with one click, even better compression, and so on. If you’re interested in the “pro” version of WP Smush, click here to visit CWC’s “deals & coupons” page and get a 50% discount.

Use caching techniques to display your images faster

Although this isn’t really an image optimization technique itself, caching your images is an overall good practice and will display your images faster to your returning visitors.

Here’s a ready-to-use code snippet that will cache various filetypes (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>