Images enhance user experience. They are often what makes your blog different from your competition and they keep people on your site longer. Not to mention that they help you find new readers by sharing them on social media. Unfortunately, images can also make your site slower and turn visitors away.
Today, I want to show you how to optimize images for your blog before and after you upload them to your site.
Why should you optimize images?
SEO! Images affect your page’s loading time. Small images will make your site load faster, while large images will slow down your site. Search engines look at your page’s loading time when they determine your search ranking. A slow loading site might also have a high bounce rate because a lot of people will not wait 10 seconds to see it.
Besides SEO, image optimization will improve user experience. This will make readers stay longer on your site and they will be more likely to share your images on social media.
Speaking of social media, adding alt and title attributes to your images will make them more likely to be found and repinned on Pinterest.
Choose the correct image size
A lot of bloggers download their images from their camera or a stock photo site and upload them to their blog without any change. This is easy and saves you a lot of time, but it will make your blog sluggish and you will eventually have to pay more for hosting space.
The width and height of your images depend on your blog’s design, but you have no reason to upload images that are larger than the area where they will be uploaded. If you want to add your photo in your sidebar, reduce the width before you upload it. Images that will be uploaded in your post should be the same size as your content area. All the images I use in my posts are 800px wide because that’s the size of my post area.
Images that are larger than the post area can be scaled down using HTML/CSS or you can change their size after you upload them by adjusting the display settings. This practice will make your browser scale your images, but the images that will be downloaded from your server by your readers will have the same file size as before they were scaled. Choosing the correct image size before you upload them will reduce their file size and increase page loading speed.
Why image format matters
Did you know that the format in which the image is saved has a huge impact on the size of the file, and as a result, on your site’s loading speed?
Here are the most popular image formats and how you should use them:
- JPEG: is the format in which your photographs are probably saved. JPEG is for images where a lot of colors are used, like photos. You should use it for all the photographs you want to add to your blog, even when you add text or color overlays, or for very busy patterns.
- PNG: is perfect for web images, but not any kind of images. You should use it for images that have very few colors and text, like the images I added to this post, for saving vector graphics or images that have a transparent background. There are 2 types of PNG images:
- PNG-8: is perfect for images with only a few colors and in some cases doesn’t sustain transparency
- PNG-24: sustains transparency and is good for images with many colors, like patterns and even photographs
- GIF: is used for animations and line art. You can often find icons saved in GIF because they have a very small file size.
If you are using Photoshop, or other Adobe products, you have the option to save your images for web. This option also helps you determine which is the best format for your blog images. Let’s have a look at the file size of my featured image:
- JPEG: 38.29 KB
- PNG-8: 16.5 KB
- PNG-24: 31.65 KB
- GIF: 19.7 KB
As you can see, this image is very small because I only used three colors. This is also why PNG-8 and GIF are the best formats.
How to compress images
Photos taken with my DSLR are very large, almost 3000px wide and are more than 1.5 MB in size. You don’t want images that large on your site. When it comes to file size, the image you upload to your website should not be larger than 500 KB. Compressing the images will reduce file size without losing quality.
I use the ‘Save for web’ option in Photoshop for most of my images, but if you are not familiar with it, you will spend a lot of time trying to determine what format and quality you should use. Some bloggers use a plugin for this, but as you know, plugins also slow down your site and that is what we are trying to avoid. If your images are still large, you can use an image compression tool:
It’s very simple to use an image compression tool. You just upload your image and let them do their work.
I decided to test TinyPNG and it compressed my already small blog post image from 16.5 to 11.6 KB. It’s not as important for small images, but there will be a difference if your image is larger.
You can make your images much smaller if you use this technique, but too much compression can lead to low-quality images. Therefore, you should try to get the right balance between image quality and size.
How to name your file
When it comes to SEO, the name you give to your images is very important. Search engines don’t see images like we do. They can’t read the text you add to your featured images, so you have to give them a descriptive name. By descriptive name, I don’t mean that you have to describe the object that’s in the image, but use keywords that are relevant to your post.
The featured image I used in this post is titled “optimize-images.png”. If I’d named it “pink-image.png”, people searching for pink images would have landed on my post and probably walked away fast because my post is not related to their search.
Don’t forget to use hyphens to separate your words. Bots don’t know how to separate character strings, so hyphens will tell them that there is a space between characters.
Use ALT and Title attributes
After you upload the image to your site, there are only a few more things left to do: you have to fill in the image details. If you are on WordPress it will look like this:
If you are on Blogger, click on your image after you upload it and select “Properties”. You will be able to add the title text and alt text.
The alt attribute (or Alt Text) is the text alternative to an image. It’s displayed when a browser doesn’t render that image. This often happens because of slow server response, but it’s especially useful for people with disabilities or people that use reading software.
Alt attributes are also very important for SEO. They associate images with keywords and will help your blog achieve better rankings in search engines. When you add alt attributes, you should describe your images in simple English instead of listing a few keywords.
Alt Text is valuable for Pinterest too because the official Pin it button will use them to add a description to your pin.
When you upload a new image to your Media Gallery, the Title will be automatically filled with the name of your image. You can change this to a short sentence or use the same sentence as the Alt text.
The Title tag is used by your WordPress library and it shouldn’t be confused with the Image Title Attribute. The latter is only accessible from your posts. After you add the image, click on it and select Edit (the pencil icon) and you will see the image details.
You can find the Image Title Attribute under advanced settings. This is used to provide more info about the image and your readers will see it when they hover over your images. If you choose to use it, make sure you don’t add the same sentence you used for the Alt Text. This might be considered keyword stuffing and you will be penalized by search engines.
I don’t use the Image Title Attribute for all of my images and I still have many images that are ranked high in Google search results.
Add a caption and description
Both are optional. The caption is the text that is displayed below the image. I don’t like the way it looks so I only use it to add credits.
The image description can be longer than the alt attribute and it’s the description of the image that will be displayed on the image’s attachment page if you link the image to the page. I fill out the description because some Pinterest buttons will pull it from the image and add it as the pin description.
Optimizing images for your blog might seem like a lot of work, but you will get used to it very fast and it will improve your page speed and search ranking.
Do you compress your images and fill out the image details? Please leave a comment if you have any questions about image optimization.
I never considered compression before! I tend to just throw stock images into my photo editor without much tweaking, so it looks like I need to rethink my strategy. Thanks for the tips!
You’re welcome, Amanda! Compression might not matter that much if you use simple graphics like the featured image from this post, but it helps you save so much space if you use photographs.
Great tips! I never thought about using the advanced settings for images in WordPress.
Only the alt tag is a must, but you can use the title attribute too because you never know when Google decides to include it in its search algorithm.
This is so helpful! I usually resize in picmonkey but I don’t think you can compress photos there. I need to learn photoshop! Their size is pretty small though. #Sitsblogging
Photoshop has so many useful features. You should definitely give it a try. For compression though, TiniPNG/JPG are fast and you don’t need to spend hours learning how to use them.
Thank you for the tips! I don’t own photoshop and I’ve been trying to understand how to compress my images without losing the quality. I am pretty sure it will still be trial and error, but I’ll eventually get it! Visiting from SITS sharefest! Enjoy the rest of your weekend!
xo, Chanda | http://www.mschanda.com
You’re welcome, Chanda! Compression often involves a bit of trial and error. The tools I listed above do a good job with just a click, but if you use something like Photoshop, you have to play with the settings until you find the right one.
Woah! I almost didn’t read this because I’m so brilliant and thought I already knew all about image optimization, but your post is full of great tips. I’ll definitely try the compression tool- haven’t had the guts to jump into Photoshop yet. Thanks so much for all of this!
Thanks for reading it, Jeanette! I also thought I knew everything, but I’ve learned a few useful things while I was researching this post.
Hi Cristina,
This is the part where I feel really dumb but “alt tag”, “alt attributes”…what am I missing?? I see URL, text, alt title, caption, description, etc. but alt tag and alt attributes I don’t see even under advanced options. I know there’s something right in front of me that I’m just not getting. Help…please.
Thanks!
Stefanie
Ps. Love the rest of the tips! Most I’m already doing (yeah!) – others I know but never remember to do (great reminder!). Thanks very much for all of it!!
Sorry, Stefanie, I didn’t realize this might confuse readers. Alt is called an attribute in HTML and developers often refer to it as Alt tag, but it’s called Alt Text in WordPress and Blogger. So the Alt Text is the one you need. I made some small changes, hope it’s clearer now.
Thanks for reading!
Thank you so much for your post. I couldn’t get my large PDFs to upload to Etsy until I read about optimizing my pictures. Thank you!
You’re welcome, Jill! I also ended up with large PDFs because I wasn’t paying attention to compression, but it’s easy to fix.