Image optimization is again another very important part of optimizing your WordPress blog or site. Images add weight to the overall page load and so it is essential that we ensure the impact is minimal. This issue will cover all that you need to know about optimizing your images for maximum performance. To do this I will list a number of questions and answer them accordingly.
Is there really a difference between an optimized image and non optimized image?
Yes, there is a very noticeable difference in terms of load times and initial load of a site that hasn’t optimized its images. There are a number of issues that occur as a result of non optimized images and they are as follows:
- An image that isn’t scaled correctly forces the browser to re-size it within the HTML of the page, which WordPress generates for you and can be viewed by right clicking on your site and selecting view source. Each time the browser has to do this, it adds additional time to the overall loading of the page.
For example: If it takes 200ms to re-size an image uploaded at 200×150 but is displayed at 150×150, then 10 images will add 2 seconds to your load time.
- An image that is simply too big in terms of bit size. There are several different formats that you can use for your images and selecting the right one can save you time and space. If you have an image at 150×150 there is no reason that image should be 1MB or even 100KB. Each KB of the image is added to the page size and the bigger the page size the longer it will take to load. As most WordPress sites are on shared hosting and some have disk-space/bandwidth limits, this is one area you can really go to town on and save resources.
Here is a list of formats typically used in WordPress and what they are used for.
.jpg – Used for images such as pictures like photographs.
.png – Used for graphical images such as banners, like the one used in a header or footer as well as logos.
.gif – Not used as much as it has largely been replaced by .png, similar uses to .png but not as good quality.
For more information read this post about different image formats.
How do we Know if we need to Optimize our Images?
You can you a simply online tool to determine what images are in need of a little work. GTmetrix is the perfect tool for this job.
Just simple add your domain in the box and click GO. A number of test will be performed and the result will be displayed rating your performance from 0 – 100%, A-E for overall performance based on Yslow and Page Speed measurements.
The results then allow us to see clearly what work needs to be done. For this article we will be focusing on specify image dimensions and optimize images from page speed and Do not scale images in HTML for Yslow.
Note: Images from an external source such as facebook fan box cannot have the image dimensions added by yourself and so attempting to remedy these queries would be a waste of time.
How do we optimize the images highlighted by GTmetrix?
There are two ways that I optimize my images.
The first Method is to look at the optimize images section of GTmetrix and you will notice a link that says see optimized version. Select this and another window will open with that image.
Simply right click on the image in the new window and save as.
Then log in to your file manager via FTP or by your control panel, such as Cpanel and locate the file path.
For images that you have uploaded they will usually be in wp-uploads and for theme related images in the themes image folder.
Once you have located the folder that the image is in, simply upload the new image and overwrite the old one. This saves time and space as it takes longer to upload all new images and change the paths.
Note: for .jpg images, most of the time GTmetrix displays a .jpeg image when you select and download the optimized version. To overcome that, upload the image as normal and edit the name, changing .jpeg to .jpg in file manager.
Upload an optimized image from the start.
To do this you will need some software to help you resize and optimize the image.
The best and most simplest software I have found is Shrink O’Matic and it’s completely free.
This software is a simple drag and drop program, you set the settings depending on size and format, drag the image from your folder to the washing machine and out comes an image optimized and resized in a flash.
Click on the image to view a full screen image.
Notice the .jpg option has a slider, this is for quality of the image. I would reccomend using 85-90%, any lower and the image will be too blury and at a 100% it will be a little too big.
Once you have run your image through this tool just upload it in the same was as we did above using either FTP or file manager.
What about Dimensions?
The last thing that we need to check is that our dimensions are declared. As HTML is a markup language we need to tell it where the image is and what size so when the page renders it does not have to wait for the image dimensions to be figured out. I can demonstrate the difference between a page that loads with dimensions and one that doesn’t using a simple comparisson below.
Looking at the Image above, we can see two sites. Site A and Site B. Site A has its dimensions declared in the HTML so our browsers knows exactly how big it will be and where it will be.
Site B however, the poor browser knows there is an image there, but it doesn’t know how big it is and so a conversation between the browser and html takes place.
Browser to HTML: Hmm, there is an image here, but I don’t know how big it is. I think I better ask, Hey HTML how big is this image.
HTML: I dont know let me ask the image.
HTML to Image: How big are you?
Image: I’m 150 x 105px
HTML: OK I will let the browser know.
HTML to Browser: It’s 150 x 150px
Browser: Ok, thank you, ahh damn, how big is this other image?
And the cycle continues….
How do we know if the dimensions are added?
Word-press in most cases adds it for you, but you can double check by switching from Visual to HTML in your WordPress editor.
You should see something like this:
<img title=”Shrink O’Matic” src=”http://diywpblog.com/wp-content/uploads/2012/06/Shrink-OMatic.jpg” alt=”Shrink O’Matic” width=”600″ height=”308” />
At the end of the image, just ensure after the quotation mark there are dimensions.
You can also use online tools like GTmetrix to check that all images have dimensions.
Image optimization can shred 100s of KB of your page size as well as precious seconds to the loading time. So ensuring that this area of optimization is done correctly is one of the most beneficial.
I have seen sites with images the weigh in at over 1mb but there only 150 x 150, the site had 26 images that were like this so I will let you do the maths on how long that took to load, if it loaded at all. The default timeout to your database is 60 seconds. I also felt sorry for his servers CPU.
Facebook fan box doesn’t add image dimensions even though all the images are 50 x 50, it would certainly speed up load times if they added that and maybe they will one day.
So now I leave it to you to fine tune your images.
Feel free to leave a comment and don’t forget to sign up to receive all the latest posts.