How to Save Images for Web: Avoiding Page Weight & Image Size Bloat
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. They haven’t seen your gorgeous homepage or any of your very important calls-to-action, and they certainly haven’t purchased your product.
Not only is low page weight and image optimization 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 your customers a boatload of frustration and time with this simple trick.
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.
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. This way, no matter how large you upload your photos, they will not break your site. This way, your site can transform from desktop to tablet to mobile screen size without any errors.
“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.
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 (yes, 20% of American households still do not have Internet access). Try to think about your mobile users first, since there are so many people using their mobile device to visit your site.
PRO TIP: Unlike the West, Asia and Africa will experience explosive Internet growth during the next decade. The relative area sizes and population distributions mean that slow mobile connectivity is the only option for the foreseeable future. If your products are in the global marketplace, you should keep low page weight at the top of mind.
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 - The simple explanation is that screen resolution for most devices is only set up to display 72 pixels per inch, so you want to make sure your image dimensions match that type of output. 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. Photoshop does this by default, but in other programs you will need to specify the color assignment manually. Avoid CMYK altogether since that mode is only used for printed materials.
Reduced File Size/Optimization - Image files contain excess information that is useless on the web. JPEGs can have Exif metadata from the camera used (lens, model, etc.). PNGs contain info on colors and sometimes have embedded thumbnails. None of those things are used by the browser, so make sure to remove the bloat!
Essentially we want to optimize for the smallest possible file size (while preserving the highest possible quality of your photo) for the best user experience. Even a large hero photo that spans the full width of the desktop screen can be reduced in file size just by using the proper tools.
Saving Images for Web in Photoshop
1. Open Photoshop, and open the file you wish to save for the web.
2. Check the image size to make sure your image is set to 72dpi and color settings are set to RGB 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 > 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.
4. Click on the photo on the bottom to select it. Choose “JPEG High” from the Preset menu. You can now compare your optimized photo on the bottom (which will eventually be your final file) with your original on the top. 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, but I highly recommend you try it first to see how easy it is to use. You can also get a monthly subscription to Creative Cloud so that you don’t have to pay for a bulk software package. If you would like to only use Photoshop, it’s pretty affordable at a small monthly fee.
Other free options for software:
There are many other ways to optimize your website for quicker load time, including – but not limited to – using CSS Sprites, which groups various images or icons into one file. You could combine multiple JS files into one or CSS files into one. Doing both doubly ensures less bloat. Mobile optimization scripts can be run to resize images on the fly. The list is very long and technical, but for the purposes of curating your own content and images, optimizing images for the web 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 work viewing the full site with dedicated Internet.
We have the power to take control of website performance – lets work to make that happen.