The Complete Guide to Optimizing Images for the Web

Writing a blog post typically takes me 2-3 hours on a good day. (Props to anyone who can write one in an hour or less!) After spending all of that time writing it, I have no desire to add images to my post and even less desire to make sure they are properly optimized. You don’t want to skip images in blog posts, but the good news is, I’ve created a guide to help you optimize your images for the web.

A Picture Is Worth a Thousand Words

We humans are visual people and like pictures and images. Despite how amazing you think your blog post or sales page is, most people won’t take time to read all of the copy. Instead, readers will scan a webpage and look at images. Therefore, be sure to use an image or two in your blog posts and other pages with a lot of copy.

Having images in your blog posts also makes them easier to share on social media. I for one won’t bother to share a blog post on Pinterest if there isn’t an image in the post. Yes, you can add an image into your code for Pinterest, but why wouldn’t you just add the image to your post?

Saving Your Images

Now that I have convinced you to add images to your blog posts and pages, you need to make sure you are saving your images correctly. The smaller an image file is, the faster it will load. Aim to make your images 200kb or smaller.

Resizing your images – Before you upload images to your website, be sure to resize them. You can’t simply download a stock image and add it to a blog post — you need to resave it at the right resolution so it doesn’t bog your site down. I use Photoshop to resize images, but Canva for Work is another great option. (The free version of Canva does not allow you to change the image resolution, so I don’t recommend it for resizing images.) If you are looking for a free option, try Compressor.io or tinyPNG. Set the resolution of each image to 72 dpi. (Images from DSLRs are often 300 dpi.)

If you want to learn how to save images for retina display devices, check out this post from Elegant Themes.

Naming Images – Once you have your image resized and are ready to save the image, don’t just resave it as IMG_1234.jpg. Instead, your file name should relate back to the content of the image. If you are saving an image of a new bracelet for your online shop, the file name should describe the bracelet, rose-gold-bangle-jade-detail.jpg. Be sure to add a hyphen between each word.

Remember, Google cannot “see” your images, if can only read the image title. Therefore, a more descriptive file name will help your image show up in an image search. If someone searches for a rose gold bangle with jade detail, Google will know your image named rose-gold-bangle-jade-detail.jpg will appeal to the searcher.

File Types – You can save a web image as a .jpg, .png or .gif. I save most images as .jpgs because they create the smallest file. If your image includes text, save it as a .png for the best quality. You also want to save images with transparent backgrounds as .pngs. I only use .gif if I am creating a .gif because it only supports 256 colors.

Grab my my image workflow checklist here!

Alt Text

Now that you have resized your image, it is finally time to add it to your blog post. But the fun doesn’t stop here. When you place an image, you want to make sure you add alt text to each image.

Alt text is used if the image is not available to the reader. If your image does not load, the alt text will appear in the image’s place. It is also used by screen readers, a tool for blind or visually impaired individuals to browse the web.

If you use WordPress, you want to add your alt text when you insert an image into the post. Also make sure to title your image. Your image title can be different from your alt text. If you use Squarespace, follow these steps to add alt text to your images.

When adding alt text to images, describe your image in a sentence and include your page or post’s keyword. Be sure to write different alt text for each image you upload. My friend Meg put together an amazing guide to writing alt text, so be sure to check it out for even more tips and tricks.

Now that you have resized your image file, saved it correctly and added alt text, your image is optimized! It will load faster, which will make Google happy, and can be found by search engines. Hooray!

To make this process easier, I created an image workflow checklist that you can grab when you sign up below!

[wc_divider style=”solid” line=”single” margin_top=”” margin_bottom=””]