Image compressor recommendations

storefront
Excursionist
18 0 13

Hello, 

I've been using tinyjpg.com as a free service to compress my photos for my Shopify website. I take RAW photos, process them on lightroom, export them in "small jpg" format to my desktop, then run them through tinyjpg.com. The files prior to compression clock at 872KB, and post compression 206KB, that is, about 76%. So:

1) Is this an adequate file size to guarantee adequate site speed? and if not:

2) What is the right size (given that I want my zoom option on photos to work) and can anyone recommend a free online photo compressor that is more efficient. 

Thank you much!

 

 

0 Likes
JoesIdeas
Shopify Expert
1188 104 287

That's the best free compressor in my opinion (tinypng.com / tinyjpg.com), I use it all the time.

As for file size, 206kb is pretty large but ok for a large banner image. There's not a "right size" for every image / site, but there are a couple things you can do:

1) Implement lazy loading for images "under the fold". This will make their file size 0 at time of load, and then as the user scrolls they'll load into view. Here's a guide to implement that: https://speedboostr.com/shopify-lazy-loading.

2) For images that can't be lazy loaded ("above the fold", or if you choose not to use lazy loading), you can use the image element attribute srcset to assign different sized images depending on the size of the device the user is viewing from.

You'll probably want to have a developer do this, but here's an example code snippet:

<img src="{{ 'banner.jpg' | asset_img_url: '1200x' }}" 
		 alt="text to describe the image, so it ranks in Google images"
		 sizes="auto" 
		 srcset="{{ 'banner.jpg' | asset_img_url: '320x' }} 320w,
						 {{ 'banner.jpg' | asset_img_url: '480x' }} 480w,
						 {{ 'banner.jpg' | asset_img_url: '600x' }} 600w,
						 {{ 'banner.jpg' | asset_img_url: '768x' }} 768w,
						 {{ 'banner.jpg' | asset_img_url: '980x' }} 980w,
						 {{ 'banner.jpg' | asset_img_url: '1200x' }} 1200w,
						 {{ 'banner.jpg' | asset_img_url: '1600x' }} 1600w" />

 

3) Test your images at different dimensions to see how they look to you. Quality and performance are a balance. My advice is to optimize as much as you can but don't sacrifice your quality.

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfill orders + email notifications).
Creator of Theme Scientist (A/B testing app) and Tip Jar (add a tip button to your store).
storefront
Excursionist
18 0 13

Clear and thorough guidelines, thank you so much JoesIdeas!