How to Save Images for Web: Avoid Slow Load Times

Share This
Shellie Argeanton
Share

One of the worst things you can do is make someone wait too long for your page to load and then POOF! you’ve lost them.

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.

What is page weight?

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

How do I know if my images are optimized?

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.

The average web page has grown 151% in just 3 years.

“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 – Everything Seems Fine

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.

Consider your Mobile Users!

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

Pingdom has a great tool to measure your site’s load time, and you can see all the individual elements that are causing your page weight to be higher.

What are web optimized images?

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.

  • Resolution – Most devices are only set up to display 72 pixels per inch, so make sure your image dimensions match that. Anything higher than 72 is a waste of space and your user’s bandwidth.
  • sRGB – sRGB is the world’s default color space and should always be used for web images in order to ensure the best color quality and consistency. Avoid CMYK altogether since that mode is only used for printed materials.
  • Reduced File Size/Optimization – Browsers don’t need the excess information stored in your images from the camera (ie. lens, model, etc), so make sure to remove the bloat!

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.

Saving Images for Web in Photoshop

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:

feature-saveforweb

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.

What if I don’t have Photoshop?

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.

Share This

What are your thoughts?

By signing up you are agreeing to our Privacy Policy.

Comments (2)
  • Very informative, thanks!

  • Shellie, I’ve always assumed wordpress takes care of the size optimization for me. Is that not a safe assumption? And do you know of a plug-in to crunch photos after the fact?

 
Join over 16,000 people who receive bi-weekly web marketing tips.

By signing up you are agreeing to our Privacy Policy.

Share This