For most websites, images make up more than half of your pages’ weight, according to httparchive’s State of the Web report. Half of your pages’ weight.
That’s probably why when you run a page speed test you’re told to reduce your compress your images to improve your load time. You’re not alone.
Many of us want to shrink images (and perform some true SEO wizardry) to improve our page speed metrics. Not only could optimizing your images for web mean faster load time and less storage on your server, but it could help to improve your rankings and traffic flow. Talk about magic!
The key is, finding the balance between the lowest file size and acceptable image quality. We’re here to help you find that optimization sweet spot.
Choosing your Image File Type
Let’s keep this as simple as possible. There’s three basic image types for web, each with their own set of magical advantages:
- JPEG/JPG. // This popular file type can be saved in a wide range of qualities between low and high. It’s a great format choice for vibrant hero images, products and photos.
- PNG. // This is the go-to format for graphics with heavy textual elements or for logos, as it preserves the original image’s quality without causing pixelation when enlarged. Also, this is the only format for images with a transparent background. PNGs are crisp and clean, but at the cost of a larger file size than most JPEGs.
- GIF. // For a brief visual animation, these mini video clips are the way to go.
YOUR MAGIC SPELL: If you are uploading an everyday picture, use JPEG. If it’s an infographic, logo or an image where you need a transparent background, use PNG.
Choosing your Image Editor
Many marketing professionals trust Adobe Photoshop for image optimization, but since it’s a subscription-based software, some choose Gimp and Affinity Photo. Don’t overcomplicate it. Really any image editor will do!
Trudging through the Lingo Jungle
When it comes to image quality, there’s a lot of acronyms and confusing technical terminology. Don’t get lost in the blur of letters; we’re here to explain how to best optimize your images for web.
CMYK Versus RGB
CMYK stands for cyan, magenta, yellow and key, the pigments used in ink cartridges to form a full spectrum of colors. In printed materials, this wide range of blending helps to form a quality image containing complex hues.
Computers, however, operate a little differently. RGB stands for red, green and blue, and is the ideal color model for viewing on screens. Each image pixel on your computer or phone screen is a light source, and projects a combination of the primary colors to form a final beam of light. Long story short, RGB should always be your choice for online image optimization.
8-Bit Versus 16-Bit
Once you pick the RGB color mode, it’s going to ask you what “bit” you want, which might tick you off— just a bit (so punny).
Simply put, 8-bit is your standard, containing 16.8 million combinations of colors. That’s a crazy amount of color data, and you don’t even need that much. As the bits increase from 16 to 32, you start getting trillions of color choices, and your file size increases too.
Sixteen-bit is used often for complex editing, where you need access to a wide gradient of colors for refined details. For standard web display, choose 8-bit all the way.
PPI Versus DPI
DPI stands for dots per inch— another printer term. Your printer forms an image on a page by stamping a bunch of little dots into a pixel space. The more color in one pixel space, the more detail. Simply put, the higher the DPI, the better tonality and the smoother the color blending.
PPI, or pixels per inch, is the number of pixels per inch on your screen. Spoiler alert: these pixels are fixed in size, depending on your device. Therefore, it’s not something you can change on your end while editing an image. A 72 PPI image on your computer will look the exact same as one with 2000 PPI, because your device has a set PPI within the screen.
If your image will be strictly viewed digitally, PPI doesn’t really matter— and neither does DPI. Your image file dimensions in pixels will determine your file size and quality, not your PPI (yeah, confusing). Luckily, you don’t need to get into the weeds. Given the option, stick to 72 PPI for web-displayed imagery.
Attaching an fancy coupon or offer which you are specifically asking your viewers to print? This is a completely different conversation, where you should care about DPI and PPI. Check out 99designs article for more details.
YOUR MAGIC SPELL: When it comes to optimizing images for web, choose RGB, 8-bit and 72 PPI.
Selecting the Right Image Dimensions
The short answer is, there’s no “correct” image size. We’re not going to offer some magic dimension because every webpage and use case for the visual will be different.
Recommended for You
Webcast, December 18th: Optimizing Customer Engagement with User Intent
Review these image dimension best practices to optimize your images for web:
- Look at your web platform’s image optimization recommendations and how they save your files. // Squarespace, for instance, recommends uploading hero images that are between 1500 and 2500 pixels wide. Some platforms will also automatically save your images at various dimensions. WordPress, makes three copies of any uploaded image, or more, depending on your theme. Do you homework for your specific platform.
- Size your images only as large as your content width. // If your area for content on the page is 700 pixels wide, why make your image wider than that? Anything bigger will automatically be shrunk to fit those dimensions anyways.
- Don’t forget aspect ratio. // Your television, for example, displays in a 16:9 ratio: 16 (1920 pixels, in HD) across and 9 high (1080). If you change an images width and don’t adjust its height proportionately, you’ll blur or distort the image.
- Always save in pixels, not inches. // If you resize your image in Photoshop, always choose “pixels.” That’s how a screen is designed to process your image. Inches should be saved for print materials, as they store more detailed data and have larger file sizes.
- Smaller dimensions usually correlate with small file sizes. // Usually, reducing the aspect ratio of your image will, in turn, reduce the file size. Smaller file size means quicker load time and better page speed brownie points from Google.
YOUR MAGIC SPELL: Check your web platform for image recommendations. Then, figure out what your content width is and shrink your image accordingly, while maintaining a proportionate aspect ratio.
Compressing your Images for Web
Image compression involves minimizing the bytes in a graphic file, in some instances by removing the number of colors present in the image (transform encoding) or by dropping or averaging some color information while maintaining luma brightness information (chroma subsampling).
These all can get very confusing, but we’re not going to overload you (but curious souls can learn more here). Here’s some more good-to-knows around image compression.
Lossy Versus Lossless Compression
Have you ever seen an image that looks like tiny, square, pixelated blocks? That’s lossy compression at work, the degrader. Lossy compression takes away or “throws out” certain redundant pixels in order to reduce the file size. In the case of the pixelated picture, too many slight variations of colors were tossed out and no longer blend naturally. When compressed too greatly, this degrader can manipulate visual quality of your picture.
Lossless compression, by contrast, will reduce your image size without altering or deleting any of the original file’s data. If you have to adjust the image again after the compression, all your pixels and colors will remain. ZIP files, for example, use lossless compression.
So what’s better, lossy or lossless? Typically lossy compression works best for large background JPEG images, producing a very small file size that loads very quickly. But it’s important to know that lossy compression is irreversible. Once the file data is ditched, it’s gone, meaning everytime the image is altered moving forward— resized or compressed in email, etc.— the quality keeps getting poorer and poorer. That’s why many turn to lossless compression, as you can still compress and reduce the file and preserve near-similar quality and appearance.
“Save for Web” Compression
Editors like Photoshop will often offer a “Save for Web” export option, which does some of the file compression work for you, stripping unimportant metadata and shrinking your image file size. If using Photoshop, do it!
YOUR MAGIC SPELL: Choose lossless whenever possible and “Save for Web.”
Naming your Images
Absolutely, positively, don’t miss the opportunity to weave your keywords into your image names for improved SEO. Use hyphens or underscores to separate the words in the file name and avoid question marks, percent signs and ampersands, which don’t load correctly and can cause unexpected behavior in image galleries.
Not sure what keywords to use? We have a whole article on how to find the right Google keywords for your business.
Improve your Overall SEO
You’re here reading about optimizing your images for web because you want to improve your SEO, right? As you know, image optimization isn’t the only way to increase your page speed and boost your odds of ranking on Google (and be an SEO wizard).
In fact, we have a whole booklet that talks nothing but ranking strategy: our Googe Ranking Casserole Cookbook. Whip up on irresistible site that no search engine will be able to resist serving up. Download it, today.
