Make home page load faster on small devices

[jimthoburn]

The image at the top of the home page is gigantic, and may be using a lot of bandwidth on small devices. We could improve this by using the new srcset and sizes attributes of the image element to serve smaller files.

Here’s the template for the home page…
https://github.com/foodoasisla/site/blob/master/_layouts/home.html

The first step will be to create different size images from the original files…https://github.com/foodoasisla/site/tree/master/assets/images/photos

And the second step will be to serve the appropriate image for the user’s device.

Step 1: Create the images

It might be nice to store the different size images in folders, named by their pixel width. For example…

/assets/images/photos/1000-wide/1.jpg
/assets/images/photos/1000-wide/2.jpg
/assets/images/photos/1000-wide/3.jpg

/assets/images/photos/2000-wide/1.jpg
/assets/images/photos/2000-wide/2.jpg
/assets/images/photos/2000-wide/3.jpg

We could do this manually with a tool like Photoshop, or generate the images automatically with ImageMagick or GraphicsMagick.

Here’s a Node package that supports both libraries…
https://www.npmjs.com/package/gm

And here’s a working example, using Gulp…
https://gist.github.com/jimthoburn/9799536fc0294c027e8b03063ae56061

Step 2: Serve the appropriate image

Browsers have built-in responsive image features…
https://cloudfour.com/thinks/responsive-images-101-definitions/

These work best with <img /> elements, but we’re presently using a CSS background-image.

Here are a few ways we can solve this…
A. Switch to an <img /> element. (I can help with this.)
B. Use the experimental CSS image-set feature.
C. Use CSS media queries.
D. Manually check for screen size and resolution, and choose an image using JavaScript.

Option A is generally the ideal choice, since it puts the user and their device in control of what image should be downloaded. Options B and C might be easier to implement. I think Option D could also be good choice in this case–since we’re already using JavaScript to choose an image and add it to the page.

These properties may help…

Device Width
https://developer.mozilla.org/en-US/docs/Web/API/Screen/width

Device Pixel Ratio
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio