Le images they are very important in the graphic layout of a website. The user can be attracted by visual elements: well-finished and well-made graphics will improve the user experience of our visitors.
However, it is necessary not only to rely on the beauty of the image but to try to optimize. First of all we need to take into account the HTML tags, which are used by the browser to display the image.
- Il name of the image, must be short and contain one or two keywords that recall the topic expressed by the photo. This is because some users may come to our site through the search carried out on images, for example via Google Image. Having a name that expresses the content of an image or photo makes it easier for users and search engines.
- The attribute alt must be present and must reflect the content of the image. This attribute is useful if the image is not loaded by the browser, the text contained would allow the user to understand where he is and what he might encounter by continuing to browse.
- The tags width e height they must always be present, because they allow the browser to display the image without having to calculate its height and width attributes. The presence of these two attributes allows the browser to load the page without waiting to have downloaded the images present in it.
These elements allow you to obtain subtle improvements that are also appreciable in the SEO field. The text next to the image is also very important. In fact, if well structured, with information related to that of the alt attribute, it makes the image even more attractive for search engines.
The choice of the format of the images (gif, jpg, png) is another crucial element that will allow us to save a few KB when uploading:
- Gif: Provides better performance for images with a narrow color map (up to a maximum of 256 colors). This format supports transparency and small animations. It is typically recommended for graphic elements such as buttons, icons or graphic layouts.
- Jpeg: it is more suitable for photographic images and, thanks to its compression method (with loss of information), it allows us to obtain satisfactory results. This format supports transparency.
- PN: Enables lossless image compression and supports transparency and semi-transparency. The only detectable flaw is that to date not all browsers support png transparency.
The choice of an adequate format for our images will allow to obtain images with superior quality, but of reduced dimensions, and a saving in bytes useful for optimizing the loading of a web page. One way to optimize images is to reduce the size, but how? There are several tools that help us in this task:
- image optimizer is a tool that allows you to reduce the size with gif, jpg and png extensions;
- smush.com is a service offered by Yahoo for image compression;
- seo friendly images is a tool for optimizing images.
Remember that if on our site we insert an image with a height and width tag of 50px, but in reality it has a width and height of 500px, it will take longer to load, for this reason we try to reduce the size of the images before uploading it. using special programs to reduce the size.
To compress images exist proprietary libraries of dynamic programming languages as well as the use of CSS, which can help us use fewer bytes by making our web pages more efficient.
Some people may use our images in their blogs or websites, taking them directly from our website, overloading it. Some Webmasters, in fact, try to block images if viewed from domains other than the destination host. This allows us to improve the load on the server and prevent our images from being used on other websites. On the other hand, however, blocking thehot-linking we prevent image search engines from exploiting photos by depriving us of a possible source of visits to our website. The advice is to monitor the use of images through statistical tools, but do not prevent the hot-linking technique, because we would deprive ourselves of visits coming from the different channels.
