scaling featured images

  • When I analyse the page speed with GTmetrix, I get the following message:

    The following images are resized in HTML or CSS. Serving scaled images could save 241.6KiB (85% reduction).
?	https://mysite.nl/wp-content/uploads/stroompje-reest-en-wieden-520x245.png is resized in HTML or CSS from 520x245 to 200x94. Serving a scaled image could save 210.2KiB (85% reduction).
?	https://mysite.nl/wp-content/uploads/duurzaam-520x245.png is resized in HTML or CSS from 520x245 to 200x94. Serving a scaled image could save 31.4KiB (85% reduction).

    These 2 images are featured images from blog items, and are in the sidebar, not the page itself, along with 2 other images that don’t cause this message. I’ve had similar messages before. I have no idea what may cause this issue, and whether it’s a theme-related issue or WordPress-related.

    Does anyone have a suggestion on this topic?

    • This topic was modified 7 years, 3 months ago by MarionFW.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi,

    In my personal opinion, it’s not possible to satisfied that rule in responsive theme design. It can only apply to old design that has a fix width for all elements in the webpage.

    In a responsive theme design, The style code for image width is set in percentage ( so that it scales up or down in size ) and not a fix pixel value. It’s normally set to 100% width in css, so that it fits it’s container when your browser size changes.

    Depending on your browser width, the image will be scale down in size if you view it in mobile and it will be scale up in size if you view it in a large screen monitor.

    If the image was to remain the same size, it will overflow your screen if you see it in mobile and remain small if you view it in large screen monitor.

    In order to satisfied that gtmetrix rule, you will have to change the css value for image to a fix width and fix height, but doing so will break your responsive design, therefore in my personal opinion you should just ignore it.

    Thank you.

    If your preview thumb is so big you must be uploading uncompressed images (I gather this from the reported saving in size: 210.2KiB).
    My thumbnails in 520×245 are usually something between 20 & 30Kib = around 10% of the size GT-Matrix reports as a saving for yours… Even my 720×340 thumbnails are never over 70Kib!

    Optimise your images first – they will have a much larger speed impact!

    Thread Starter MarionFW

    (@marionfw)

    @webbeetle: one of the uploaded images is originally 27,2 kB, so that cannot be the problem. All images I upload are automatically optised (WP Smush), so I can’t imagine why the images in the sidebar should be too large.

    Then maybe the 210Kib is the sum of all thumbnails.
    Anyhow: for Apple Retina displays you’re supposed to serve images twice the resolution – so it can’t be that bad.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘scaling featured images’ is closed to new replies.