Images: Make or Break
Images can make or break your website in many ways. If your images are too blurry or small, no one will buy your products. But, images that are too large will slow down your page load time, which also decreases your sales.
How Do I Know If My Images Are Too Large?
If you’ve already read chapter 1, you’ll know how to do a lighthouse report and identify if images are the biggest issue or not, but you can also check without running a lighthouse report.
If you have images larger than 300 kb, images are going to be slowing your website down.
Two Methods You Can Use To Optimize Your Images
Optimizing images might sound a little intimidating, but it’s pretty easy to get the hang of after you’ve done it a few times. Just follow these three steps: Resize, File Type, Compress.
Step 1: Resize
If you upload an image that’s 4,000 pixels wide, but only displays in a tiny box on your website that takes up half the width of the page, that image has an unnecessarily huge file size. resizing your images to what they actually display as is the first, and one of the most important steps in optimizing your images.
You can use Canva.com or Photoshop to easily resize your images.
If you aren’t sure what size your images should be, follow these general guidelines:
- Images that span the full width of your website: No more than 1600 pixels wide. File size no more than 400 KB.
- Images that span the width of your website: No more than 800 pixels wide. File size no more than 200 KB.
- Images that span 1/4th the width of your website: No more than 400 pixels wide. File size no more than 100 KB.
Occasionally, you might have a really detailed image that needs to break this rule and have a slightly higher file size so it doesn’t look blurry. That’s okay, just try to get the images to be as small as you can.
Step 2: File Type
Two images could have the same exact dimensions, but if one is a JPG and another is a PNG, they’ll have different file sizes.
If you are using Canva to resize: Make sure you turn the “Quality” up to 100% in the download settings so your images aren’t blurry. Canva’s compression isn’t great.
You might see some recommendations to use WebP instead of JPG. While WebP file types are significantly smaller, they don’t render on older browsers. Whether you choose to use WebP or JPG is up to you.
Step 3: Compress
Compressing your images is a great way to reduce the file size even further, and if you do it right, it won’t impact your image quality. You can use tinypng.com to compress your images before uploading them to your website.
Shrink.media can be used to compress and resize images in just one step.