Support » Plugin: Jetpack by WordPress.com » Image sizes for HiDPi/Retina displays?

  • Resolved MattV

    (@mattv)


    I’m trying to make my site HiDPi/Retina ready, but I’m still a bit confused about what’s the best way to do this.

    I use the wonderful Jetpack Image CDN (Photon) to host and deliver my images to my visitors.

    I’ve read Jeremy’s comment about how Jetpack uses the zoom-function to serve the best image version per device:

    In practice, that means that you don’t need to use any additional plugin to handle Retina and HiDPi devices when you use Photon and Jetpack.

    What does this mean practically?

    Let’s say my “standard” image size is 1000x500px (before HiDPi/Retina-screens were a thing).

    1. Would I now need to upload images double that size (2000×1000) to make sure that they look perfect on HiDPi/Retina screens?
    2. This will also increase the file size. Will Photon serve the smaller version (1000x500px) to non-HiDPi/Retina screens?

    Thank you!

    • This topic was modified 1 year, 10 months ago by  MattV.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Dat Hoang

    (@htdat)

    Hi @mattv,

    I am asking Jeremy to answer this issue for you.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic πŸš€

    1. Would I now need to upload images double that size (2000Γ—1000) to make sure that they look perfect on HiDPi/Retina screens?

    That would depend on the screen. Different smartphones, laptops, monitors have different pixel ratios. To give you an example, the iPhone 7 has a pixel ratio of 2, while the iPhone X has a pixel ratio of 3. The Samsung Galaxy S8 has a pixel ratio of 4.

    In short, Photon is going to try delivering an image that matches the device best, so the larger image you upload, the better, so you can deliver crisp images on as many devices as possible.

    In practice though, you can’t please everyone πŸ™‚

    There are other things you need to take into account:

    • Your camera may not be able to save huge images.
    • Even if you have a larger image that can be served on a specific device, is it really that important? How many readers will benefit if you start uploading 4,000px images just to serve crisp images to visitors using a Samsung Galaxy S8? Do those readers see a difference when served a better quality image?
      That’s something you have to decide yourself, based on what you know about your readers and what your site is about. For example a wedding photographer may want to display super clean images on their site all the time, while I, simple blogger, am okay with the bad images I take from my old smartphone because my readers are not there to buy my images πŸ™‚
    • Space may be limited on your server, so uploading huge images may not be an option.
    • If you use a simple shared hosting plan, your site may not have the resources to actually handle very large images; WordPress requires some resources to create multiple resized versions of all your images, and the bigger the original image, the more resources you will need to create those resized versions.
    • Photon itself also has limitations. If the original image can’t be loaded in less than 10 seconds, it won’t be able to download and cache the images. So if your server can’t serve very large images very quickly, that won’t work.

    And of course, in addition to those factors, you must also consider file size.

    2. This will also increase the file size. Will Photon serve the smaller version (1000x500px) to non-HiDPi/Retina screens?

    Photon will serve a smaller, resized and optimized version on smaller screens, yes. It will also optimize the original image it serves to HiDPi/Retina screens. That said, a larger Photon image will always have a bigger file size. You must consider this when uploading images to your site; if you are going to be creating image galleries, are you okay with having your visitors downloading multiple large images at once if they are using a HiDPi/Retina device?

    Ultimately, I think you have to find the right balance based on your business, your readers, and your site.

    I hope this clarifies things a bit!

    Thanks you for taking the time to explain this in such detail. It’s has definitely cleared things up!

    I’ll create a test page on my site with different image sizes and check that page on various devices to see what’s the best option.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image sizes for HiDPi/Retina displays?’ is closed to new replies.