Summary: With these image optimization tips, you will ensure the maximum search engine optimization for images and ensure the images load fast without losing the quality.
Intro
On the previous post, I showed how to optimize images for web, using free and easy-to-use tools like Smush.it for WordPress and Shrink O'Matic.
In the comments section of the post, Patty asked: "do you have any suggestions for photographers who post images on their blogs since this is their primary focus".
I answered the question on the comments, but I thought it would be useful to turn those tips into standalone post, and not just for photographers with blogs, but anyone using images on their blogs as well. So here we go, the top tips for optimizing images for your blog (or any website you upload them to)...
1. Use the HTML img-tag the right way
- Always add height and width to the image
- Always add an Alt-attribute to the IMG-tag
- Always add a Title-attribute to the IMG-tag
The Alt text and the image title
The Alt-text is used when the image cannot be displayed, thus Alt-tag should provide alternative information about the image, something that can be displayed when the image itself is not shown. Image-title should provide additional information on the image.
- Alt-attribute is important for accessibility and mobile usage, in case the browser uses doesn't display images.
- Alt-text is also important for search engine optimization.
- Alt-text is used by the search engines when trying to understand what the image is about.
- If the image is linked, Alt-text will also be the "anchor-text" of the image.
- Alt-text for the image should describe the image with good keyphrase.
- Think of how would you like the image to be found if someone was searching for images like yours.
- Use the title text to add additional and advisory information about the image.
- The title-text of an image has little effect for SEO, but it will be shown as tool-tip on most browsers.
The height- and width-attributes of an image
Adding height and width is important for faster loading. When you define the height and width of an image, browser can continue loading the rest of the page, while "filling" the space defined with height and width with the actual image. This is essential for speed when you have images on a webpage.
WordPress does this automatically, but if you add the HTML tag yourself, make sure you add the height and width in (matching the actual size of the image, see the next tip.).
Using all the attributes of the img-tag
The end result of a good img-tag, using all the attributes, would look something like this:
<img src="descriptive-image-name.jpg" width="200" height="150" alt="img-tag example" title="Good example of a proper img-tag usage" />
Source, references and further reading on IMG Alt-tags:
- Daniel Scocco's Speed Up Your Site -series at Daily Blog Tips:
- Dave Doolin's two part series on the subject at Website in a Weekend:
- Ann Smarty's post at Search Engine Journal:
2. Don't scale the image via HTML
Making an image smaller or bigger by using height and width different from the image size is bad for website performance (and image quality too). Create separate files for different sizes of the image instead.
- Using the height and width for the image is good, but it's even better for the image to actually be the size you define.
- If you need higher quality images to go with the fast-loading preview images, create multiple versions of the image.
- Use a tool like Shrink O'Matic to create optimized preview images fast.
Sources, references and further reading:
- Don't scale images in HTML, Yahoo's expectional performance rules.
- Specify image dimensions, Google's Best Performance Practices
3. Use descriptive image filenames
Never ever upload images with names that don't mean anything. For example, name a photo of a yellow flower as yellow-flower.png, instead of IMG004586.png.
- Always use descriptive filenames for the images, whether it's a photo you took or an image you downloaded to be used in your blog.
- For a half a second of work, you boost the chances of getting search engine traffic from image searches by 42000% if you do this. (Yes, that much).
4. Use the right format
PNG is great for high quality web-images, but PNG grows fast in size when you add colors, thus for web:
- Use .JPG for the larger full-color images, and
- .PNG for the other images.
Use tool like RIOT to see what format both looks good, but is small in size as well.
Sources, reference and further reading:
5. Optimize the image for fast loading
To ensure webpages load fast, optimize all the images you upload to your blog or elsewhere in the web. Optimizing images for web means making the images smaller (in size, not necessarily quality) so they load faster. See the previous post, how to optimize images for web, for details.
6. Link the image
People like to click on images. Unless you specifically don't want people to click links on the page you post the image to, make the image a link.
- If you have a larger or full version of the image uploaded as well, link to that from the smaller image.
- If the purpose of the page is to make people click a link, e.g. to buy a product via review you posted, link the image to the target page.
As a bonus tip for sales letters or sales pages, try adding a screenshot-image of the shopping cart below the "Add to cart" -button, showing what the next page (the shopping cart) will look like and link that image to the cart as well.
As mentioned in the first tip, the Alt-text will be equivalent for anchor-text in a normal link for SEO factoring (in addition to the Alt-attribute being important for accessibility as well).
7. Make image optimization a habit
Optimize all the images you upload and use on the web, whether the image goes to your own blog or another website. Use tools to automate the image optimization.
When you make it a habit to optimize images for both SEO and speed, you will use very little time to optimize images, but reap the rewards as long as the image is online (YEARS!). Maximum impact, minimum effort - just the way I like it.
Summary
- Make it a habit to resize, optimize and rename every image you put on the web.
- Use the right format and optimize the image for fast loading
- Use the image optimization tools to automate the process
- Create separate files for the different sizes of the images
- Always add Alt-attribute, height and width to the HTML img-tag
- If applicable, use the image as a link
What image optimization tip would you add to the list?
