[Resolved] image sizes

Home Forums Support [Resolved] image sizes

Home Forums Support image sizes

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1604744
    t29k75

    Hi guys,

    I wish you all the best in 2021!

    I am re-doing my site locally(MAMP) using GenerateBlocks.
    It’s ready to go live, except one confusing area for me – images;(
    Could you please help me with few questions?

    My layout-container-width is 1240px on most pages, but some pages have container width 1140px or 1040px and single posts have 768px.
    Sizes of my responsive images in containers are: 900×600, 728×485, 600×400, 550×367, 530×353, 400×400, 300×200.

    a) what should be dimensions of original image uploaded to library?
    b) should I leave default numbers (150,300,1024) in wp/settings/media or change them according to my image sizes?
    c) should I create new custom image sizes specific to my site (in functions.php)?
    d) Blurry images: when I add image with same dimensions what dev inspector tool shows, images are blurry on retina desktop display. How can I avoid it? Do I need to double the image dimensions?

    e) What would be “correct/ideal” dimension for:
    1. hero & background image
    2. featured image
    3. lightbox image

    thanks,
    Tibor

    #1604811
    David
    Staff
    Customer Support

    Hi there,

    the original image size you upload should be largest size you require, ignoring Full Width Header elements that would be 1240px as thats your largest container width.

    WP will generate the 1024px ( large ) and 768px ( medium large ) and 300px ( medium ) for you. Sizes in between those values; the browser will choose the best size to fit. eg. a 600px will use the 768px…

    Of course if the device is Retina it will try to grab an Image that has x2 the pixels if it is available. So a 768px in this example would resort to the browser requesting the original Full size image. If you really must display all images at Retina Size then you would need to double the size of the original – note the performance hit that will make.

    You can register as many Image sizes that you want. This article explains how:

    https://docs.generatepress.com/article/adding-image-sizes/

    For images that are going to be used in a Full Width Element eg. Header Element then this up to you what size you use…. if the image has text over it and an overlay then you may want to use a lower resolution image eg. 1240px – if however you want a big sharp image then a larger size upto 2400px would do – the offset of course will be the time it takes to load.

    #1606037
    t29k75

    Hi David,

    “the original image size you upload should be largest size you require”
    So, if image inside of container is let’s say 600px wide on desktop, should original img be 600? (unless img gets full width on tablet). Then it will be blurry on retina. If i double it to 1200px for retina, it will be sharp, but size will go up, with loading time as well.
    My live site https://www.surf-atlantic.com/ is using retina.js script. I was hoping I don’t have to use it anymore or plugin like https://wordpress.org/plugins/wp-retina-2x/. No other workaround?

    “Sizes in between those values; the browser will choose the best size to fit. eg. a 600px will use the 768px…”
    In my case, will all of my img sizes be showing 768px version (except 900×600 img)? Does it make sense to add extra size to functions.php, let’s say 550px to serve 550,530,400px images?

    Which option should I choose from image-size settings of gutenberg wp-image-block? (can’t see medium large there)

    The rest what you explained makes sense to me:)
    T

    #1606303
    David
    Staff
    Customer Support

    So, if image inside of container is let’s say 600px wide on desktop, should original img be 600? (unless img gets full width on tablet). Then it will be blurry on retina. If i double it to 1200px for retina, it will be sharp, but size will go up, with loading time as well.

    Your point about the Full Width on Tablet is the part to take away from this, knowing when the image will be displayed at its largest size is important, so in this case your 600px should have a 768px wide image ( give or take container padding ).

    Using that same logic, you may be able to avoid adding extra image sizes, considering that some images are displayed larger on a smaller device, its not a real issue that the Desktop has to scale an image down. The knock on effect of adding more images is the size of your Database, every new image size you create could add 100’s of new image files to be stored.

    Retina – that plugin will not only generate the retina/non-retina images it will also change the IMG HTML to include the media query specifically for retina devices, which forces the browser to load that specific image, without it the Browser will work with the highest res image it can acquire.

    Retina screens would only make images blurry if there was a real lack of pixels eg. your using CSS to force a 300px to fill a much larger size. Other reasons for blurring may be the original image being downsized to an image ratio that is not precise eg. a 600px sized to 300px is a 2:1 ratio ( thats a nice even split no fractions of pixels ) whereas a 600px sized to 247px could lead to fractioning of pixels that makes the image look a little blurry.

    Bottom line here is, don’t overthink it, start with hi-res images, use a good compression tool on your desktop to minimize the file size without effecting quality too much, and upload the largest size you need for your layout.

    WP Image Block should show all Image sizes that are generated for that image, so you shouldn’t see a size if the original image was smaller than that… but the Image Block does need a lot of love as it has its issues….. You may find this useful for registering missing/custom sizes in the block settings:

    https://github.com/WordPress/gutenberg/issues/6499#issuecomment-494173138

    #1610529
    t29k75

    thanks for your help.
    I will put site live and see what issues will pop out (and then deal with them;).
    T

    #1610643
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.