Images are an important part of any digital product and are valuable in breaking up text, conveying meaning and emotion, and relaying important information to your users. As with any content on your site, though, images should align with your content strategy and follow best practices.
Improper image sizing and placement often cause consternation for users, especially those on mobile devices. Large images stunt load times and eat up mobile data plans, which are both effective ways to quickly wear out your welcome with users. Additionally, Google’s search algorithm elevates pages with optimized images, so enforcing best practices is also good for your search engine optimization (SEO).
Google has some great guidelines for image optimization, if you’re up for a long read. Because we frequently field client questions about website images, we’ve distilled some lessons and best practices into some quick points.
Image types
There are 3 universally supported image formats – (Graphics Interchange Format) GIF, (Portable Network Graphics) PNG, and (Joint Photographic Experts Group) JPEG.
- GIFs are great for animation and have become exceptionally popular on social media platforms. They tend to be EXTREMELY large in file size, though, so it’s best to avoid this image type unless you absolutely need an animation on your webpage.
- PNGs are excellent for high-quality photography. These generally are the second-largest universally supported format because they support fine photo details and brilliant colors. Unless you absolutely need to support vivid, 256+ colors in an image, it’s best to avoid these for general web purposes, as well.
- JPEGs are the most common image format on the web. Most photo-editing software allows you to easily edit the quality of your JPEGs to make them as lightweight as needed for your web purposes. You can easily drop the number of colors and compress JPEGs to minimize file size.
There is a fourth file format that is not yet universally supported but is gaining popularity due to it being exceptionally lightweight and crisp: the Scalable Vector Graphic (SVG). Like any vector graphic, this file type is generally extremely small and can be scaled up as large as needed without losing any quality. It’s not suitable for photography but is the best option for info-graphics or illustrations.
Image sizes
When we talk about image sizes in this post, we’re specifically addressing file size (“image weight”), not image dimensions. The two are not totally independent of each other: Often, an image with large dimensions will also have a larger file size, but it’s certainly possible to have a full-page-width image that doesn’t exceed 250 KB. Your product’s common image dimensions should be documented during the creation of your Design System, which should then be shared to all content creators.
Pivoting back to image weight, there isn’t a hardline minimum or maximum file size because it really depends on your purpose and content goals.
For instance, if you’re creating a photo slideshow or gallery (an element designed specifically to showcase visuals) you’re going to want to include large file sizes because your audience is coming to that page to see high-detailed images with vivid color. But even with these elements, there are opportunities to lighten the image weight while still offering vibrant imagery (we’ll talk about those options in the tools section). Generally speaking, an image that’s used to accompany or break up text generally shouldn’t exceed 200-300 KB.
Be holistic when considering images for your website. You want to keep your total “page weight” – the total download size of the webpage – as light as possible. So while it’s great to get all of your individual images below 250 KB, if you then drop 7 of those images into one webpage, you’re still forcing your user to download nearly 2 MB of images!
Google’s PageSpeed Insights tool details how you can optimize images to make your page more lightweight and speed up load times.
PageSpeed Insights detail how your webpage performs on both mobile and desktop platforms and offers feedback on your page load speed and how well the page adheres to performance best practices. It also provides suggestions for how to make your page more user-friendly, including options for optimizing your images (even how much you can reduce each image in both MB and percentage!).
Image Compression Tools
CMS options
Plenty of content management systems have built-in image-compression mechanisms or allow organizations to add image-compression plug-ins. These tools automatically optimize your image weight to provide a quality user experience without sacrificing image quality. Some popular CMS plug-ins/modules are:
For Wordpress
For Drupal
For Joomla
Photo-editing software
If you want more control over your image compression, many photo editing software products provide easy methods to optimize your images without experimenting with dimensions or resolution. Adobe Photoshop has a “Save for Web” option (screenshot below) that allows you to reduce your file’s “Quality” by simply toggling a switch. In the background, the software reduces the number of colors and compresses the image to maintain dimensions and quality while reducing file size.
In the example below, at 100% quality the image was nearly 1 MB. By dropping it to the recommended 65% quality, we were able to reduce the file size to a more suitable 260 KB.
Photoshop also allows you to set up Quick Export preferences so you can quickly and easily export images that are lighter and optimized for the web.
Other free-to-use, online tools include:
Many of these tools let you batch optimize more than a dozen files a time, which lightens your images and your workload.
Governance and Workflow
A website redesign is the perfect opportunity to bake image best practices into your governance and workflow. You should explore enforcement of these file-size limitations by multiple means.
When developing a web image repository, consider mandating that any image entering the file system be optimized for the web with a file size of less than 300 KB.
Many CMS systems also have options to restrict files to a certain size. Consider restricting file uploads to a maximum of 300 KB for certain content types, while allowing larger files in others when appropriate (photo slideshows/galleries, etc.).
You can also make image optimization part of your workflow, either when an image is submitted to accompany text content or during the CMS entry process. A great approach is to include a task in the workflow where all images are checked for web optimization best practices during the content publishing step.
And, like we mentioned earlier, document all your rules in your Design System. The system should detail image dimension options, resolution suggestions and file-size best practices. You will be able to use this document as a guide and governance tool to ensure all content creators are on the same page regarding images.
Illustrations, quality photography, helpful infographics – all of these are vital to your user experience. They educate and help users achieve their tasks, break up large swaths of text, and help guide your audience along their journey. But if your images aren’t optimized properly you’ll frustrate your users and undercut your business goals. Use these tips and tools to deliver a positive user experience.
Required reading
Don’t forget to make your images accessible with descriptive alt-text. Learn how to prioritize accessibility very digital project. Interested in more content strategy best practices? Read more on our blog.