Image Optimization

We get a lot of questions about how to use images on the web. What size they should be? What dimensions? We have a few general recommendations and some tools to help you out!

General Recommendations

Ask yourself: Do I really need to use this image?

Many times, simple text is better. If the image doesn't help convey your message, you may not want it taking up space (and load time) on your page. You may think the image looks nice, but most people don't come to your site to admire your artistic aptitude. People come to your site to accomplish a task or quickly gather information. Get to the point.

If your image is necessary, make sure your dimensions aren't unnecessarily large. Don't use an image that is 2000 pixels wide when it will only occupy a space of 200 pixels on your page. Aim to make your image dimensions no larger than they have to be. You can find more information about recommended image sizes here. 

Do not use text in your images. Ever. If that text really is important, you're better served by search engines when you actually type that text on the page. Also, when that image scales down on a mobile device, that text becomes unreadable.

No image on your page should be heavier than 200kb. Even the largest images on your page can be kept around 200kb after using the optimization tools listed below.

Free Optimization Tools

When we optimize images, we're trying to make the image as small as possible, while sacrificing as little image quality as possible. There are three main tools we currently recommend. You may like one more than the other depending on whether or not you have to optimize many images (batch) or just a few.

ImageOptim (Mac)

If you need to optimize many images, we like ImageOptim if you're on a Mac OS. It allows for batch image optimization as we mentioned, and it's very easy to use. You just download the program, and then drag/drop images to optimize them. It's that simple. Here is a two-minute video tutorial for ImageOptim.

TinyPng (PC)

Options for the PC platform are plentiful, but we like TinyPng. There's no need to download software for this option, but there's also no way to adjust compression levels, so you're a bit limited. But it is drag/drop and very easy to use!

Squoosh

An impressive new option we like is called Squoosh. It comes from Google and it works on both Mac and PC. Just like TinyPng it is a browser application, so no download is necessary. Like all the other options on this page, it is free to use.

Although Squoosh doesn't allow you to optimize multiple images at once, it offers a real-time preview to see how your settings affect your image before committing. It also allows you to resize the image too!