This is a simple demo page for testing imgix images with shopify (blog post). For those looking to optimise I've added some notes about the size reduction vs original. You'll see some Liquid code noted - refer to the original blog post to grab the snippet needed.
Optimisations
21.5kb (in Chrome) vs 105kb original. The auto=format paramater is really great in Chrome since it converts the image to webp. Knocking 80kb from an image is great stuff.
37.5kb vs 105kb original
10.3kb (in Chrome) vs 105kb original. Simple example of resizing an original image.
30.2kb (in Chrome) vs 105kb original. The 876 pixels was just picked since it's a not a round number. You might have a theme that warrants a specific pixel width. No sense loading more pixels than needed.
Let's run the same code on a new source image. If you're curious, the image is of this amazing bike from State. Colour almost matches my brand so that's a small bonus. The original image is 301kb, 1280px x 853px.
35.6kb (in Chrome) vs 301kb original.
55.1kb vs 301kb original
22.5kb (in Chrome) vs 301kb original.
56.2kb (in Chrome) vs 301kb original.
Other parameters
The examples below are not for optimisation but do highlight some of the other things that Imgix can do.
Useful for when you might want to use an image over css properties.
-
-
I am not sure when you'd ever need to rotate an image in Shopify, but never say never right!?...
-
-