7 Useful Image Optimisation Tips For Search And Social Media

A web page without an image is almost naked, missing something, a finishing touch. Basic image optimisation can transform your web pages, product pages and blog posts into a page that works harder for you with very little effort.

5 Image Optimisation Tips For Search

Can you imagine a product page without at least one photo? Relevant images on your pages and posts help the page to stand out, help readers understand your message and can improve your SEO.

1. Image file types

Basic image optimisation begins with the original image file. There’s a huge array of image types to choose from. Let’s keep things simple!

JPEG is the traditional photo file. It’s great for photos, not so great for block colours, text and lines. JPEG also does not support transparency. They do lose quality when compressed but can be compressed quite a lot before it becomes noticeable.

PNG files can be rather large depending on its format. They support far more colours than JPG and GIF, which can make the file size huge. PNGs do support transparency and are good for images, logos and text. They don’t lose quality when compressed.

GIF images have been around forever (well almost, since 1987) and their small file size are great for the web. However, they have limited colours so often a PNG will work better for you. GIFs support transparency and animation.

It all boils down to file size. Yes, I am guilty for using PNG when JPEG would be better. The result is a larger file size than necessary.

Keep it simple

• JPEG for photos
• PNG for screenshots, logos, and other graphics
• GIF for animated images

[clickToTweet tweet=”Image optimisation tip 1 – choose the right image file type for the job. #imageseo” quote=”Image optimisation tip 1 – Jpeg png gif? Choose the right image file type for the job.” theme=”style3″]

2.Image file size

The rise of Smart Phones and the mass availability of digital cameras almost makes everyone a photographer! The problem with photos from standard 8MB phones and digital cameras is they are physically large and therefore, have a large files size too. Your web pages really don’t need an image that is 3000px (and more) wide!

For example, you take a photo that is say 3264 x 2448px and then upload it to your website. You want it to display at 500px wide. What a browser actually does is load the full-size image then resizes it to 500px on the fly. Loading 3264 x 2448px takes longer than one at 500px.

[clickToTweet tweet=”Image optimisation tip 2 – Save space and load time, resize your images before uploading #imageseo” quote=”Image optimisation tip 2 – Save space and load time, resize your images before uploading” theme=”style3″]

3. Image compression

Even when you have chosen a suitable image file type and resized your image, the actual file size can be reduced further by compression.

Don’t panic!

There are online tools to help you, including:

• Kraken.io
• TinyPNG.com
• Compressor.io
• Optimizilla.com

Why is file size important?

Large file sizes take longer to load. While Google does count site speed as a ranking factor  your main consideration is the user. Research by the Aberdeen Group on e-commerce sites found that a 1 second delay in page load times resulted in a 7% loss in conversion, a 16% decrease in customer satisfaction and 11% fewer page views.

[clickToTweet tweet=”Image optimisation tip 3 – compress your images to improve loading times” quote=”Image optimisation tip 3 – compress your images to improve loading times” theme=”style3″]

4. Image file name

Shockingly, Google actually wants you to use descriptive file names for your images.

Why?

The filename can give Google clues about the subject matter of the image. Try to make your filename a good description of the subject matter of the image. For example, my-new-black-kitten.jpg is a lot more informative than IMG00023.JPG. Descriptive filenames can also be useful to users: If we’re unable to find suitable text in the page on which we found the image, we’ll use the filename as the image’s snippet in our search results.

[clickToTweet tweet=”Image optimisation tip 4 – Let search engines know what your image is with a descriptive file name” quote=”Image optimisation tip 4 – Let search engines know what your image is with a descriptive file name” theme=”style3″]

Basic image optimisation starts before you even upload your image to your website

Follow these 4 steps to optimise your images before uploading:
1. Choose the appropriate file type
2. Resize the image
3. Compress your image *
4. Rename the image with a descriptive file name

*If you run on self-hosted WordPress there are a range of plugins that will automatically compress uploaded images for you. I use the Kraken Image Optimizer plugin.

5. Image Alt Tags

As advanced as search engines are becoming at image recognition, they still struggle to “read” images. They rely a great deal on the image alt tag to provide more information.

The alt tag is also used when images are not displayed, for example when a person uses a screen reader. In this case using appropriate image alt tags improves the accessibility of your pages.

From a social stand point, Pinterest uses the image alt tag as the default Pin description when using the browser Pin button.

Using the image alt text is not only about image optimisation for Google and other search engines but is an important accessibility factor too.

Here’s what Google say about image alt tags. Note that Matt Cutts uses the term “alternative text”, he’s talking about alt tags.

Image alt tag best practices

As you can see, the image alt tag is pretty important when it comes to your image optimisation. Describe your image without going over the top:

• Yes, include your keywords if relevant
• Yes, include your location if relevant
• Keep it short and to the point – there’s no need to rewrite War and Peace in your alt tag. Is there an ideal length for alt tags? Hobo SEO suggest keeping them to less than 15 words.

Photo credit: jimd2007 via Fickr CC BY 2.0

Here’s an example:

This photo is a view of Fiddlers Ferry Power Station as seen from Spike Island in Widnes.  I chose it because the view will disappear soon enough when they close the power station and I am feeling almost nostalgic.

I downloaded the medium sized image from Flickr, it’s 640px wide.

The file name is now “fiddlers ferry power station widnes.jpg” changed from the original “1322965844_252c9a39e0_z.jpg”.  The file name says what and where, it’s descriptive.

The alt tag is “A view of Fiddlers Ferry Power Station from Spike Island Widnes”.  Again, it’s descriptive and contains the what and where.

[clickToTweet tweet=”Image optimisation tip 5 – Never forget the image alt tag for a quick #SEO win” quote=”Image optimisation tip 5 – Never forget the image alt tag for a quick SEO win” theme=”style3″]

2 Image optimisation tips for social media

6. Open Graph Tags

Way back in 2010, Facebook introduced open graph meta tags. Open graph tags allow you to define which images are important when sharing on social media. While Facebook created open graph, all the main social media sites recognisethe mark up..

Adding open graph tags to your website, pages and posts is the easiest way to get your chosen image from a page or post to be displayed when it is shared on social media. If you use WordPress, my weapon of choice is Yoast’s WordPress SEO plugin.

[clickToTweet tweet=”Image optimisation tip 6 – Facebook not showing the right image when you share? Use open graph tags” quote=”Image optimisation tip 6 – Facebook not showing the right image when you share? Use open graph tags” theme=”style3″]

7. Image sizes for social media

Each of the social sites have different recommendations for the optimum image size. When pulling through images from your pages and posts, some images can be cropped and lose impact.

You can of course, create several images ready for when people share your content on social media. Again, if you use WordPress, Yoast’s SEO has a section where you can add graphics for sharing on Google+, Twitter and Facebook.

Personally, being the least graphically talented person in the world, I tend to go for 2 image sizes.

The first is horizontal, my blog post header. I usually use Canva’s “blog header” template, which is 560px x 315px.

This image shows fine on Facebook, Twitter, LinkedIn and G+ (although not wide enough to get a supersized G+ image). It’s worth noting that the sides and bottom of the graphic may get cropped so leave a margin either side and the bottom if you are using a text overlay.

I also create a longer image for Pinterest. Again, I usually use Canva’s Pinterest template which is 735px x 1102px.

You won’t see that image displayed in my posts unless you click the Pinterest share button.

[social_warfare]

I use Social Warfare, which gives me the option to define a Pinterest image without having it displayed on my blog. That’s just one reason I love the plugin – read “(Probably) The Best WordPress Social Media Plugin In The World” for more reasons.

[clickToTweet tweet=”Image optimisation tip 7 – Check your images display well when shared on social media” quote=”Image optimisation tip 7 – Check your images display well when shared on social media” theme=”style3″]

7 Image Optimisation Tips For Search And Social Media

With a bit of forethought optimising your images, you can really give your posts and pages some muscle and get them working harder for you.

1. Choose the right file type for the job
2. Resize images before uploading
3. Compress your images
4. Rename your images with useful file names
5. Use image alt tags
6. Use open graph tags
7. Check your images display well on social media

Effectively using images is also one way you can improve your business online visibility and reputation.  I loved this short course on Udemy, which explains reputation management including using images.

Over to you:

Do you optimise your images?  Which of these tips will you implement?  Do you have any useful image optimisation tips to add?  Share your thoughts in the comments.