[Support request] Serving Scaled Images

Home Forums Support [Support request] Serving Scaled Images

Home Forums Support Serving Scaled Images

Viewing 6 posts - 16 through 21 (of 21 total)
  • Author
    Posts
  • #1502552
    Howard

    This has been a bit confusing for me as well.
    I have resized my featured image according to the width of my gp container on desktop.
    Ive varied from originally a 975 pixel width to most recently- up to 1050- 1100 width.

    Apparently, the uploaded compressed image when going to recent post thumbnails gets messed up according to Page Speed insights – where I get the following:

    https://developers.google.com/speed/pagespeed/insights/

    https://www.thesoundadvocate.com/

    Page speed test

    More.
    URL
    Resource Size
    Potential Savings

    …09/Wyred-4-Sound-front-min.jpg(cdn.thesoundadvocate.com)
    56.1 KiB
    21 KiB

    …10/Graham-LS5-9-feature-image.jpg(cdn.thesoundadvocate.com)
    45.8 KiB
    18.8 KiB

    …10/Mojo-Audi….jpg(cdn.thesoundadvocate.com)
    26.2 KiB
    10.8 KiB

    …10/Starkrimson-1024×364.jpg(cdn.thesoundadvocate.com)
    24.9 KiB
    10.1 KiB

    …09/Vivid-Aud….jpg(cdn.thesoundadvocate.com)
    25 KiB
    9.3

    How can this be fixed??

    #1502642
    David
    Staff
    Customer Support

    Hi there,

    Google is flagging those images as they are being output at 995px for a mobile sized screen.
    The flag gets raised if it calculates a smaller image could save more than 4 kibytes.

    You can set a different media size attachment to be displayed for your Archives in Customizer > Layout > Blog –> Featured Images >>> Archives.

    Now for the conundrum.
    On Desktop your images are being displayed at around 480px.
    On Mobile ( plus size ) they’re about 350px.
    But on Portrait Tablet they are at their largest of around 700px.

    So the optimum size image to select is the Medium Large size that WP generates which is 768px.
    This means you get an image that fits tablet, and provides a little file size saving.

    It may not remove the Opportunity google is raising but its an improvement.

    Now for the second conundrum. Retina Screens like to have an image that is x2 the size it is displayed at – so your current size is actually the one that most browsers will try to request. And as this largest image is what the single post will display, you can save your users browser from making a whole new request by leaving it as it is.

    #1502677
    Howard

    Wow… this stuff gets confusing.
    So Basically, if I Just look at your last paragraph- you say that I should arguably, keep my FEATURED image for blog post page at my current size? Would that be say 1100 by 500 -600 height, Or 1200 width tops? Or anywhere in between those 2 ??
    Thanks

    #1503223
    David
    Staff
    Customer Support

    Totally 🙂

    Heres what i would apply:

    1. Single Post – the maximum image width required is 994px. This takes into account the width of the main content and the padding applied to it. So you could make all of your image widths of that size.

    Then in Customizer > Layout > Blog –> Featured Images >>> Posts select the Media Attachment size: Full

    2. Archive Post images – max size is around 768px width which is when they are viewed on a Portrait Tablet.

    In Customizer > Layout > Blog –> Featured Images >>> Archives select the Media Attachment size: Medium Large

    This means your images will all fill the space provided on all devices.
    On Mobile ( which most are Retina ) it will be loading an image this roughly twice the size thats required. So google will still raise that opportunity but that can be ignored.

    #1503242
    Howard

    Thanks so much David; I will try this out exactly in my next post…. will let you know!✌️

    #1503263
    David
    Staff
    Customer Support

    You’re welcome

Viewing 6 posts - 16 through 21 (of 21 total)
  • You must be logged in to reply to this topic.