Page 1 of 1

The image size when uploading must be appropriate

Posted: Mon Jan 27, 2025 10:16 am
by subornaakter20
We have already talked about the weight of images, now let's talk about the meaning of heavy images and their optimization on the site.

For example, you have a photo of 1500x1500 pixels that you uploaded to the site, although the image will only be shown on the page in 150x150 pixels. That is, you artificially increased the page size, which means you increased its loading time. And if there is more than one such image on the page, the site's speed will drop significantly. This, in turn, can lead to ranking problems.

What to do in this case?

Create photos immediately in the size required direct mail marketing for personal injury email list for the site. The content size can be changed in Photoshop: Image → Image size.

Enter the required pixel value. But change, for example, the height value. In this case, the width will be selected automatically to preserve the proportions of the photo. You will see for yourself: the picture will immediately "lose weight".

If you don't have Photoshop, there are other image processing services or editors (PIXLR or Slide.ly, for example). Slide.ly has the ability to adjust images to a specific social network or set your own custom size.

Responsive images
Adaptability has long ceased to be a luxury. Today, adaptive images are a must for every website. People have had several gadgets for a long time, so the site must be displayed correctly both from a mobile phone and from a home computer. Therefore, the image sizes are adapted to each gadget screen.

Let's look at an example: your website contains a photo measuring 1000x500 pixels:

One guest uses a smartphone, on which the photo is displayed correctly and clearly.

Another user used a computer with a Retina display, so the same image will be displayed in much worse quality.

How to fix: Upload the original image, but in different sizes. Then, depending on the gadget, use the appropriate image.

To make everything happen automatically, use the srcset attribute. Then one image will be displayed differently on different screens.