Images are a very important part of advertising and marketing. They transmit ideas, emotions, and sensations, and can influence the message of the campaign as much or more than the written message, but misused can produce a feeling of unprofessionalism or neglect, or even a very unpleasant visual effect for the user. To achieve the desired stimulus we must know how to apply them and what are the requirements of each type of support. Therefore, for certain projects a professional web design is essential.

In this post, we will focus on optimizing images for web pages.

Why is it essential to adapt the format and resolution of the images to the type of support?

Practically all of us at some point have encountered the following situations:

• A web page that takes an eternity to load (more than 5 seconds is already too long to load), and can be seen as one or several images of the page appearing little by little.
• A web page whose images are cropped, deformed horizontally or vertically, or are too large or small.
• Posters or any other type of graphic printed with images with little definition, blurry or poor quality.

This is due to a poor adaptation and optimization of the images since each support requires specific parameters. If we hire a designer to carry out our project, either online or physically (printed), he will take care of this optimization, but if we have to provide the images we must know what can serve him and what not.

Likewise, if we are going to do it ourselves, we will have to take into account several values depending on where and for what the images are going to be used.

The Importance Of Resolution And Size In Images

What is image resolution? We could say that it is the “quality” of that image. Usually, for monitors, it is measured in DPI (pixels per inch), or in English PPI (pixels per inch), which in printing translates into dots per inch. It is a measure of image density that relates the total number of pixels or dots that make it up, to its size.

Too technical? The simple explanation would be the following: the images are formed by colored dots, the more points the image has, the better its definition. This could lead us to think then that the more resolution, the better. But beware, for digital format, it is not like that.

What image resolution is used on web pages?

For web pages, the resolution used is 72 dpi since “normal” screens have that resolution. But now, with the novelty of retina displays, this resolution may be insufficient. This is solved by doubling the resolution (150 dpi for rounding), or by doubling the size of the image. The size of an image for the internet is always measured in pixels.

Uploading an image with a lot of resolution or size to the internet not only is useless, since its visual quality will not improve because of it (the monitor simply does not give for more), but it is also counterproductive. The more resolution an image has, the greater the memory it occupies.

What does this mean? Well, it will take much longer to load, and will affect the loading speed of the page. Likewise, even having an adequate resolution, if the image is too large it will also “weigh” us more than necessary.

Why is image size important on a web page?

It is necessary to adapt the size of the image to the space it will occupy to maximize loading efficiency. It is absurd for an image to have more resolution than the screen can reproduce as can be seen in the images below.

If we click on one of them with the right button and select “open image in a new tab”, the browser shows us the image in real size.