The Complete Guide to Image Optimization for the Web

Images are a vital part of the user experience, but they also account for the most data on your page. This means it can have a dramatic effect on your site’s loading time, which we know can impact conversion rates. Research shows 47% of users expect a website to load within two seconds or less, and 40% will abandon a website that takes three seconds or more to load. Each one second delay contributes to a 7% decrease in conversions.

How can you make sure your images are high enough quality to add to, rather than detract from the user experience? Focus on proper image optimization. In this case, we’re not talking about SEO – though that matters too, of course – but file formats and sizing.

 

Online Image File Types 101

There are two categories of file formats you can use for online images – raster and vector.

Raster images are images made of a rectangular grid of pixels. Raster formats include: .jpeg/.jpg, .gif, .tiff, and .png.

Vector images are generated using mathematics, from basic geometric shapes. Vector formats include: .svg, .cgm, .ai, .xps, and .vml.

From the optimization perspective, I’ll be focusing on raster images, but before I move on, it’s worth discussing a bit more about vector images.

Vector images can be scaled up or down to any size, without causing issues with image quality. They will display perfectly regardless of resolution. They are easy to edit and adjust. Since they are made of programmatic instructions, they have small file sizes. This is why vector graphics are the best choice for designing logos, backgrounds, and other graphic elements.

If they’re so perfect, why aren’t they the default choice for web images? Right now, it’s the lack of cross-browser support. Designers must create web assets with a vector-friendly file, and then export them into a range of sizes in non-vector formats on the web. Until all browsers adopt support for Scalable Vector Graphics (.svg) format – the native web format for vector graphics – designers will continue to face this issue.

We’ve been making progress on this front for years, so hopefully we’ll see deployment of vector graphics online becoming more widespread within the next couple of years. Until then – we have to make sure we’re optimizing our raster images as best as possible.

 

Image Compression Types

There are two types of image compression: lossy and lossless. Lossy image compression reduces the file size by permanently removing certain information from the file. When uncompressed, only a portion of the original information is still in the file – but the user may not notice the difference. This kind of compression isn’t limited to just image files, and is commonly used for video and sound.

Lossless compression on the other hand, all the original data in the file remains even after the file is uncompressed. The information is completely restored, so it is a common choice of compression for spreadsheets and other text documents when there is a concern about losing data.

When this translates to images on the web, we can compare two formats. JPEG/JPG is a lossy compression format, where the image creator can decide how much information to remove, making a trade off between image quality and file size. GIF is a lossless format that is widely used on the web.

 

Raster Images

Raster images are essentially the opposite of where we stand with vectors. We have universal browser acceptance, but we’re left with hefty optimization requirements. I’m opting to focus on three main file types that are the most common…  and I’ll throw in another we may see more of in the future.

 

GIF

Graphics Interchange Format was invented in 1987. It produces a small image size, but is limited to only 256 colors, which worked well back in the day. There is support for transparency, allowing images to flow seamlessly onto whatever background, which is why they were so popular in the early days of the web. They died out for a while, but thanks to their ability to support animation and the recent animated GIF craze making a comeback, we’re seeing a new rise in popularity. GIFs are best used for thumbnails and decorative images, because if they are used for large product images, the resulting file size will be large, with no good way to reduce it.

 

JPEG/JPG

JPEG is the current standard for online photos. It is an acronym for Joint Photographic Experts Group, the organization that developed the standard. It remains the universal standard for online photos, and is used on more than 70% of websites globally.

Use this format when you’re working with a large color range, but don’t need support for transparency. They are a good choice for ecommerce websites since they provide a high quality image at a relatively small file size.

 

PNG

Portable Network Graphics is a format invented as an alternative to GIFs due to possible licensing issues. This format provides lossless compression and support for transparency, while still providing a high quality image. This makes it a suitable alterative to both GIFs and JPEGs, depending on the usage.

PNG is available in three formats – 8 bit, 24-bit, and 32-bit. The PNG-8 format acts as a replacement for GIFs with a smaller file size, only supporting up to 256 colors. The 24 and 32-bit options provide alternatives to JPEGs, since they support all 16 million colors. However, you can end up with larger file sizes when using the 24 or 32-bit variants.

 

WebP

There hasn’t been much change in the online image format space until recently, with the introduction of Google’s WebP Project. It’s a proposed new image standard that aims to be able to reduce file sizes by as much as 25%, compared to PNGs. It’s natively supported in Chrome, but we’ll have to wait a while for universal adoption of the forma.

 

Tools for Image Optimization

One method for reducing your file size is using the “Save for Web” option in Adobe Photoshop. I like this option because you can explore various file types with just a few clicks – with a side by side comparison of the compressed version alongside the original. Plus, you’ll get an idea of how long the resulting file size will take to load online, with the ability to make adjustments for various connection speeds. The idea is that you should adjust the image to the lowest acceptable file size, without sacrificing too much in terms of image quality.

Photoshop used to be an expensive program prior to becoming a cloud-based membership option. Now, if you’re looking at just Photoshop, rather than accessing the entire Adobe Creative Cloud Suite, you can pay anywhere from $9.99/month to $29.99/month depending on whether you choose a student, individual, or business plan. But, if that’s still not within your budget, there are plenty of free alternatives to help you resize and optimize your images for use in online projects.

• PicMonkey: This online tool allows you to design, edit, touch up, and make collages with photos. The tool is free, though there is a premium version available with additional features.
• Pixlr: There are two versions of this online tool. The editor works much like Photoshop, allowing you to work in layers and move objects around. The express tool allows you to make quick adjustments and add personal touches like overlays and borders. Both these tools are available in your browser, but there are smartphone apps available so you can edit photos on the go.
• FotoFlexer: This is a fairly advanced online photo editor. You can add effects, text, shapes, and doodles on the photos. You can also retouch, and make advanced adjustments, all from within your browser, for free.
• PicResize: A bit more of a basic tool just for resizing, this is a quick and easy tool for reducing file size. There are browser plugins to help you speed up the process or integrate it into your workflow. You can batch multiple photos, too.
• TinyJPG/TinyPNG: One tool is designed for JPG images, while the other is for PNG images. You can’t do anything more than upload the image and download a smaller, more compressed version, but when you’re in a hurry and all you’re worried about is file size, these tools work wonderfully. You can batch multiple photos with these tools as well.

 

Optimizing Your Photos Can Make or Break Your Success Online

Ultimately, customer satisfaction is just one reason why you should make sure your photos are optimized. If your images are bloated, it may even cause your site ranking to decrease, since Google considers site loading time as one its ranking factors. On the surface, it may not seem like images can affect that much, but when you really think about it – they are an integral part of the customer experience on many levels.