How to Optimize Images

Think before uploading that 2MB image to your WordPress website! Have you seen images that slowly “drool” down the screen and take more than 15 seconds to load? Well, that happens because those images were not optimized. Images are a critical part of your website, but working with images for the web is a little complicated. For all the amazing bells and whistles WordPress and your page builder have to offer you, images are still challenging to get right before uploading. There are some basic things you need to do first to get your images ready. Let’s review them. . .

What does it mean to optimize images?

Optimizing images is the process of decreasing their physical size in pixels, file size in weight, resolution in DPI, and saving your image as the right file type.

Physical size: This is how the image presents itself (the dimensions in px).
File size weight: This is how many bytes of data the file consumes in MB or KB.
Resolution: The number of pixels that exist within an image. The higher the resolution, the clearer the image. Measured in DPI.
File type: This refers to the format in which your file is saved. When we talk about images, we’re generally referring to JPG and PNG.

The most important reason to optimize your images is to give your visitors an amazing user experience. Large images slow down your web pages, which is frustrating for visitors. It may even cause them to leave your website.

Image optimization is another skillset in addition to editing in WordPress that you need to learn a little about before adding images to your site. WordPress is not the problem, it’s the nature of cameras, screens, file formats, and DPI which makes images tricky for the web.

Cameras are designed to create images for print. Printing images requires a much higher resolution than a computer or device’s screen does. If you just placed an image straight from your camera onto your web page, the image would exceed the width of the whole screen by at least twice. Even if you reduced the DPI of the image down to 72 (the resolution of a typical desktop screen), the image would still be too large for your 800-pixel wide content area.

Physical Size

Bigger doesn’t always mean better. WordPress can handle any image size. Regardless of the dimensions of your uploaded images, the images will be scaled down to fit the main content block (ie: the area where blog posts are displayed). For example, let’s say you need a cropped image of 400×300 pixels, but you upload a 5000×3000 pixel image. WordPress will scale the image to display properly.

HOWEVER, this will not only increase your bandwidth, but it’ll make your photo and page load very slowly. The best approach is to take note of the image dimensions and size your images accordingly (learn how below). Get your image dimensions correct before you upload. That way you’ll be dealing with a smaller image from the start.

File Size Weight

Don’t upload that large image to WordPress! If you upload large images to your site, you’ll hurt your website’s performance, page load time, and your Google ranking. Larger images take longer to load and use more bandwidth. Large images are those with high file size weights, which are measured in KB, MB, or GB.

Since your visitors expect your web pages to load fast, it’s important that your images are small enough to ensure a speedy site. The general rule is to keep your images under 100KB. If this is not possible with your photo editor, further compress your images using an online lossey compression tool such as TinyPing or Image Compressor.

Resolution

DPI (dots per inch) is the measurement to look for to determine the resolution of an image. 72 DPI is the standard resolution output you’ll see on most images for web, while 300 DPI is what you’ll likely get when using an image for print.

Image File Type

You should save your images as a JPG or PNG when using them for web. Each file type has its own strengths and weaknesses. It is very important to keep these in mind when saving an image.

JPG: Uses lossey and lossless optimization. You can adjust the quality level for a good balance of quality and file size.
PNG: Produces higher quality images, but with a much larger file size weight. Use this file type when you need a transparent background for a logo or a small cropped-out image.

Steps to optimize your images for web, performance, and SEO.

1. Name Your Images for SEO

It’s really easy to upload hundreds of images and keep the default file names your camera gave them. But did you know search engines not only crawl the text on your web page, they also crawl your image file names. For image SEO, use relevant keywords to help your web page rank on search engines. Create descriptive, keyword-rich file names to optimize your images. Let’s use this image as an example.

You could use the generic name the camera assigned to this image (IMG_150.jpg). However, it would be much better for SEO to name the file something like Veterinary-Building-Gallery-Animal-Hospital-Minnetonka-Minnesota.jpg.

Think about how your customers or clients are searching for your product, services, or company. What naming patterns would they use when they search? In this example above, users may search terms such as:

Veterinary Hospital Minnesota
Minnesota Animal Hospital
Veterinary Building Gallery

Use your website analytics to see what keywords your customers are using. Determine the most common naming patterns they use and apply that formula to your image file naming process. If you’re not going to get that data-driven, just be sure to use relevant, helpful keywords when naming your images. What words would you use to find your image online? Include those words in your image file name.

Image alt attributes are also important for SEO and image optimization. Alt attributes are the text alternative to images when a browser can’t properly load them. Alt attributes add SEO value to your website. Adding appropriate alt attributes that include relevant keywords to the images on your website can help you rank better in search engines.

Sound like a lot of work? We actually took care of alt attributes for you by adding some custom code that will use your image files as the alt attributes. All you have to do is properly name your image file for the web!

2. Saving Images for the Web

Let’s take this puppy photo for example. Cute, right? The original image’s physical size was 5184×3888 px and the file size weight was 1.435 MB! This is two to three times bigger than this page! We need to reduce this image file size significantly. After optimizing the puppy image, it’s physical size is now 400×300 px and file size weight is under 20 KB! Yep, that’s a huge decrease in load speed!

We optimized this photo using Photoshop’s “Save for Web” command to reduce the resolution from print (300 DPI) to web (72 DPI). When using this command, we can change the image’s physical size and adjust the image to the lowest file size weight possible by adjusting the quality setting. When using this adjustment, we keep an eye out for image quality. The goal is to keep your images below 100 KB without loss of image quality. If it’s not possible to get your image below 100 KB due to image quality, try saving your image with a higher file size weight with good image quality. Use an online lossey compression tool (TinyPing or Image Compressor) to get rid of any hidden data taking up space to further optimize the image.

Crop Images (if needed)
Save for Web/Change Resolution to 72 DPI
Change physical image size in pixels
Adjust image quality to reduce file size weight: keep an eye on image quality
Further optimize image using a lossey compression tool (if your file size weight is still too high)