Using images for things you can do with CSS
There was a time when the CSS specification was pretty basic, and images were needed for backgrounds, shadows, icons, etc. However, with CSS3 being well supported by all major web browsers, you can now make your website faster to load and save on bandwidth by using modern CSS techniques.
Do you need a gradient? You can do it so with pure CSS. Fancy some icons? Don’t use image icons but SVGs or an icon webfont instead.
Using the wrong image format
One super common mistake when it comes to serving images online is to use the wrong format. Let’s sum it up: .jpg, .gif and .png are the three most common formats for images on the Internet. But it doesn’t mean that you should just use whatever format. In fact, each format has its own pros and cons, and using the right format for the right kind of image is something that will definitely make you save bandwidth and load your site faster while still displaying an image in good quality.
Photographs should always be in .jpg format. Logos or charts? .png is the right choice. What about .gif? Only use it for very small images such as a repeated backgrounds, that you can’t do with pure CSS. GIFs are hugely popular when it comes to displaying short, looped videos. But did you know that a 6Mo .gif image has the weight of only a little over 300Kb in .mp4 format?
Another thing to consider are emerging formats. Created by Google, WebP is a modern image format that provides superior lossless and lossy compression (26% smaller in size compared to PNGs) for images on the web. As of now, WebP is natively supported in Chrome and Opera, and there’s no doubt that other major browsers will follow. Microsoft has also created another modern format called JPEG-XR, which is currently supported by Microsoft browsers exclusively.
Using non-optimized images
As a rule of thumb, every image that you display on your website should be optimized. The easiest way to optimize an image is to use Adobe Photoshop’s “Save for Web” feature.
If you’re using WordPress, then you should definitely install the WP Smush plugin: it automatically optimizes all images you upload through the WordPress uploader and reduces them up to 90%, without any compromises on the quality. It also has an option which allows you to batch smush images you have previously uploaded. This plugin is a must-have, definitely! There’s also a premium version of the plugin available, with extra features and increased optimization. I haven’t tested it yet but it looks super interesting.
Using browser resizing on large images
In 2016, it’s mandatory that your website adapts to various devices and resolutions. While making your website responsive is relatively easy, dealing with images is a lot more tricky.
It can be very tempting to use one image, at the maximum resolution needed, and then use browser resizing to scale it down on smaller resolutions. The problem with browser resizing is that you still deliver the same big image, which consequently makes your website long to load on mobile devices and waste bandwidth, as well as your visitor mobile data.
The solution to this problem is to create different thumbnails of the same image and deliver the right image size according to the client resolution. To do so, you can either use an open-source solution such as the well known ImageMagick, or rely on a cloud-based service like Cloudinary.
Not using caching on images
Not caching your image is a mistake that makes your website slower, and costs you extra bandwidth. Images and other static resources should be cached in order to instruct the returning visitor’s browser to reuse a previously fetched resource.
Caching can be implemented easily by pasting the following code into your .htaccess file:
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule>
If you’re using WordPress, I highly recommend the W3 Total Cache plugin, which offers image caching as well as many different options for a faster website.