Image optimization and page speed are crucial for your Google ranking, it’s also essential for a great mobile user experience. Don’t be the last one to know how to “Save Images for Web” – you could be saving yourself and your customers a boatload of frustration and time with this simple trick.
In the video below, Aaron Nace shows you how to get the best quality image for the web when working in Photoshop.
Page weight is how large a webpage is in megabytes or gigabytes (size of all the combined files on the page); relevant to how long the page takes to load in browser.
“Photos and videos continue to be the bulkiest part of websites, making up almost three-fourths their size,”—CNN Money’s Hope King
They may look like the right size because they are fitting in your website template like the designer told you they would. If they look nice and crisp, what could be the problem?
Likely, you won’t know if your images are too big just by looking with the naked eye; you will have to investigate the file size and image settings. Your site is most likely built in a way that conforms to fit a certain set of dimensions.
It’s great to have a working site, but if it’s loading slowly it might as well be broken.
“This gets talked about a lot, but it bears repeating: images are one of the single greatest impediments to front-end performance. All too often, they’re either in the wrong format or they’re uncompressed or they’re not optimized to load progressively — or all of the above.” —Tammy Everts, Web Performance Evangelist
The typical scenario is that we check out our site, and everything seems to be working fine. If your page were loading very slowly, you would find reason for alarm. The problem with that typical scenario is that it’s not typical – most website owners only look at their sites on a desktop computer while using a dedicated high-powered wifi network.
The problem with that typical scenario is that it’s not typical – most website owners only look at their sites on a desktop computer while using a dedicated high-powered wifi network.
You have to consider mobile users who are in line for their take-out order, waiting for the bus, living in rural areas, or using the public library’s Internet connection.
Think about your mobile users first, since there are so many people using their mobile device to visit your website.
“Nearly two-thirds of Americans are now smartphone owners, and for many these devices are a key entry point to the online world.” —Pew Research Center
This simply means that your image settings should indicate that your image resolution is 72, set to sRGB color space, and has a reduced file size for faster page load.
Essentially we want to shrink file size without compromising the highest possible quality of your photo for the best user experience.
PRO TIP: You might have a similar page rank to a competitor, but if your page weight is larger, you will rank lower in Google results.
1. Open Photoshop, and your image file.
2. Check image size to make sure it is set to 72dpi and color settings are set to sRGB mode. Most likely your team will have given you height and width dimensions for particular parts of your site. Double check those dimensions are correct and are in pixel format.
3. From the file menu choose File > Export > Save for Web, and you will presented with the screen below:
In the top left corner of the Save for Web window are a series of tabs labeled Original, Optimized, 2-Up and 4-Up. By clicking these tabs, you can switch between a view of your original photo, your optimized photo (with the Save for Web settings applied to it), or a comparison of two or four versions of your photo. Choose “2-Up” to compare the original photo with the optimized one. You will now see side-by-side copies of your photo.
Choose “2-Up” to compare the original photo with the optimized one. You will now see side-by-side copies of your photo. The second photo is the optimized photo – check to see that its not pixelated.
4. Click on the second photo. Choose “JPEG High” from the Preset menu. You can now compare your optimized photo (which will eventually be your final file) with your original. Depending on the quality of the photo, you may be able to use “JPEG Medium,” but double check that you aren’t pixelating your photo.
In the example above, you can see I decreased the file size from 2.62M to 126K – this is a HUGE difference and will increase productivity/load time on your site tremendously.
Adobe has a great video tutorial here if you would like to watch how its done.
There are apps out there that you can download for FREE if you’d rather not spend the money for Photoshop. Good news is, Photoshop is available for a very affordable small ($9.99) monthly fee.
Some FREE options for software:
There are many other ways to optimize your website for quicker load time, but for the purposes of curating your own content and images, shrinking image sizes is a great place to start.
This should make a significant difference in your customers’ experience online, whether they are on mobile or desktop, in line for tacos, or at their desk viewing the full site with dedicated Internet.
We have the power to take control of website performance – lets work to make that happen.