How to Optimize Your Images for Web

Share this:

If you work with content that lives on the Internet, you’ve probably given a significant amount of thought to the overall look and feel of what you’re creating. Text and visuals go hand-in-hand, and if one part doesn’t work, the whole project can look a little off.

Ultimately, everything needs to be optimized for web — from your site template to the photos that people view. That’s why we put together some of the most important tips and tricks on how to optimize images for the web, whether it’s your website or a client’s blog. Start learning about image optimization for web content below!

1. File Sizes

In an age when attention spans are not what they used to be and distraction is practically the Internet’s second name, load times should be the most important thing on your mind when crafting anything for web. Most of what affects page load times is rooted in issues with images — especially the size of the images.

A simple way to watch out for oversized images is to make sure that when you’re editing photos, you opt to “Save for Web.” You can do this with a quick keyboard shortcut — command + option + shift + s — in Photoshop, which will open a new window with a few different web optimization options. You can format your file (which we’ll get to below), adjust the quality of the image (in the upper right-hand corner of the dialogue), and set the file size (in the lower right-hand corner).

Consider this anecdote when sizing your images: As you shop for clothes, you make sure not to buy anything that’s too snug, but you also don’t want clothes that are too loose. You can always buy bigger, but you run the risk of having your pants fall down, or a shirt that looks like a dress. The same can be said for web sizing. Of course you could upload massive, hi-res images, but you risk having slow page load times and a frustrating experience for users. Go too far in the other direction, however, and you might end up with a too-small image that’s stretched out and blurry.

Knowing the parameters of your web page is key, so that you can always adjust your image to the correct size. For example, if your site has columns that are 800 pixels wide, you’ll want to adjust your images to make sure they’re also 800 pixels wide. The height of the image won’t matter as much, unless you’re going for images with a specific shape. It’s also important to monitor the number of kilobytes in your image, which you can view in the left-hand corner of your “Save for Web” window. A good rule of thumb is that a small kilobyte number means quicker load times. But you still need to adjust accordingly, and you shouldn’t have to sacrifice photo quality for load times. Less than 300K is usually safe.

2. Formatting Your Image Files

Images come in all shapes and sizes, and it’s important to make sure they’re appropriately labeled for their final destination. There are three standard image file types that you’ll most likely be working with: JPEG, PNG, and GIF. Each file type has unique qualities that make it appropriate for specific scenarios: JPEG is most suitable for digital photography compression, while GIF is typically used for low-res film clips, animated imagery, and logos with a limited color palette. PNGs are commonly used on the Internet, as they support palette-based images, grayscale, and RGB images.

To (over)simplify: Use JPEG for photos, PNG for vectors, and GIF for moving images. You can choose the optimal format for your images when you save in any photo-editing software. Note that certain file types may work better with the platform you’re working on, so keep that in mind when formatting your image.

3. Don’t Take Thumbnails for Granted

Blueberries Up Close by bozulek

Human Eye, Macro by Anemone

Fresh Honey in Comb by StudioSmart

Black and White Zebras by Chantal de Bruijne

Just because thumbnails look small doesn’t mean they’ll be good for your page load times. As mentioned before, the size of your image carries a lot of weight (literally) and can have a significant impact on your site speed. Uploading thumbnails at the smallest possible size — taking into account responsive and retina views — is your best bet. If you don’t, you’ve got a handful of images that look really small, but whose file sizes are actually really big.

4. Naming Your Images

Every image that goes on your site deserves a name. But it also needs one if you want your page to rank well on search engines, which crawl your site not just for text, but also for keywords on images.

Use the same school of thought when naming your own images, choosing detailed terms and separating each keyword with a hyphen, so that an image of green rolling hills might read, “green-rolling-hills-italy.jpg.”

Want to find some images to start optimizing for web? Our 2015 Creative Trends report has more than a dozen curated collections to explore, including a few dedicated to what’s popular on social media and the Internet. Take a look »