1. Address dimensions of images in your blog entry.
2. Optimize and and speed up image loading.
We provide a five-minute checklist and fix this in less than 10 minutes, guaranteed!
In short, indicating your image’s dimensions and ensuring that it is in the right form are self-contained fixes. In other words, a small code modification is all it takes. This is also part of getting the low hanging fruit first and achieving signficiant results in improving user experience.
Which file format should you choose for your blog?
There are basically three image formats for the Web: GIF, JPEG / JPG and PNG.
- GIF — Graphics Interchange Format is limited to 256 colors – best used for moving / animated pictures. Photos saved in GIF format end up with a bunch of tiny holes in them.
- JPEG / JPG — Joint Photographic Experts Group, the original name of the committee that wrote the standard. Use the JPG format for photographic images, which generally have millions of colors.
- PNG — Portable Network Graphics uses a lossless compression scheme, meaning it can make a file 5 to 25 percent more compressed than converting the same image to GIF. PNG is perfect for graphic image files, like logos and infographics on a small scale, making it a common choice for use on the Web. Plus, saving, restoring and re-saving a PNG image will not degrade its quality.
In short, when you use screenshots and illustrations with text such as an infographic, PNG is your best choice.
Curious? Join 1500 other subscribers to this blog’s newsletter and read on!
Join the 3,000+ organizations using the DrKPI Blog Benchmark for your blog.
Agarwal, Amit (March 10, 2014). JPEG or PNG – which image format offers better quality? Retrieved June 16, 2014 from: http://www.labnol.org/software/tutorials/jpeg-vs-png-image-quality-or-bandwidth/5385/
Arandilla, Rachel (2011). Different image formats – and when to use them. Retrieved June 16, 2014 from http://www.1stwebdesigner.com/design/different-image-formats/
Have you specified image dimensions?
WordPress offers new features that make uploading of pictures easy. But hold on, not everything is as easy as it looks. Yes, it still takes time and cannot be avoided.
The above image was uploaded using the WorPress Add Media button. If you upload and choose this image, having your cursor in the text where you want it, it shows up as above with the code below:
<a href=“https://drkpi.com/wp-content/uploads/2014/05/2014-05-09-gas-up-but-check-the-oil-as-well-before-driving-off-e1410253076223.png“><img alt=“Fill up your gas tank but check the oil, before you drive off. SOCIAL MEDIA AUDIT 101 – the book from Urs E. Gattiker, ISBN 978-1-78063-426-5, ISBN 978-1-84334-745-3, KPI, metrics “ src=“http://blog.drkpi.com/wp-content/uploads/2014/05/2014-05-09-gas-up-but-check-the-oil-as-well-before-driving-off-139×300.png“ /></a> #re14 – Fill up with gas BUT
But this has its disadvantages. For starters, it does not allow for wrapping text around the image. As well, it does not have text that will show if hovering with the mouse over the image. In turn, software will be unable to read out this text to the blind. Yes, the alt= text is what Google needs to know what this image contains.
If you use the code below, the image is shown as on the right. If you go over it with your mouse, you see text (yellow box) that a software for the blind will read out loud. This requires the following:
<a title=“CLICK IMAGE – Fill up your gas tank, but check the oil before you drive off. SOCIAL MEDIA AUDIT 101 – the book from Urs E. Gattiker, ISBN 978-1-78063-426-5, ISBN 978-1-84334-745-3, KPI, metric“ href=“http://blog.drkpi.com/book-14-1/“ target=“_blank“>
The above code is the first half, and also includes a link to another website, file or blog post if the user clicks on the image. Hence, this allows you to send the user to another page with additional information, in my case my latest book.
With the gas pump above (to the left), if you click on the image your browser will show the image only. All the rest in the second part of the code starting with <img style= is the same, except that in the code below I asked the program to move the image to the right.
<p><a title=“CLICK IMAGE – Fill up your gas tank, but check the oil before you drive off. SOCIAL MEDIA AUDIT 101 – the book from Urs E. Gattiker, ISBN 978-1-78063-426-5, ISBN 978-1-84334-745-3, KPI, metric“ href=“http://blog.drkpi.com/book-14-1/“ target=“_blank“><img style=“float: right; padding: 5px; margin: 5px; border: 2px initial;“ alt=“CLICK IMAGE – Fill up your gas tank, but check the oil before you drive off. SOCIAL MEDIA AUDIT 101 – the book from Urs E. Gattiker, ISBN 978-1-78063-426-5, ISBN 978-1-84334-745-3, KPI, metric“ src=“http://blog.drkpi.com/wp-content/uploads/2014/05/2014-05-09-gas-up-but-check-the-oil-as-well-before-driving-off-139×300.png“ width=“300″ /></a></p>
The advantage is also that the text is wrapped around the image, which the WordPress option does not automatically do (see image to the left above)!
In the above codes, the size of the image is set to width=“300″. Why should we care about this? This is one of those tips I wish I had known when I first started, because it is a pain to go back and enter this information later.
When a web browser displays your blog or webpage it has to figure out a few things before it can display the content. It begins by laying out your wepage around the images you embedded in the text, but it can only do this if it knows what sizes your images are. If you did not tell it in the html code, how will it? Glad you asked.
In such an instance, the visitor’s web browser begins „building“ the page by first displaying the text. Second, it downloads image one which in turn tells the browser the size of the image. Third, it rebuilds the page while wrapping the text around the image. Fourth, it starts again at point TWO above and downloads the next image. Then it rebuilds the page a second time while wrapping the text around your image two. This process will happen for every image on your page.
You can also see that if you upload an image with WordPress it creates three different sizes of any image you upload. You can check on this by visiting your WordPress admin area under settings/media. Yes, I know the above is elementary as Sherlock Holmes would say, but sometimes bloggers forget.
If you have questions or have an idea, just contact the author (that would be me – see details below).
Adaptive Image Optimization For Responsive WordPress Themes
What do you think?
– Do you have another trick about how to insert images in a WordPress blog?
– What other things do you do to make showing quality images easy?
Ask your questions – I look forward to answering them.
Hooray – you read the whole post by author Urs E. Gattiker – aka DrKPI! Want to hang out more? Check out the news updates on Twitter, join our Social Media Monitoring discussion group on Xing, chat with us on Google+, and receive your fortnightly updates and behind the scenes scoops through our newsletter.
Urs‘ latest book, Social Media Audits: Achieving deep impact without sacrificing the bottom line was published in April 2014 by Chandos Publishing / Elsevier – blog readers => grab your 25 percent discount with free shipping now.
Extra Tidbit: Need to do an audit? Get Social Media Audit: Measure for Impact (Springer Science Publishers).
This post is also available in: Englisch