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 and helps SEO by speeding up image load time.
Image optimization is a quick and easy way to boost your online presence! 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” to 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 loose 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/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/FAQ section).
Example: The ideal size for a Facebook cover photo is 828×315 pixels. Any photo that’s going to be used as a cover photo needs to be the appropriate size; if it’s too small, it’ll stretch to those dimensions and be pixelated.
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.
To ensure fast loading times, each file size should be 100kb or less. Combining optimal image size with an optimal image format creates smaller file sizes, and increases 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 BMP, JPG, GIF and PNG.
What are they and what do they do? Good question.
BMP stands for bitmap. This file extension is outdated and since its creation, other image formats have been developed that make BMPs obsolete. If you’re using this format, stop.
Bitmap is a universal image format. These images can be saved in a variety of color depths and palettes, in any size, without quality loss. The problem with bitmaps is that these file sizes are unnecessarily large.
Compression Type: Lossless
GIF stands for Graphic Interchange Format. Never use GIF, unless your image is animated. It’s #3 in the 10 commandments. “Thou shall not use GIF unless thee must use animation.”
This file type has no restrictions on image size, but can only be saved in 256 colors.
While 256 may sound like a lot of colors, it’s actually quite few when you consider capturing highlights, shadows, various saturations or different shades of colors. The result will be extremely obvious quality loss. Leave GIF alone.
Compression Type: Lossless
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.
PNG’s are a lot like BMPs in terms of quality and flexibility, but the file size will likely be well over 100kb. As long as top-notch quality or transparency isn’t a must, use a JPG instead.
Compression Type: Lossless
JPEG, used interchangeably with JPG, stands for Joint Photographic Experts Group. This file type should be your go-to since for most website purposes, a JPG is exactly what’s needed. The image quality loss is barely noticeable and utilizes palettes with thousands of colors while keeping file size small. Keep in mind:
- JPG isn’t great at handling high contrast areas, and high contrast areas tend to develop some noticeable pixelation.
- JPG’s are also compressed via lossy – therefore repeated saving will have a noticeable impact on image quality.
- JPG’s aren’t the best for logos or line drawings and could be fuzzy.
Compression Type: Lossy
What is the purpose of this image?
Transparency, logo, or technical drawing: PNG
Everything else: JPG
File Name and Alt Text
Search engines don’t view images like we do. 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. It’s how search engines recognize an image might be relevant. Just remember to keep the name short and descriptive.
Alt text is an additional piece of code that goes inside the image tags.
A good alt text 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 the image is purely for design like a logo, leaving an empty alt tag will notify the screen reader to skip the image, enhancing the user experience.
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!