Optimize Images on Your Website Like a Pro

Image Size Terms

Before we dig into this too much, I want to be sure I clarify a term. Most often, when people refer to the "size" of an image as it pertains to a website, they mean the file size that the image needs when downloaded and saved. Just so we don't get anyone confused, here are two terms for you to know right now.

• File Size: This is the actual size of the image in terms of download or storage on a hard drive. This is usually referred to in terms of megabytes or kilobytes, such as 1 MB or 200 KB. (When "size" is used below, this is what we'll be referring to.)
• Dimensions: This is the visual width and height of an image as you see it. This is usually referred to in terms of pixels (instead of inches or something). An example of this could be 600 x 400 pixels.

"As you see it," can be deceiving because the way a website is put together can easily make it look like your very large image is very small, when it really isn't.

Image Size

There are many different best practices when it comes to the optimal size of an image on your page and website, but it varies based on what you're trying to do. In general, you want the image file size to be as small as possible at all times to ensure the fastest page load times across all devices.

When it comes to those large images on the top of primary pages (called hero images), you'll want to keep the image lower than 500 KB if possible. For other normal images, you'll want to be closed to 50 KB or lower.

In either case, you'll want to refer to any documentation your website has and/or a designer on your team for some feedback. Like I said, it can vary.

Finding Images

If you have the budget, I'd always suggest that you hire a photographer to take original photographs every time. If you don't have the budget, then there are great stock photography websites out there that allow you to either buy or use royalty-free images.

It's very important that you don't choose images that literally look and feel like they're "stock." It will only hurt your brand and lower visitor engagement.

Here are a few of our favorites for images and videos:

• Unsplash (free)
• Pexels (free)
• iStockPhoto (paid)

Editing Images

If you feel comfortable enough, you can easily edit the images yourself. For years, the tools you'd use to do this were expensive or difficult to use. For example, most people couldn't figure out how to use Photoshop, despite it being one of the most popular image editing tools on the market.

These days, there are a variety of tools that you can either use online or install locally that allow you to edit images like a pro, regardless of the type of computer you're using. Some are free and many are low-cost.

Free

• Acorn (free & paid versions)
• Photoshop (free & paid versions)
• Gimp
• Paint.NET

Paid

• Lightroom
• Pixelmator

Online Tools

• PicMonkey (paid)
• Pixlr (free)
• Photoshop Express (free with registration)

Unless you already have a preference for a tool, I'd suggest using Pixlr. It's free, online, no software to install, no registration required, and super-easy to use.

Compressing Images

When it comes to compressing images, almost every image editing tool available has options to help you do this. You'll want to be careful to not compress images so much that they become pixelated and ugly. It's a fine line and you may find that sometimes you use a slightly lower or higher compression, depending on the tool you're using and the image itself.

Don't make the mistake of assuming that because you may be using a platform like Squarespace that it's doing the optimization for you. Almost none of these website builders do that. They instead save multiple versions of the same image with different dimensions and then try to make their best guess as to which one to use based on multiple factors when the page is requested.

If the image editing tool has an option to compress and optimize the file size of the image when saving, always choose to do this. Even if this is the case, you still may want to consider compressing the image again. An online tool that I use for this seems to eke out even more compression - even when compared to Adobe Photoshop.

• TinyJPG (compresses PNG as well)

Save as a JPG or PNG?

A lot of images you'll find are already saved as PNG files. When saved and even after compressed, PNG images tend to be larger than a JPG.

In general, you only want to save an image as a PNG if there are either (1) a very small number of colors, or (2) transparency is required.

If the image is a literal "image" (photo), the JPG (a.k.a., JPEG) file format will always compress to a smaller file size. In short, you almost always want to use JPG images for "images" and PNG for low colors, logos, etc.

What Do You Think?

Did we miss a question you had? Is there something we could go into more detail for you? Please leave a comment below and let us know.