[Resolved] Image/media width settings versus layout, srcset and retina

Home Forums Support [Resolved] Image/media width settings versus layout, srcset and retina

Home Forums Support Image/media width settings versus layout, srcset and retina

  • This topic has 5 replies, 2 voices, and was last updated 3 years ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1673892
    nordicsouth

    Sorry for a sligthly out of Generatepress question, but you are usually so smart and clear minded! My mind is going crazy over image sizes (and after googling for weeks(!) I know I am not alone).

    Some years ago I read people saying you should delete all media/image width settings but one, the rest where “useless”. So I did, and ended up with only “Large”, set to 600px! And now I understand my images look small and that the new function “srcset” is really smart, but for it to work well I need to regenerate all my images, so I will get the different media sizes back again for use in srcset. And I have a lot of images!!

    I have changed all settings back to wp default, so Large is now 1024px. But I haven´t regenerated them yet (only some test images) because I am not sure this standard setting is right for me…
    Since I also want to start using retina images soon, there will be even more sizes and I am afraid it will blow up the space on my web hotell…
    So I want to be smart, but I only sink deeper into this black hole that is media sizes…

    This is my settings:

    My container width is 1200px. So full container width images above content on pages is viewed at 1200px width on desktop. (When I later change to Retina I will have to upload them as big as 2400px. Right?)

    My actual content area in pages and blog single is only around 700px on desktop (+40 px padding on both sides +sidebars on both sides).

    For images in content I use the wp media setting ”Large/1024” to insert all images (and they are many!!). But they are only viewed at 700px width on desktop, since the content width is 700. Right? (When later on Retina I need to upload 1400px or 2048???)

    First the most basic questions:

    Am I doing it right, to use ”Large/1024” for all images in page and blog posts content, thou they will only be viewed as 700?
    And to use ”Full width” for my few container-width-images (1200px)?? Because wp native ”Large/1024” is to small for that.

    Then the head-twisting questions:

    A
    But if content images is only viewed at around 700px, does that mean that the srcset kicks in and always use ”Medium-Large/768” instead of ”Large/1024”?? So that ”Large/1024” will actually never be use!?? Only take up a lot of space on my web hotel…
    So should I then actually set ”Large” to ZERO (!) to save space on my server, because ”Medium-large” is always (??) used instead of ”Large”?? No.. since I can not choose the size Medium-Large in WP when inserting images.
    And maybe it will be using “Large/1024” on high end mobiles where there are no sidebars??

    B
    Or should I maybe do something drastic and change media settings for ”Large” to 800, instead of 1024, to match my ca 700 container width?? Is that the right way to handle the setting for Large??? (And upload 1600px images for retina).
    And then also disable the size ”Medium-Large/768”, since that is so close to 800 that I do not need it anymore?
    I would then have the images Full (1600), Large (800), Medium (400) and thumbnail (150). But is the jump far to much between 800 and 1600… And when I start using retina, will there be Full (1600), Large (800), Large-Retina (1600), Medium (400), Medium-Retina (800), Thumbnail (150), Thumbnail-Retina (300)???
    That makes no sense, it only doubles everything… Right?

    C
    Or should I instead change ”Large” from 1024 to 1200, to also fit my container-1200-width-images? Is that better in any way??
    Since my content is 700px, maybe it will actually always use srcset ”Medium-large/768px”, so it doesn´t matter at all if I set ”Large” to be 1024 or 1200???
    But then ”Large” takes up server space for no reason at all… ?

    And there goes my mind!!
    Help!

    #1674718
    David
    Staff
    Customer Support

    Hi there,

    yes it complicated but you know the your layout sizes so thats half the battle.

    If you were to ignore Retina for now then the simplest options would be:

    1. Your original image only needs to be 1200px – which becomes the Full Width image.
    2. The default WP medium-large attachment size is 768px. This covers both your in content images ( 700px ) and the standard size tablet devices when viewed in portrait.
    3. The medium size could be bumped to 400px to cater for images on mobile devices.
    4. This kinda makes the Large image obsolete – and could be removed – if you’re concerned about the size of your server database.

    Now for the rub:
    The browser will select the most appropriate sized image for its display purposes.
    For example if you set a Full size image inside your content than a 768px image would suffice as long as that image fills the width of the viewport, On a retina device the browser would look for a larger image and jump to the next highest available size in this example that would be the Full 1200px image.

    You can of course control/limit the sizes available in the src-set – example: setting an image to medium-large in your content this will cap the size of that image to 768px… WP won’t include the any image sizes above that in the src-set.

    So best thing is to NOT overthink it browsers will move to larger size images if they are required – they may not be the exact size they want but they will do the job.

    #1675756
    nordicsouth

    Thank you for answering. You are right, the most important thing is to make the basics work, the rest (retina) is “extra”.

    To be future-proof I will not “remove” Large. (If it ain´t broken, don´t fix it…)

    For mor future-proof I will probably upload content images 2xMedium-Large (preparing for retina), so the uploaded Full size is 1536.
    I just did see that 1536 is also a new default size in WP “srcset” since some year back, did not see that earlier, even better.

    But I forgot Google is also in the mix. As far as I understand Google wants to find at least one image in a post that is 1200, and 16:9! Hopefully Google will find/use a Full size, when Large is set to only 1024? I will seek more info about that.

    Time to do some more image-regenerate-tests.
    Wish you alla nice weekend.

    #1675853
    David
    Staff
    Customer Support

    Thats right WP will generate 1536 and 2048px size images if the Original upload is larger.

    To the best of my knowledge Google doesn’t care what size Images are on the page, or if there is any images. It is the Browser that decides on what size image it will use.

    If you have a 1200px container and a Full size image inside that it will choose the largest size image that best suits the purpose. If a 1200px image is available it will use that, if the browser is on retina device it will look for an even larger image if its available.

    The only time this doesn’t apply is if the image is a CSS Background image. In that instance there is no src-set available.

    #1675936
    nordicsouth

    Thank you, I think everything is falling into place now. 🙂

    (About Google, if I read it right it is not about rendering my page, but about SEO and Google search result. Something like that…)

    #1676543
    David
    Staff
    Customer Support

    You’re welcome 🙂
    Aah yes – i recall something to do with respecting a landscape aspect ratio in Google image guidelines that 1200px was now recommended if the image height is 800px or greater…. i believe that was to do with AMP pages…. not sure though

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