We’ve all heard it time and time again, “A picture is worth a thousand words.” Images increase engagement and communicate a range of emotions and value to the viewer. With that in mind, it’s important that images on your site are high quality and look good on multiple screen sizes.
This is where it gets tricky.
That beautiful, high-quality image has the potential to bring your page to a grinding halt and turn away users if not handled carefully. The larger the image and the higher the pixel density, the larger the image file.
When a user accesses your web-page, all the images need to load in order to be viewable. This is fine if the user has a fast data connection and a quality device. If the user is on a slow network or has an older device, then that image can take minutes to load and will frustrate a user into no longer being a user of your site. (And considering web users now have an attention span shorter than a goldfish’s, waiting minutes and not seconds isn’t an option.)
Good news! It’s possible to have your cake and eat it too (big images that load fast) by doing a few things to make sure your image is web-ready. By following the below steps, you can give your users great content, without requiring a high level of patience.
With these three steps, you’ll be able to take a 10MB (10,240KB) photo and make it less than 500KB!
1. File Type
.jpg or .png? What’s the difference?
Without getting too technical, .jpg (or .jpeg) and .png are two separate file types that offer different features. To make it simple:
.jpg
- High Color Range
- No Transparency
.png
- Limited Color Range (except PNG-24)
- Transparency
TL;DR: .pngs should be used if you need a transparent background. For all other images, use .jpg
2. Sizing
You most likely have some high-quality images that are 5000px + and the largest dimensions. While this is great for print, it will kill your load time on the web. To avoid this, you need to determine the end dimensions of your image.
With any luck, your theme developer listed image dimensions. If this is the case, size and crop the image you have to fit those dimensions. If not, there are some general size rules you can adhere to make an image fit the space, maintain its quality, and reduce load time.
TL;DR: If your developer did’nt list the desired image size, then use your best judgement to size the image. If your image is larger than 2000px wide, it’s probably too big.
3. Compress
While this may seem complicated, there are some great tools out there. You can use your image editor to compress your photo, but for the best results, pass it through an image compressor.
With any of these compression tools, you should see a 70-80% file size reduction. For users with less-than-ideal internet speed, this means they wait 70-80% longer for the content to load.
Our Favorites:
- TinyPng
- io
- io
TL;DR: After your image is sized, pass it through an image compression tool.
That’s it!
If you followed these steps than you should have a gallery of images that are the perfect size for the job and will engage your users without testing their patience.
Pro-tip:
Double-check your newly-optimized images by entering your page through Google’s PageSpeed tester—this will score you on content load times.
