Image Optimization – optimizing pagespeed

Categories SEO

Images and graphics are an important part of every website. They help you to explain things in easy ways. But they are also very huge, at least in most cases, so it takes a lot of time for the client (the browser of the visitor of your website) to download them. This means that it takes longer until your visitors can see your website. The longer it takes to load your website, the less people will wait for it until it got fully loaded. Of course this will raise the bounce rate of your website and in case you want to make money with your website, it will definitely lead to less conversions. WordPress Speed TestTherefore image optimization is a huge piece of the puzzle of success.
Scale images to the needed size Photographers and graphic agencies of course want to deliver photos and images in the best possible quality. This often leads to pretty huge scaled images, which is not really needed on every website. The point is that the bigger the image, the longer the page load time. So why should you use a picture with a width of 2000px and a height of 1000px when it is only displayed with 200px x 300px on your website? There is no point of doing this.
The solution is very easy, almost every graphic program can scale images to the preferred size. To scale my images I use Gimp.

How to scale images with Gimp

A very god functionality of Gimp is Autocrop image. This function cuts all the whitespaces on the top, bottom, left and right. So basically it cuts all the stuff you don´t need. To run Autocrop image go to Image and then Autocrop image. Now your image will be way smaller. After that you should scale your image to the preferred size. Therefore go to Image and then Scale Image. Enter the values of height and width into the displayed input fields.

As values take the same values your image is displayed on your website. The easiest way to make sure that your image is displayed with the correct height and width is to set those values in the HTML code:

Set the correct height and width for your images in HTML
Set the correct height and width for your images in HTML

Since people definitely will watch your website on different screens, there is the need of delivering images in several scales. I will explain you in the next section how you can figure this out.

Different scales for different screens

There are several ways to deliver content for different screens. In my Blog Post Dynamic Serving vs. Responsive Design I already explained some ways of delivering content for different screens. In case you use WordPress as a CMS most of the Themes already do all the work for you. You can check in your image folder, there should be several versions of the same image.

In case there are not or you do not use a CMS like WordPress I will show you how you can arrange different scales for images on your own. Luckily there is no need for coding, Matt Wilcox already coded a script that does all the work for you. The only thing you have to do is download the file adaptive-images.php and place it in the root directory of your website. Then you have to place the following snippet in your .htaccess file:

.htaccess file for the adaptive-images.php script
.htaccess file for the adaptive-images.php script

Don´t worry this snippet is already included in the download. In case you do not already have a .htacces file you simply use the one provided, otherwise copy the code into your file. For any further information there are also detailed instructions in English and German in the download included. The last thing you have to do is to place the following JavaScript snippet into the header of your website. In case you use WordPress you have to place the code into the header.php of the actual theme you are using.

Code Snippet for the header of your website to use the adaptive-image.php script
Code Snippet for the header of your website to use the adaptive-image.php script

The perfect image format

As you might already know there are many image formats you can use. JPG, PNG, GIF, but which one is the best, and by best I mean the best for websites? In general I would recommend to use the JPG format. Only if you have some transparent parts in your image it is better to use the PNG format. Only in PNG it is possible to have some transparent parts. OK, actually it is also possible to have transparent areas in GIFs but I really recommend you not to use this file format.

There is one more image format I want to introduce you, it is called WebP.

WebP – image format

With Google´s image format WebP it is possible to save up to 65% of data. At first sight this seems perfect. As you might remember, the smaller the image the faster your website. Therefore WebP seems the perfect choice. The only problem is that until now only Chrome and Opera are maintaining this format. In Firefox for example WebP images are simply not displayed. I will explain you later how to solve this problem but first let me show you how to generate WebP images.

The easiest way is to use a WebP converter like webp-converter.com. It is possible to upload images in the formats JPG, PNG and GIF. In case you want to convert more than 1 image at once you have to use the official converter. The usage of this one is way more complicated than the usage of the other converter. I possibly will explain the usage of the official converter in another Blog Post.

But now I want to explain you can handle the problem that Firefox and Internet Explorer are not maintaining the WebP format.

WebP for Firefox and Internet Explorer

There are 3 way to use the WebP format in Firefox and Internet Explorer. You can use either CSS, HTML or your .htacces file. In CSS the things you have to do like like this:

WebP Fallback in CSS
WebP Fallback in CSS

In HTML5 the code looks like this:

WebP Fallback HTML5
WebP Fallback HTML5

And in the .htaccess file the entry would look like this:

WebP Fallback .htaccess
WebP Fallback .htaccess

And that´s it, now you can easily use WebP images on your website.

Compress images

Compressing images is another very important step to make your website faster. Because always keep in mind, the less bytes your images have the faster your website is.

There are several online tools to compress images like tinypng.com or jpegmini.com. The all work more or less the same. You have to upload the image you want to compress and that´s it. After the compression is done, you can download the compressed image. In case you use WordPress I recommend you the Plugin Compress JPEG & PNG images.

Image-Maps

Image-Maps are great to reduce to requests to your webserver. The thing is that all the images of one page will be collected in one image-map, therefore only one request is needed. There are several online tools available in the internet, I recommend you image-maps.com.

But to be fair I would not recommend you to use image-maps. The reason is that you cannot set different titles, image names and alt tags for the images. Therefore the images of your image-map might not be indexed by search engine crawlers. So you have to make a choice, faster website of images indexed by search engine crawlers.

Conclusion

So as you can see there is a lot of work to do to optimize the images of your website. The best thing is to optimize images right from the beginning because when you start later you have to optimize a bunch of images at once.

Nevertheless image optimization is a very important step to make your website faster. The reason is that images usually are the biggest files on your website.

Leave a Reply

Your email address will not be published. Required fields are marked *