5 Tips to optimize images for web

When it comes to optimizing images for your website, it can be an easy step to skip. You’ve done all the work to brainstorm and create quality content, isn’t that enough? Spoiler—it’s not.

Why should you optimize images? 

When it comes to optimizing images for your website, it can be an easy step to skip. After all, you’ve done all the work to brainstorm and create quality content, isn’t that enough? Studies show that website conversion rates drop by an average of 4.42% with each additional second of load time between seconds 0-5. Do you know what unoptimized images do? You guessed it—they slow down your load time! Here are a few tips that will help you optimize your images, decrease load time, and help increase conversion.

Tip 1: Use the correct file format

Wait, there’s more than one? There are a lot, and you’ll encounter more than just these, but here are three you’ll come across frequently. Here’s how to know which one you should use:

• PNG for complex illustrations: In case you were wondering, PNG stands for Portable Network Graphics. These files should be used for things like illustrations. It doesn’t matter if the illustrations are digital or handmade. The big takeaway is DON’T use PNGs for photographs.
• JPEG for photos: Just in case you’re super curious, JPEG stands for Joint Photographic Experts Group. The rule is easy here—if the image comes from a camera, use JPEG.
• SVG for simple graphics: These would be logos or icons. Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Tip 2: Don’t worry about resolution

When it comes to images on your website, while size matters quality doesn’t. Most of your images should be between 40 and 70 on the JPEG quality scale. While 70 is a safe bet, for images with a lot of the same color or without intricate details you should probably start at 40 and work your way up until it looks ‘good enough.’ In our experience, the highest-quality images vs. mediocre-at-best images don’t even make a dent in conversion rates when controlling for file size. Reducing file size—and therefore load time—almost always has a positive impact!

An image’s resolution essentially refers to its size. Raster files can be either low- or high-resolution files. Low-resolution raster images are ordinarily used for display-only purposes, such as websites, emails, and apps. High-resolution images are usually used for files that necessitate physical printing. For vector files, the resolution is arbitrary. Unless a vector file is converted to a raster file, it will always maintain a level of perpetual scalability outside that of pixel-based raster images.

Computer monitors and other screens display imagery at a lower resolution than that of any physical reproduction. The most common resolution for imagery displayed on the screen is 72 DPI (dots per inch). It’s important to note that five inches at 72 DPI are not physically five inches. A five-inch image at 72 DPI will either print at about 1/4 scale or will print at five inches, but appear very pixelated. Whenever you see a blurry or pixelated image, this means an insufficient file size was created or used. The standard print resolution is 300 DPI. Therefore, if your file size is five inches at 300 DPI, that is a “real-life” five inches. There are some rare occasions that may necessitate a lower DPI than 72 or higher than 300. For those that require higher DPI, vector files will always suffice.

When it comes to resizing images, it’s important to avoid taking a large image and cramming it into a smaller box using CSS.

Tip 3: Create responsive images

We’ve mentioned this before, but while many people compress their images, it’s actually important to also resize your images for the web. Rather than having one image and scaling it based on screen size, we recommend generating multiple versions of the image and naming them differently based on which device you expect to use them. This may require some advanced implementation from your digital asset management system (DAM) or website. You don’t need anything bigger than 1920x1080, and most images should have a ‘longest side’ of ~1000 pixels at most. This will help the right devices load the right images. (Get 3 pics with 1x, 2x, and 4x names, and create a triptych with file names and resolutions).

This is a note for all the developers out there: When it comes to resizing images, it’s important to avoid taking a large image and cramming it into a smaller box using CSS. For example, say you have an image that is 1000 by 1000px. You proceed to cram the image into 20 thumbnails on a product list view. For simplicity’s sake, say those thumbnails are 100 by 100px. You now have 20 images on your page that are ten times as big as they need to be. This leads to slower load speed and fewer conversions.

We’d recommend using a DAM to upload various images in various ratios and then the CSS can grab the image it needs for the specific user’s browser and device size.

Tip 4: Use a DAM (Digital Asset Manager)

With DAMs, you can easily and quickly automate the process of creating and storing images of different sizes/resolutions for different devices/screen sizes. Don’t be scared off by the prospect of managing three times the images, DAMs have great metadata and tagging tools. The rewards are worth it. Thumbnails don’t need to have a high resolution; they’re tiny! Likewise, your mobile landing page image doesn’t need to be the same size as your desktop. In fact, it needs to be much smaller. Use the CSS not to jam in oversized images, but to take note of when the device/screen size has changed and use that data to choose the right image for that moment.

Tip 5: Use the right color types for screens

At its simplest: 

• RGB and HEX are for screens
• CMYK and PMS are for print

Now, we’re going to go into a lot more detail than you’ll ever need to know, but this will ensure you know what type of color you need to use when.

RGB is the acronym for “red, green, blue,” and is the model for how colors (light) are displayed on all screens/monitors: TVs, projectors, computer displays, smartphones, etc. These values start at black (zero) and as they increase, get brighter and closer to white.

HEX is onscreen for websites and is primarily used by developers. There are a lot of great tools out there that translate RGB to HEX. According to Neglia Design, “A HEX color is expressed as a six-digit combination of numbers and letters defined by its mix of red, green, and blue (RGB).”

The opposite is the case for CMYK, which starts at white (zero) and as increased, gets darker and closer to black. CMYK is the acronym for “cyan, magenta, yellow, and black (K).” These are the colors that comprise most of the printed materials you come in contact with on a daily basis, especially paper-based materials. A computer display can show a relatively accurate example of how CMYK will look printed, but remains, in actuality, RGB as long as it’s being viewed on a screen. An RGB image printed automatically converts to CMYK.

PMS is the acronym for Pantone Matching System, the standard in universal color-matching. Files composed of PMS colors should be used when a printer or manufacturer necessitates. This will be the case for occasions when printed material(s) will be printed using spot colors, as opposed to standard CMYK inks. Examples of this would be clothing graphics (plastisol inks and otherwise), vinyl stickers and decals, prints, or posters printed with silkscreen inks, etc. A PMS-colored image printed on a standard desktop printer will automatically convert to CMYK. Inkjet and/or laser printers are not capable of printing outside of a CMYK system.

Bonus Tip: Lazy load your content

You can’t lazy load cooking a steak. It’s either cooked or not. But while you are cooking the steak, you can deliver the salad.

Viewports on websites only display a portion of a whole site. An old rendering of websites is used to load and build the site in the browser and will only display the site once the whole site is loaded and built. That can create a poor customer experience as people wait for portions of the site to load before getting to see any of the pages.

Since people can only see what is in the website viewport, a way to increase load times is to only load or display what is immediately next in the viewport instead of the whole site.

Lazy load your stuff. If it’s not visible on the page, your site shouldn’t be blocked while it loads. Even if it is visible, getting people to interact with your site is more important than making sure they can see all the pictures. Use a JavaScript library that loads in a super low-resolution version of your images—or a blurred-out ‘average color’ placeholder—on initial page load, and then populate while your users read the site!

Need help?

If you’re looking for ways to improve your site speed, we’re here to help. We can audit your site to see if optimizing images or CSS can improve site speed. If that’s not the right solution, we’ll help identify other ways to improve your site speed.