how many size images to use in srcset +picture to get the most benefit on mobile

  • Resolved johannes999

    (@johannes999)


    4 years, 10 months ago

    Hallo,
    I read a lot of blogs about Picture property and srcset so now I have a little understanding about art direction.
    I see android uses on XXXHDPI 4X with 640 DPI.
    and I see also Iphone uses on 11 pro XDR display which is 6X.
    I read a blog about android screen sizes that advises to use 4 different images for each screen format in srcset and picture property. so 4 different resolution images.
    I read also a blog about Iphone screen sizes that advises to use only 2 different images x1 and x2 and that wil be enough because human eyes can not see the difference on high density screens.
    now my question is how many different size images (or how many k) to use to get the most benefit on all screens .
    with keeping attention on Iphone 11 pro which use 6X or 6K.
    do I have to use 4 images (4X) or 6 images (6x with keeping attention on Iphone 11 types) or only 2 size of image (2X) wil be enough.
    I want to have the most advanced benefit of my website and images on every mobile,tablet , desktop .
    so what do you advise me . what is the best solution using 2 or 4 size images or the best is using 6 size images?
    thanks

    • This topic was modified 4 years, 10 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    There is no one approach that is optimal for all situations. For mobiles you need to consider limited bandwidth. Both in size and speed of image data. If that were the only consideration, smaller is better. Balance against image quality and the fact no one wants to see postage stamp sized images (there are many exceptions of course). What is optimal also depends on the nature of your site and the target audience. A fine art photography site will have different needs and audience than a news site will.

    What is the full range of image sizes you would want to provide? I suggest defining sizes that fill that range with reasonable steps in between. If it’s a small range maybe two will be enough. If it’s a large range, maybe you’d need six. There is also reason to not have too many steps in size since they will all be created for every image uploaded and will take up proportionally more disk space.

    Thread Starter johannes999

    (@johannes999)

    thanks,
    for all information. I am trying to learn responsive webdesign I never thought that there was so many resolutions from 2k to 7k for mobile ,laptop,desktop ,tv or even more . so I was confused I made a monitor test for my website on 7k monitor all my website(which I am trying to design with bootstrap4) was disordered.
    the fonts was disordered too.
    I see like imagix and media cloud which solves all the problems for images. I see such service choose the right format for the right resolution if I am not wrong.
    plus compressing it and CDN service. only I have to pay some dollars each month.
    thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘how many size images to use in srcset +picture to get the most benefit on mobile’ is closed to new replies.