WordPress.org

Forums

Jetpack by WordPress.com
[resolved] Serving Mobile images in Jetpack carousel (5 posts)

  1. roseba
    Member
    Posted 1 year ago #

    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.

    http://wordpress.org/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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:
    http://jetpack.me/support/photon/

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

    I hope this helps.

  3. roseba
    Member
    Posted 1 year ago #

    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?

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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.

  5. roseba
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Jetpack by WordPress.com
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic