• Resolved roseba

    (@roseba)


    The site I am building needs to serve up large images because it is a portfolio site showcases someones art.

    The images are responsive in terms of viewport, but do they serve up actual smaller images?

    If not, do you have a recommended plugin that is easy to configure?

    I’m using a child of “Untitled” as a theme.

    https://www.ads-software.com/plugins/jetpack/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    The images are responsive in terms of viewport, but do they serve up actual smaller images?

    I would recommend that you enable the Photon module in Jetpack:
    https://jetpack.me/support/photon/

    It will resize and cache images on the fly, depending on the viewport.

    I hope this helps.

    Thread Starter roseba

    (@roseba)

    I’m not sure what you mean. It already resizes on the fly. But that is only a visual aid. I’m concerned about the size of the large file, targeted for a desktop, downloading on a phone. I can compress the file-size down to 150K, but on a phone, it would ideally have a lot smaller footprint other than 150k.

    Does that make my question clearer?

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    Let’s use an example: I checked file sizes for 3 different images:
    https://cloudup.com/cdBgDKwK1lT

    1. The first image is the original image I uploaded to my blog
    2. The second image is the same image, cached and served via Photon
    3. The third image is a resized version of that Photon image.

    As you can see, the resized image is not just resized, it’s also compressed, and consequently much smaller than the original image. As a result, the Photon-resized images served to your mobile readers will be smaller than the original images you will upload to your site.

    I hope this clarifies things a bit.

    Thread Starter roseba

    (@roseba)

    It’s hard for me to see the images on my browser but I understand the concept.

    I’ve gotten a significant boost by doing a few things.
    1) I resampled all the images to 1000px rather than 1200px.
    2) I resampled selecting progressive jpg rather than jpg. (huge difference in size.)
    3) I made a choice that the quality isn’t compromised much by sampling the files to lower quality. I saved as many 1000kb in some files.
    4) Added Photon
    5) Added W3Caching
    5) Added Advanced Lazy Loading. (This site is more image heavy then anything I have ever worked with. It’s a good idea to only load images when they become visible within the viewport.)

    The carousel takes a bit to load on mobile phone still, but I think it’s acceptable considering each carousel is loading all the images at once, or so it seems.

    Thanks for your help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Serving Mobile images in Jetpack carousel’ is closed to new replies.