Images with envira

I have this issue , gtmetrix is seeking a resize size . I wish to show the images on a miniature that could be clicked and shown as full size ( only after the click ) but I have tried everything and nothing works . I leave you my url and the gtmetrix advices respect this . Could be possible to give me an advice respect this . thanks !

Hi @Borislav.VD,

Thanks for writing in.

It could be related to this, please check

As to further explain it, GTMetrix wants you to resize your image based on what it sees and not what devices see. If you have 3 columns and each column has 300px, then it expects that the image you put there is a 300px too.

Our theme is responsive, columns don’t stay on its divided layout. It breaks and responds depending on the device, so the 300px layout width will always vary. So what if the columns collapse to a single column in the mobile phone, let’s say 767px. Then two possible result, your 300px (because you resized it according to gtmetrix) will be stretched out to 76px and it will be blurry, OR, it will stay small in the corner since 300px is smaller than 767px.

That’s just about the layout size, how about a device feature like Retina Devices? A 1024px image is still small and blurry on those devices, then we know what will happen on a 300px :slight_smile:

1170x1266 to 150x162. Serving a scaled image could save 183.1KiB (98% reduction).

The 150x162, is thumbnail and too small to be displayed on other devices, but yes, enough for gtmetrix view.

Thanks!

so in another words just do not care about it isnt it ?

Hi @Borislav.VD,

Yes, you may ignore it. It’s only understandable if your site uses a mobile theme, where the layout is minimal and small without responsiveness. It’s usually true for sites with a separate and dedicated mobile site where it redirects its visitor (like http://m.example.com vs http://example.com). Hence, different images are being used for each site, but responsive layout uses the same image, it just respond.

1024x and 800px should be enough, but it still depends on where it’s placed. Let’s say you wish to display a full-width image as a banner and your layout max width is 1024px. Then recommended size for the image is 2048px, since Retina device’s DPI is 2x bigger than the standard screen. The device could be smaller, but the resolution is finer.

If you’re only displaying it on columns, then 1024px, 980px, 800px are okay (like 350px x 2 = 700px ).

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.