Improving page speed: optimizing images

Optimizing images for your web page images is a very important and strategically crucial task to improve the average page speed. Image size affects your page speed in several ways and we have to take care of different techniques to optimize page.

Resize your images

First, we have to take care about images' size, that is their width and height. If you're lazy, like I am ;), you're likely to let css do the job for you: you just upload your image and then you write a bunch of css rules to resize it (or maybe you still even set width and height as attributes of the <img> tag!!!). This is a huge mistake: hundreds of kilobytes can be saved serving scaled images. A tool like GTMetrix will sign this as a high priority task to improve page speed.

So if the image that is really displayed in the web page has a width of 300 px and a height of 120 px, don't use your original image by 1200 px x 480 px: resize it instead and use the one of the requested size. If the same image must be displayed in different sizes, upload to your server one image per each size, maybe appending a suffix which specifies width and height to the image name. And be sure to link the right image to the 'src' attribute of your <img> tags.

The golden rule here is: don't use CSS to resize your images!

Combine your images

Another useful technique to use in order to optimize the loading time of our images is to use sprites. This technique has born in video games development to create animations and it can be proficiently be used in web development too.

Let's say you're building a multi-language website. Probably you'll want to put somewhere in your page 2, 3 or more flags the user can click on to change language accordingly. The best way to do it is to build a unique image which holds all your flags you want to use and use css to make visible only one flag per time. Let's do it with an example.

Suppose to have 3 flags images like these ones:

The wrong way

We could be tempted to write something like this:

<ul id="flags">
    <li>
        <a href="#" class="lang active" id="es">
            <img src="images/flags/flag_es.png" width="32" height="32" />
        </a>
    </li>
    <li>
        <a href="#" class="lang" id="en">
            <img src="images/flags/flag_en.png" width="32" height="32" />
        </a>
    </li>
    <li>
        <a href="#" class="lang" id="it">
            <img src="images/flags/flag_it.png" width="32" height="32" />
        </a>
    </li>
</ul>

The right way

Instead to use the three images separately nested in the three <anchor> tags which presumably will trigger the language change event, we're going to use our image editor of choice to combine the three flags in only one image file. Each flag is 32 px x 32 px so we can build an image with a width of 32 px and a height of 96 px. We'll get something like this:

Now we can use the following html structure for our language menu:

<ul id="flags">
    <li>
        <a href="#" class="lang active" id="es"&gt;&lt;/a>
    </li>
    <li>
        <a href="#" class="lang" id="en"&gt;&lt;/a>
    </li>
    <li>
        <a href="#" class="lang" id="it"&gt;&lt;/a>;
    </li>
</ul>

Below you find the CSS rules for this piece of markup:

ul#flags{
    list-style-type: none !important;
    margin-bottom: 0 !important;
}
ul#flags li{
    display: inline !important;
}
ul#flags li a{
    display: inline-block !important;
    width: 30px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    text-align: center !important;
}
ul#flags li a#es{
    background: url(../images/flags/flags.png) 0 0 no-repeat;
}
ul#flags li a#en{
    background: url(../images/flags/flags.png) 0 32px no-repeat;
}
ul#flags li a#it{
    background: url(../images/flags/flags.png) 0 64px no-repeat;
}

Do you notice the last three rules? There we set the top property of the background image: 0 for the Spanish flag, 32 for English one and 64 for the Italian one. The result will look like this:

In this example, I have highlighted the active language with an orange circle (using the javascript to change the active item on click event, but I'll let this for another article about how to create a multi-language web pages using a couple of fantastic plugins for jQuery).

What is the advantage of using sprites? As GTMetrix explains,

Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.

Compress your images

Option 1

Be whatever it be the techniques you're using to optimize your images, it's almost sure that PageSpeed Insights (or GTMetrix or whatever other tool you're using to measure your page performances) will tell you "Optimize images". The good news is that both GTMetrix and PageSpeed Insights allow you to download optimized images from their servers. PageSpeed Insights allows this even in a more comfortable manner: it optimizes your images for you, minifries your javascripts and Css and serves them in a compressed file ready to download: isn't it great?

About minified javascript and css used in prioritizing content process, you can learn more reading this article.

Option 2

You have even other options to compress and optimize your images, just to do your tests using already optimized content. The first option you have is to use online tools. For instance, compressor.io it's a fantastic tool which allow you to compress your images lossless and save hundreds of Kb, as they claim in their home page. If you use Wordpress, you can live without SmushIt plugin which optimizes your images while you are uploading them!

Option 3

You can also use a standalone software. The best one I have tried is certainly Riot (acronym which stands for Radical Image Optimization Tool): it is for Windows only, but you can easily run it from your Linux box using Wine. It does the magic! It can compress a 4500 x 3000 image of 19.4 Mb to a 5.09 Mb without resampling the image and without any visible loss of quality. If you resize the image to a more reasonable size in terms of width and height, let's say to a 1000 of width and 668 of height the new file weight will be 173.9 Kb!

I hope you have found useful this article. If you have some comment or some question, feel free to post a comment or to contact me through the Contact page. And if you really feel generous, don't forget to share this post on your social networks! Thank you!

The post Improving page speed: optimizing images appeared first on codingfix.