See how to optimize and make the most of your website images. Many times images are used to complement and illustrate an article or tutorial. They are very useful, add value to the content and can often facilitate the understanding of a text. It's very easy to upload an image and add it to your website content. But it is possible to optimize the images to make them much lighter and provide a better browsing experience on your website.
File name
It is important to inform the content of the image in the name of the image file, especially if it refers to an important keyword. It is very important to avoid names like “imagem001.png”, try to use a name that reflects the content of the image, for example, product-name.png. Remember that image names are very important for SEO , so choose them carefully.
If the content refers to the creation of websites, for example, you can insert an illustrative image with the name “creating-your-site.jpeg”. In this way Google and other search engines can identify the image and relate it to the content of your website. Important keywords in image names help a lot to improve the ranking of the content on search engines.
alt attribute
The use of the “alt” attribute is very important, it should be used to describe the content of the image. Remember that the value of this attribute is displayed in place of the image when it cannot be loaded. Try to provide relevant information that helps search engines identify the image. Screen readers also use information contained in this attribute to describe the image.
Don't Resize with HTML or CSS
HTML and CSS allow resizing an image, but this is not recommended, especially when it comes to significant reductions. Give preference to using image editors to resize images, it can even be Paint, for Windows. When "reducing" an image via HTML or CSS, each access downloads the original version of the image, which has a larger dimension and, consequently, is much heavier. When using editors to perform the reduction, it is possible to specify the exact size of the image in the HTML and CSS, thus avoiding the unnecessary download of a much larger file.
Css sprites
When using images in your CSS code, try to unite the images in just one file whenever possible. In this way you reduce the number of requests needed to load the site and make it open faster. CSS Sprites is a very used and simple technique to apply.
CSS Sprites consists of taking multiple images and putting them in just one image file. Through the “background-position” attribute you position the image among the several contained in the file. For example, if the site's menu uses an image for each status (hover, link and visited), it is possible to use only one image file and select the desired image through the “background-position”.
Image reduction tools
There are some tools available on the internet that allow you to reduce the size of an image by up to 80%, with an imperceptible loss of quality in some formats. Before uploading the image to your website, use a tool to compress the image to reduce its size. There are several tools for this purpose, among the main ones we can mention:
TinyPng – Great for PNG images. It achieves excellent results with practically no loss of quality.
JPEG Mini – Used in JPEG images, maintains good quality.
Compress JPEG – Compress JPEG images. In some cases there may be a reasonable loss of quality.
All these tools are excellent for decreasing the size of images. It must be remembered that images are the heaviest elements on a website, with the use of these tools it is possible to obtain a significant improvement in the loading time of the website.
You can improve your site visitor's browsing experience and optimize your site for SEO with simple changes to your site's images. By creating the habit of inserting optimized images on your website you have a series of benefits.