How to optimize images

What is an optimized photo? It’s a photo that is the appropriate pixel size (width and height), an appropriate file size (the smaller, the better), and one that’s titled and tagged properly for your blog.

Why are optimized photos vital for your blog or website?

Photos that are uploaded as-is will weigh your site down, causing your site to be super-slow, which makes your visitors want to flip over their desk… or just leave your site.

And if they’re not tagged properly, two things will happen: first, they’ll try to share your beautiful picture on social media, but instead of an inspiring, colorful description, the caption will say IMG0003429837.

Ew.

They won’t want to pin that.

And second, Google won’t have any idea what your picture is about. So when someone searches “How to refinish your kitchen cabinets in 5 seconds,” they won’t see your picture, even though that’s exactly what your post teaches us how to do.

So here we go. First, we’ll size the images properly.

Here’s how to re-size your photo on a PC without Photoshop.

1. Make it an appropriate width and height for your blog.

Do you know how wide your blog is? (Most are between 500 and 900 pixels.) When I size images for my blogs + websites, I go a little bit wider than the width of my current setup, because you never know when you’ll re-design your site and your new blog will be wider than your old one, and all your old photos will look stupid (I’ve done it!). My suggestion: if you don’t know how wide your blog is, just go with 900 pixels.

Open the image in Microsoft Paint.

Click on the “Resize” button in the top menu, select “Pixels” and then type in 900 (or smaller) in the width field. Save your image as a .jpg.

If you have Photoshop, just use the “Export As” option, and re-size there. If you’re on a Mac, open your image with Preview, and select “Adjust Size” under “Tools.” Then save your new smaller image.

2. Make it an appropriate file size for your blog.

Now in your browser, go to Tiny JPG, drag and drop your image. When it’s finished, click the link that says “Download.”

You now have a much smaller image to upload to your blog or website.

With this example, the file size of the photo started at 722.7 kb, now it’s 168.5 kb.

See, the image still looks great, and it loads fast:

If you have Photoshop, again, you can adjust the file size in “Export As” by reducing the quality percentage. With images, you can often go down to 70% without noticing, but with text, you can’t go quite as low.

If you use WordPress, you can take care of these with one plugin called WP Smush. Here’s a video of how simple it is:

Now for the tags:

We’re talking about an images alt tag here. Alt tags actually do three things for you, as mentioned: they tell search engines (Google) what your photo is about, they make up the caption when your image is shared on social media, and they describe pictures to your visitors who are visually impaired.

So describe your photo with those things in mind when writing your alt tag.

In WordPress, when you upload your image, you’ll have the option to add the tag on the right.

It’s very similar for Blogger blogs. You can add them after they’ve been uploaded too by either editing the image, or editing the HTML (it’s not scary).

If going to the HTML to add your alt tag, it will look like this:

*Important note: DO NOT just jam all of your keywords in there, you will be punished by search engines for silly things like that. Write like a human being, and just tell your people what the image is about.