Image Optimization Guide
In a previous article we talked about SEO on page and two of the points it was about, image optimization and loading time, both are closely linked since one of the influential factors in loading time is image optimization. .
In the tutorial I will differentiate between basic image optimization and advanced optimizations. The basic ones can be done very easily by everyone, in WordPress there are even plugins that perform this task for us. Advanced optimizations require basic knowledge of CSS and this can be a problem for some, however I will try to explain it in as much detail as I can.
Basic image optimization.
Avoid rescaling with HTML with properties with and height.
One of the most common mistakes is to use rescaled images with HTML, that is, to use images of a size larger than the dimensions specified later in the HTML code.
Let’s look at an example to understand it better. Imagine that we have an image called
coche-250x250.jpg of dimensions 250 × 250 pixels and in our HTML code we want to place this image in a gap of 150 × 150 pixels.
<img class="thumbnail" width="150" height="150" alt="imagen no optimizada" src="http://web.com/images/coche-250x250.jpg>
As we see in the code, we have specified the width (width) and height (height) at 150 pixels with HTML code, while the dimensions of the image remember that they were 250 × 250 pixels. This is not optimal because an image of 250 × 250 pixels is heavier and takes longer to download than one of 150 × 150 pixels. To optimize this, as you may be thinking, you have to use an image of 150 × 150 pixels, that is, the same size as the hole where we want to put the image.
I must clarify that I am not saying that the properties
height , I say that they must be used correctly, that is, used in a way that fits the real size of the image .
Eliminate unnecessary data from images and compress them to the fullest.
Another important factor is the size of the images , since the heavier, the more time it needs to load. The best option to reduce the size of the images that we will use on our website is to use the Yahoo service known as Smush It.
We can access this website through the link http://www.smushit.com/ysmush.it/ and using the uploader we upload our images to optimize in a few seconds to have a zip file containing the optimized images ready to download.
I must clarify that using Smush It does not lose image quality , only unnecessary metadata is eliminated and then the algorithm of greater compression is used to generate the new optimized images.
For WordPress there is the WP Smush.it plugin that is responsible for optimizing images transparently, without having to intervene.
Use Lightbox effect to load large images or resolution.
Adding high resolution images directly to our website will take a long time to load, so it is preferable to upload thumbnails of these, which link to high resolution images.
Within this optimization measure it is advisable to use the Lightbox effect , which consists of loading the high resolution image in a pop-up or pop-up window when clicking on the thumbnail. This allows us to see the image without abandoning the article we are reading.
For WordPress there are many plugins that are responsible for adding this effect to images and even other elements such as videos.
Advanced image optimization.
Replace images with gradients with their respective CSS3 code.
Nowadays you can still see menu bars, header bars, footer bars, etc … that use an image and the
repeat property to establish a background gradient. The CSS code of these bars is something similar to:
background: url("images/gradient_bg.png") repeat-x;
We can do without these images and use the corresponding CSS3 code , for this we can use an excellent online tool that allows us to choose the parameters of our gradient in the most Adobe Photoshop style or the option to upload the image of the gradient and the tool Automatically generates CSS3 code (with different versions for different browsers) . For example, the CSS code we put before can be replaced by one that does not use images, the browser itself generating the gradient from a CSS3 code such as:
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 59%,#7db9e8 100%);
The page of the tool in question is: http://www.colorzilla.com/gradient-editor/
Use of CSS sprites for images.
On the websites it is very common to have icons (calendar, author, search, RSS, etc …), these icons usually come in separate images, that is, an image file for each icon. This means that if we need to display 10 icons, we will have to make 10 requests to 10 different URLs, which, in addition to increasing the loading time also increases the use of resources from our server or VPS.
The above problem is solved with the use of CSS sprites , which are nothing more than a collection of images combined into a single image. For example in the case of before loading 10 images, now being combined we will use only one image, so with a single request to a URL we will have all the icons and at the same time the server load is reduced.
We must bear in mind that CSS sprites have a limitation, and they do not serve to establish funds with the CSS repeat property.
Understanding how CSS sprites work can be messy at first, especially to specify the position of the area we want to trim, but once the concept is understood it is very simple. In this guide I will not explain step by step how to make a CSS sprite since it will be the goal of another future tutorial, but those who are curious and do not mind reading in English is well explained here .
Upload images from a CDN.
What they offer is a server that deals only with serving static resources , thus freeing the main server from this task and reducing the loading time of the web page.
Companies that offer CDN services distribute these images on different servers located in different countries, so that when a user downloads an image they do so from the server in the nearest country.
There are free CDN services such as Cloudflare , which we talked about in a previous article, but to obtain the full potential of a CDN you have to pay for a service without limitations.
In my opinion this optimization makes sense when the volume and visits is very high and we have to offer a lot of static content, but for a personal blog I don’t see much sense.
I hope you liked the image optimization guide and that you found it useful. If you have questions, comments or criticisms will be welcome and I encourage you to comment your opinions.