Curating image content for the web is a delicate balancing act between image quality and file size.

Curating image content for the web is a delicate balancing act between image quality and file size. While the goal is to have crisp, high-resolution images, you don’t want to sacrifice page load time and website speed. Not only will the wrong choice negatively affect the user experience on your site, it can also have a negative effect on your organic SEO ranking. Here's how to make your images content-ready for the web.

File Type

The three most common file types used on websites are .JPG, .PNG, and .GIF

.JPG: JPG or JPEG file format is most commonly used for digital photography and is the standard image type most digital cameras use. It is also a commonly accepted format for image editing software. JPG files can also be saved as high quality, low quality, or anywhere in between. This allows you to adjust and save the image exactly how you want, balancing quality and file size.

.PNG: PNGs are another popular file format that has the additional benefit of including a transparent background. The downside is that file size is very large.

.GIF: .GIFs are a viable but antiquated option for image files. They also only offer a limited color palette. You’ll see the most frequent use of this file format for simple logos.

RGB vs. CMYK

The standard color mode for images on the web is RGB. RGB can be complicated,  but it’s rooted in how colors are ultimately created. RGB, or Red Green Blue color mode, uses the blending of light to create the rich palette of colors produced by computer screens, televisions and other electronic devices. CMYK, primarily used for print, creates color variations by overlaying Cyan, Magenta, Yellow, and Black inks.

In most graphic design programs, you'll be using RBG color mode any time you indicate you are creating an image for the web.

Best Practices for Saving Images

The benchmark for optimal website page load is approximately two seconds. You should prepare and save images so that you get the best results for website appearance and performance.

Step 1 - Save an Image to the Correct Dimensions

Try to save an image at a 100% ratio to how the image will be displayed. For instance, if a featured image at the top of your website page template is designed at 1440 x 960, then resize the original image to that size in an image editing software.

For most websites, ensure your file is no wider than the width of your webpage. Many website content management systems have built-in sizing to compensate for use of an image in different ways across the site and on desktop and mobile. Pay attention to the largest instance of that image file. An image is perfectly sized when it is the precise size of its largest display. Your CMS will likely take care of the rest, scaling down or adapting the image for smaller use cases.

Step 2 - Save an Image for the Web

It’s possible to reduce file size without significantly reducing the quality of your images. This can be done very easily through Adobe Photoshop’s ‘Save for Web’ function. Open your image in Photoshop and go to File > Export > Save for Web…. A window will appear which will allow you to choose your export quality. We encourage you to experiment, but have found in our own work that a quality of 60 works well. It drops the file size down to below a megabyte and there’s no noticeable difference in quality.

For most 'full page' web images, you want the image to be 80Kb-100Kb at most. If the image is only part of a page (e.g. half the width of a blog post), then 20Kb-30Kb is usually fine.

Step 3 - Compress Images for the Web

Compression tools for image files remove hidden data like additional color profiles and metadata (like geolocation of where the photograph was taken) that aren’t needed. Removing these hidden files will reduce file size without affecting image quality.

We’ve found ImageOptim easy to use.

Test Your Efforts

Google PageSpeed can help you test and troubleshoot image issues and more. This test will produce a list of images that can be optimized for improved webpage load. However, Google PageSpeed produces a comprehensive list of issues related to page speed performance, but findings aren't always executable. Results should be vetted by a developer.

Decide What Works For You

Image optimization is not an exact science. You should take some time to test images at different sizes to find out where you're noticing a visible sacrifice in quality. Once you find where your quality benchmark is for both appearance and website page speed, you can work with your team of content authors so that they carry through the best practices you have devised for your website.

Share on Twitter or Facebook Published April 18th 2018