Confused about how to save images for the web, what size they should be, and how to optimize? I’ll take you through my process for targeting file size, show you how to test your site speed, give you tools to optimize and show you how I save images in Photoshop and Canva.
Image Examples
To see how quality might be affected, the images below feature three photos displaying at 300px wide. The second image is built at 1.5x the size of what it is being displayed and the last photo is 2x the size of what it is being displayed.
👇 Image below is built at 300px wide and is displaying at 300px wide.
Image below is built at 450px wide (1.5 x 300) and is displaying at 300px wide.
Image below is built at 600px wide (2 x 300) and is displaying at 300px wide.
Insights
As you look through the differences between the photos you will be able to notice that the first image which is being displayed at the size it was built is the most pixelated. The image quality gets better as you see the 1.5x and 2x versions of the image.
The takeaway is if you build the images slightly larger than they need to be displayed they will look much sharper, and look great on retina screens.
Resources mentioned in the video
💻 Programs & Services Mentioned in Video
Divi // Elegant Themes
WordPress
Adobe Photoshop
Canva
🏃♀️ SITE SPEED TESTING
PageSpeed Insights
Pingdom
GTmetrix
WebPageTest
🥇OPTIMIZATION PLUGINS
Looking for resources to create websites? Check out my recommendations below. Flywheel is a great web host for your WordPress site, and Divi is an excellent theme to build out your vision.
Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.
