Do you know how fast or how slow your website loads, and does it matter? If you don’t, you’re certainly not alone – and yes, it does matter!
And, have you ever optimized your WordPress images?
Most of us have no idea of the importance that optimized images play in the loading speed of a website, and of course along with a few other SEO things.
By simply creating images in your favorite image software program and failing to recognize the importance of their file size, you are missing a great SEO opportunity. This is your chance to optimize those images and dramatically speed up your website in the process.
Why is Speed Loading Time Important?
For many reasons:
- Visitors and customers are impatient and won’t wait. There are loads of statistics available to prove that the slower a website loads, the more likely the visitors are to leave.
- Fast site loading times are great for search engine rankings. Therefore, optimizing your images helps to achieve those quicker loads.
- Faster sites appeal to all users who can navigate at once through the website without waiting. There is also evidence that the earning power is related to the speed. The faster the sites loads, the happier the visitor is, and the more likely they are to engage and click-through.
When many authors publish an article, their focus tends to be on optimizing the text while completely ignoring the images. As a result, they are missing the traffic that is generated from image-based search engines like Google Images and others.
The more optimized images you have on your website, the faster it will be. That means that it will get ranked higher within search engines – all good SEO!
How do I test the speed of my site? Easily, just enter your web URL into a speed testing website.
Speed Testing Websites
First, run a speed test on your website or web page. These are two great testing sites that return meaningful results:
Running a test on this site with no image optimization yielded these results. The first recommendation made is to Optimize Images, so I did that by the methods mentioned below with regards to best practices for image optimization…
… and this is the difference between the Page Speed loading time. From a Grade D – 67% to a Grade A – 92% – this is a huge increase and worth the effort.
When you run a full page speed test on Pingdom, you get some useful information.
The results are similar to this >>
This site seems to have tested OK according to this test. To drill down and find out more, there are four results tabs immediately underneath for Waterfall, Performance Grade, Page Analysis, and History.
Waterfall: These are the requests made to load this page. You can easily see what is loading slowly and how long it takes in milliseconds.
Page Speed Performance: The site is graded depending on Pingdom’s recommendations. I was not able to find any further information about my images here – perhaps that’s a good thing as they may be OK, but I would like to have known one way or the other.
Page Analysis: This is another useful tab showing simple analyzes of load time, size and data request as well as the server response code
History: Each time you run a test the results are stored here for further comparison checks.
Take on board any suggestions for improvement of speed and deal with them accordingly, also take note if there are any plugins that are slowing the site down too much and remove or change them.
Tips And Techniques On How To Optimize Images For The Web
There are no definitive rules for optimizing images, just good practices. What I mean is that you should get used to compressing images somehow, rather than not compressing them at all!
My favorite and one of the simplest is TinyPNG, where you literally drag and drop .png or .jpg files onto their site. The files are immediately compressed using smart lossy compression techniques, and made ready for download. The effect is almost invisible, but it makes a huge difference in file size!
I have also had good results with the EWWW Image Optimizer WordPress plugin. If you have not previously optimized the images on your site, this plugin will optimize all those that have already been uploaded. This will save you a load of time and effort.
Here are a few things to be aware of when working with your images:
- Vector formats are preferred: creating vector images is ideal, as they are non-dependent of resolution and scale, which makes them fit the responsive, high-resolution world perfectly.
- Try to convert GIFs to PNGs to see if you get a saving. More often than not, you will.
- SVG assets – minify and compress: Most drawing applications frequently contain unnecessary metadata in the XML markup which can be removed.
- Choose the best image format: determine your functional requirement and select the format suitable for each particular asset.
- Experiment with optimal quality format settings: reduce the image “quality” settings, the results are usually fairly good and file-size savings are amazing.
- Remove unnecessary metadata from images: many images contain metadata about them that is not necessary, such as camera and geo location information and more. Tools can be used to strip out this data.
- Upload scaled images: ensure images uploaded onto the server that are re-sized remain as close as possible to the “natural” size of the image. Take note that large images when re-sized, account for the largest overhead!
- Automation: use automated tools to ensure that all of your images are always optimized.
What To Consider When Working With Images
There are some important image attributes that should be considered when you are working with images on your WordPress site. Learn what they are and how to fill them in properly.
#1 – Alt Text
Alt Text stands for Alternative Text and is probably the most prominent aspect of image optimization.
The text – a word or phrase – should just describe the image. It is there to enable reading devices (frequently used by the visually impaired) to gather information associated with the image.
Not only does it help your website visitors to understand what your image is about, but it also tells the search engines the very same. When visitors see this image of an American Barn, they instantly recognize what is going on in the image. Unfortunately, search engine bots are unable to identify instantly what the image is about. So, by utilizing Alt Text, the bots recognize your images at once.
There are two ways how to apply it (one via the Visual editor, the other as code in the Text editor):
1. In the WordPress Library from the VISUAL EDITOR
In your WordPress dashboard, go to Media > Library and select or upload the image you want to use.
With the image selected, the related information appears under Attachment Details on the right side.
Simply enter the chosen text into the Alt Text text box along with any other required descriptive information.
This is by far the easiest method as no knowledge of HTML is needed. But, there are times when you may have to enter alt text directly into code, so familiarize yourself with how it’s done.
Understanding HTML is worth the effort and is not difficult.
2. In the Text Editor (or any HTML page) from the TEXT EDITOR
<img> tag add…
Source code of an alt tag:
<img src="american-barn.jpg" alt="American Barn"/>
That’s it – easy!
At the moment, image captions do not affect the ranking of your site in search engines. However, they can reduce the bounce rate of your visitors. That’s all because readers are getting their desired information and therefore are not rushing away too soon.
Many people like to see an image with a caption, and there are times when they are more beneficial than others. Photos benefit from having captions, whereas graphics may be self-explanatory so don’t usually need them.
Get into the habit of being descriptive, readers like it.
Before you upload an image into the WordPress media library, give it a relevant, descriptive and keyword-rich name.
When naming your images, think about the following things:
- Choose a name that clearly explains what the image is about. Adding its geographical location is a good idea as well.
- Don’t use a single word to name your image files. Use a phrase that has depth of meaning.
- Avoid using generic filenames like _DSC0101.jpg or .gif, as they fail to deliver any image related information to the search engines.
- The filename should not be too long but do keep it meaningful.
- As Google looks at dashes as separators and underscores as word joiners. Therefore, don’t use underscores and pluses, instead use dashes/hyphens.
a). Optimize-Images = Optimize Images
b). Optimize_Images = OptimizeImages
optimize-image.jpg is, therefore, the correct one to use.
#Image File Size:
This is the big culprit for slowing down the loading time of your website. Some images of higher resolutions may take up more space than you would expect, and it is important to be aware of this and know how to deal with it.
Large images will slow your site down if not reduced in size. This is not only bad for SEO purposes, but also offers the user a poor experience. We are impatient and certainly won’t wait for a slow loading site!
Do not use the WordPress Image Detail Editor to change image dimensions, as WP does not re-size the images, it just shrinks them via CSS or the HTML source code. What happens is, the browser initially loads the original larger image and then has to re-size it – too time-consuming!
The best way to address this issue, is by using an image editing program like Photoshop where there is a saving option in the “File” menu called “Save for Web”.
Photoshop – Save for Web
If you are a Photoshop user, you’ll no doubt be familiar with the Save for Web dialog box. Using this is best practice for getting those image sizes under control without losing great detail. Rather than just saving the image as a standard JPG, PNG or GIF, use the Save for Web command to fine tune the quality.
Once in Save for Web, there are several presets available to you whether you want to save as a JPG, PNG or GIF. By selecting these in turn, you will see what the image looks like in that preset and what its file size would be.
Presets can be over-ridden easily with any custom settings you select.
Regular use means that you will get to know the best settings for different image types, but don’t worry too much! What I recommend is to drag and drop the saved image/s onto TingPNG and let it run its magic automatically, after which you’ll be able to download your image at the optimum compression.
I love the TinyPNG tool!
As Photoshop is not a cheap program, you may not own a copy or have access to one, so you might want to try one of the free programs that are available, like:
Next time you spend a lot of time on researching and writing your high-quality post, don’t forget to optimize images for the web. By doing this, you’ll make your website faster loading and a pleasure to visit.
It is not only the search engines which will appreciate your image optimizing efforts, but also your visitors. And, most importantly, your site’s ranking within search engines will gain a tremendous boost.
A little effort can be very rewarding!
Do you optimize your images or have you never thought it worthwhile? Is your site slow in loading, if so, I hope you have found enough here to help you speed it up a bit! Share your knowledge…
- Review of VideoScribe – Awesome Animated Video Software - February 13, 2017
- Best Amazon WordPress Plugin for eCommerce | WooZone - May 20, 2016
- How To Make Money By Blogging | A Useful Guide - April 8, 2016
- Best Animation Software for Beginners is Fun and Easy to Use! - March 29, 2016
- What Is FileZilla? | Popular FTP Client to Transfer Files - February 29, 2016
- How to Leverage Browser Caching Using .htaccess - February 21, 2016
- How To Back Up A Computer To An External Drive - December 30, 2015
- Powtoon Review: Free Presentation Software - December 15, 2015
- Whiteboard Animation Software is the Secret Ingredient | See Why! - August 16, 2015