Image optimization is a quick and easy way to boost your online presence. In order to get the most out of each image you place on your website, they need to be properly optimized. Optimizing images improves overall user experience by helping speed up page load time.
If this sounds daunting, don’t worry – you don’t need to be an expert. All you need are the pointers in this blog post!
How to Save Images Properly
Regardless of origin, each image should be optimized.
Start with an image-editing program like Adobe Photoshop and open an image. Select “Save As” as opposed to “Save” and choose the appropriate file type. This ensures the concepts and steps listed below will be implemented at once and you’ll have a backup of the original image.
Image compression deals with how the data that makes up an image is saved. There are two kinds of compression: Lossless and Lossy.
Lossless compression means the image file is compressed without losing any data, keeping the image quality intact.
Lossless is preferred when high quality or high resolution, technical, intricate images are needed. Such images are used commonly with print materials.
Lossy is the preferred compression for web. There are circumstances where lossless is a better option, but if you don’t need animation, transparency, or high-resolution images, stick with lossy.
Lossy images are compressed more than lossless, causing a negative impact on image quality. Though this quality loss isn’t immediately noticeable, each time the image is saved it’ll lose more and more quality due to image data being compressed and deleted.
What is this image being used for? Print or web?
If it’s print, go with lossless. If it’s the web and it doesn’t need animation, transparency, or high resolution go with lossy.
The size of each image will vary depending on its intended use.
Social Media or Online Ads
If you’re using an image for social media or online ads, image size requirements will typically be outlined somewhere on the service provider’s website- likely in a Help or FAQ section.
Example: The minimum size for a Facebook cover photo is 820x312 pixels. Any photo that's going to be used as a cover photo needs to be at least that size; if it's too small, it'll stretch to those dimensions and be pixelated.
Blogs or Product Images
If you’re placing product images onto your website or using them in a blog post, image sizes will vary. However, if a photo has been uploaded directly from a camera, chances are that the image is well over 2000×2000 pixels. It’s also probably several megabytes. Neither are optimal for a website.
Combining optimal image size with an optimal image format creates smaller file sizes, and improves page load speed.
Do your users need to be able to access this image in its original size?
- On the rare occasion an image needs to be its original size, make it a thumbnail and link to the original image. Doing this means your website isn’t loading unnecessary assets.
- Otherwise, resize the image so that it’s still visible and clear, but aim to keep the entire file size under 100kb.
If you’re able to navigate a browser, you’ll probably recognize common file names like GIF, JPG and PNG.
GIF stands for Graphic Interchange Format. Never use a GIF unless your image is animated (and even then, consider more modern ways of animating via CSS and JS!).
This file type has no restrictions on image size, but can only be saved in 256 colors. While 256 may sound like a lot, it’s actually quite few when you consider capturing highlights, shadows, various saturations or different shades of colors. The result will be an extremely obvious quality loss.
Compression Type: Lossless (but cannot really be considered a lossless format, due to its limited colors)
PNG stands for Portable Network Graphics. PNG supports transparency, all color depths, palettes, and sizes. When saving as a PNG, the image will be compressed but unless you’ve studied that image pixel by pixel, no one will ever notice.
PNGs are great for ensuring quality stays intact, but for any type of photographic image, size goes through the roof because PNGs retain all information about the original image.
Limit your usage of PNG’s to anything requiring transparency, simple line drawings or icon-based graphics with minimal, or for situations where file size does not matter
Compression Type: Lossless
JPEG, used interchangeably with JPG, stands for Joint Photographic Experts Group. It’s widely known and used for situations where you need to save photographs down to a manageable, portable size and retain reasonable quality.
Keep in mind:
- JPGs aren’t that great at handling high contrast areas, and high contrast areas tend to develop some noticeable pixelation due to anti-aliasing.
- JPGs utilize lossy compression, therefore repeated saving will have a noticeable impact on image quality.
- JPGs don’t do well at printing when it comes to quality.
Compression Type: Lossy
What is the purpose of this image?
- Animation: GIF (but probably just don’t use it)
- Transparency, icon-based or technical drawing: PNG
- Photographs : JPG
Third-Party Compression Tools
On top of using the right format, and saving images at the right size, it is also smart to compress the images beyond what a typical photo-editing program can accomplish..
There are several handy image compression tools out there that can shave off some additional size from your image, without reducing the quality very much (if at all).
TinyPNG (tinypng.com) is one that we at TM use relatively often. It’s specifically for JPG and PNG, but since that encompasses our most commonly-used lossy format (JPG) and our most commonly-used lossless format (PNG), it’s no difference to us. TinyPNG does a great job at retaining the original quality while drastically reducing the filesize by stripping unnecessary color information and metadata from an image file. Very helpful, and a quick process for the amount of results you get!
If you’re using WordPress, EWWW Image Optimizer (ewww.io) is our go-to plugin. It will automate the compression process for any file that you upload to your WordPress install’s media library. Save the extra step, save the extra size.
File Name and Alt Text
Beyond the actual file itself, there are some additional specifics that you can define for an image that will help it shine in the eyes of Google, and assist with situations where images do not load or cannot be loaded.
Search engines don’t necessarily view images like humans do (though they keep getting smarter). Instead, the image is crawled and its relevance determined based on the image’s data. So, when it comes to search engine rankings, file names matter.
When a keyword is searched, resulting images typically have the queried word in the file name. So ensuring that your file names are accurate and (concisely) descriptive is very important. It also helps with organization and categorization within the website, so it’s a win-win.
Example: If you're placing an image on the About Us page of a website, name it something like aboutus-somethingaboutthisimage.jpg; not image83923-asd83.jpg.
Alt text is an attribute of the HTML <img> tag that helps define what the image is via a text description.
A good alt attribute will also be short and descriptive. For example, if the image is a puppy wearing a blue bow tie, that’s exactly what your alt text should read.
Alt text is important for accessibility because screen readers (browsers used by visually impaired individuals) will read the alt text to the user to describe what the picture is.
If you’re still not finding a good size range or just came to the realization that perhaps your entire website needs an image optimization overhaul, go ahead and reach out to us!