How to Title & Size Images for SEO

Titling & Sizing Images for SEOIn last month’s SEO Quick Tip we talked about the importance of page titles and descriptions. If you missed it, you can check it out here. In today’s post, we’ll be talking about the correct way to save and title your images to best optimize them for SEO.


Titling Images for SEO

 

Use the right file names

To help your images rank well, it’s important to save images using file names Google can understand. Google can’t actually “see” your images unless you are saving them using file names that accurately describe what each image is about. For example, if you were saving this cute pug dog image for your blog…

pug-dog-in-a-blanket…instead of saving it with a random file name like DSC9324.jpg, you would instead save it with a file name that accurately describes the image like pug-dog-in-blanket.jpg. Be sure to remember the keyword you are trying to rank for and use that at the beginning of the file name (see last month’s post to learn about the importance of this). In this example, the main keyword is “pug dog,” so it was placed at the beginning of the file name to help this image have a better chance of pulling up when someone enters “pug dog” into a search engine.
 

Add Alt Text to Images

Adding Alt text to each of your images is important so there will be descriptive text visible if, for whatever reason, an image can’t be displayed (maybe a reader has turned off images in their browser for example).

How to add alt text to images in Blogger:

 
First upload an image to a post or page.

adding-alt-text-to-images-in-blogger-example
Then click the HTML button to switch to the HTML view. Copy this code:

alt="description of image"

…and paste it into the html just before the final /> in the code. Replace “description of image” with a description of your image.

adding-alt-text-to-images-in-blogger-example-2

Do this for each image in your post. To see if it is working correctly, after the post is published, temporarily disable your browsers images and you will see your alt descriptions instead of your images.

How to add alt text to images in WordPress:

 
WordPress makes adding alt text to images super easy using the Yoast SEO plugin. Start by uploading an image to a post or a page by clicking the Add Media button.

adding-alt-text-to-images-in-wordpress-example
After uploading your image to the media file, on the right side of the screen, you’ll see a gray area that will allow you to change or add info for the photo. In the Alt Text section is where you can add the description for your photo. Then click Insert Into Post to add the photo to your post. If you don’t add any alt text to your image, WordPress will automatically use the image title as your default alt text.

adding-alt-text-to-images-in-wordpress-example-2

Do this for each image in your post or page. Again, to see if it is working correctly, temporarily disable your browsers images and your photos will be replaced by your alt descriptions.


Sizing & Saving Images for SEO

 

Size Images Correctly

Image load time can have a huge impact on your site’s overall speed and SEO. Re-sizing images before uploading them to your site helps your site load quickly and will give your SEO a boost. Even if you are displaying a large image (say a 4000 x 2000 pixel image) at a smaller size within your post (at say 400 x 200 pixels), your site still has to load the entire image, which slows down your site and, in turn, negatively impacts your SEO. Re-sizing your images to the exact dimensions you want them to appear in your posts is a key step to optimizing your images for SEO.

Photoshop is the best tool for resizing images, but if you don’t have Photoshop, Pixlr is a free service you can use to do this. Here’s how to easily resize a photo using Pixlr:

1) Hop over to Pixlr, scroll down and click Launch Web App under the Pixlr Editor option.

2

2) Click Open Image from Computer and find the image you want to use from your computer.

pixlr example

3) Your image will appear and will be ready for editing. At the bottom of the image you’ll see the current image size. My sample image is currently 4000px wide, which is WAY too large to be uploaded to a blog. So I’m going to change it to the width of my post area, which is 800px wide. In the top navigation bar, click Image and then Image size…

pixlr example

4) Change the image width to the width of your post area (if you need to know your post area width, contact us and we can tell you). The height of the image will automatically adjust to keep the proper proportions. Click OK.

pixlr example

5) Now you just need to save the re-sized image, but before you do, read on to learn how to reduce the file size before saving.

Reduce the file size of images

 
The final step to saving your images is making sure your re-sized images are saved in the smallest file size possible, while still maintaining a good quality image.

How to reduce file size of images in Pixlr

 
To reduce the file size in Pixlr before saving, simply drag the quality bar down to 59 or lower. The lower you go, the more pixelated the image will become, so setting it right around 59 will allow for a nicely compressed file size while still maintaining a good quality image.
 
pixlr example

How to reduce file size of images in Photoshop

 
If you are using Photoshop, after re-sizing the image, go to File > Save for Web & Devices. Then set the Preset to PNG-24 as follows and then hit Save.

photoshop example

If you are on WordPress and have a lot of existing posts with images that are not SEO optimized, WP Smush is a great plugin that will “smush” the image sizes of your existing photos for you so you won’t have to take the time to manually fix the file sizes of each one.

If you have any questions about anything discussed here, please leave them in the comments and we’ll do our best to answer them.

Premade Blog Themes - Designer Blogs

Posted by: Erin


Comments

  1. Julie Spear says:

    This is really great info Erin, and I SO MUCH appreciate the photos to go along with your descriptions/instructions… SO helpful to see what to do on the screen as well. I am pinning this so I can refer back to it. And now, I need to go back and read last weeks’ tip, I somehow missed it. THANK YOU for your generous sharing of actual in-depth helpful information! Your posts are so thorough, YOU ROCK!

  2. Thanks so much for all your tutorials! I’m trying to get really serious about my blogging and how my site looks and your information is the best! Is there a best height size also? Thanks so much!

    • I would recommend keeping the height of your photos at or under 800px while still keeping it proportionate to the width of your photo and/or the post area width. Hope this helps!

  3. great tutorial, thank you so much, now I use Canva but I´ll try pixlr in the iPhone,

    ciao!

Speak Your Mind

*