Let’s face it: we live in a world of instant gratification. People are so impatient; if they visit your website and the images do not load quickly, they will leave. It seems that those using a mobile device have even shorter attention spans. When your blog or site fails to load in five seconds, off they go.
Images on your WordPress blog or site are essential; they give visual appeal to content and make the posts or articles on the websites enjoyable to read. Without the use of images, a lot of websites will be boring. When visitors only see a block of text they tend to leave quickly. Images have been known to improve the search engine optimization of websites. ‘A picture speaks a thousand words’ as the saying goes, and this is entirely true for the brain can process photos faster than it processes text.
We will be taking a look at sizes of images and how they matter to the responsiveness of a website. We will also be learning how to optimize the images for the best user experience on your WordPress blog or site.
Size Matters
For search engine optimization, the rate at which a page loads matters a lot. Your site needs pictures that are high quality but still load fast. This is especially true if you want search engine crawlers to pick up on your site.
Why is the Loading Speed of Your WordPress Site Slow?
It is not a wise move to use an image that hasn’t been resized yet. Most of the pictures that come straight from a camera are approximately 48” x 32”, and are 72 PPI. This is far too large to be used on your site. Even if you try to resize it on WordPress, it will maintain its original size but simply appear smaller. If you do not create images which are optimized appropriately, the odd sizes will occupy more space or bandwidth than is necessary. This will, without a doubt, cause it to load slowly, especially on a mobile device. This is the reason why some websites do not load as fast as they should, and as a result, they find a different site to visit.
A good resource to test your website performance can be found here.
What, Then, is the Right Size of Image to Use?
Ensure that the format of the picture is not only the right size but is relevant to the content you post.
Most browsers tend to resize any image that looks larger than normal, but then, the resolution of the photos will not be so good. Therefore, before you upload any image to your WordPress platform, make use of a photo editing program like Photoshop, FotoFlexer, Pixlr, PicMonkey, or any of the myriad of online photo-editing programs that are available. Some can be found for free on the Internet, or at extremely low costs.
How do I Find the Right Fit?
Do you know that the most important element when it comes to resizing a photo is its width? Any photo editing tool you chose to use usually fine-tunes both the height, as well as the width, of a picture. This implies that whatever ratio you set the width of the image, the height is resized accordingly.
But what if you don’t know the pixel size of the area where you want to post your content? There is a process to follow, although it’s a bit tricky because we will be messing around codes on your WordPress platform. Follow the steps outlined below carefully:
- Launch your Stylesheet and, under the appearance tab located on the dashboard, click on the editor button. A screen will appear titled “Edit Themes” and by the right-hand side, you will see a listing of files.
- Begin a diligent search for a line with the word “posts” that starts and ends with these symbols /*. If, however, you don’t see the word “posts”, then search for div# or div, otherwise known as a “div id” or “class”.
The div class will be titled “posts”. Under “posts”, search for a line which displays width: 640px. That is the distance from one side or edge of the text area to the other. You should ensure that the width of your image is not wider or larger than this number. In WordPress, the code would appear to look like this:
<style type=”text/css”media=”screen”>
<?php
//Checks to see whether it is ‘page’
If (is_page)() ) {
// on ‘page’ //
?>
.post { width: 640px; }
<?php } else { ?>
.post { width:640px; }
<?php } ?>
</style>
The Quality of the Image, A.K.A., Resolution
One thing should always be clear; the main objective of an image when used on a website is to get the page load as fast as possible while it retains its quality.
Image Format
Images can be saved in any of these different formats: JPEG (.jgp), PNG (.png) and GIF (.gif). The JPEG format is used for saving photos, and most are usually small in size; in spite of that, they are distinct and clear on the screens of devices. The images stored in this format are adaptable and do not take too much time to load.
If you need a good format to showcase graphical texts, screenshots, or line art, then saving them in PNG format is the best way to go. This format also supports translucency and is used for images with low resolution, but this format loads rapidly.
For animations, icons, plain logos, or symbols, GIF format is what you need. This is the format that is used on animated images and is mostly small in size.
There are lots of arguments concerning which format is the best to use on a WordPress site. What you should keep in mind is how your visitor will be enjoying the images before you choose a save format.
How to Name Your Images
A lot of bloggers have experienced this; having the need to search for a picture and not finding because the image was not named correctly. That could be frustrating. The primary reason why you should name each of the images you use on your WordPress site is optimization. Therefore, you need to create and use image names that are keyword-rich (see: NOT keyword-stuffed) and descriptive. Search engine bots not only crawl for the text of a website, but they also crawl the names of the images used as well. For that reason, remember to give each of the images appropriate, relevant names.
Use of Alt Tags
Text substitutes for images are known as ‘Alt Tags’ and they usually come up anytime a web browser does not render the images properly. It also comes up when a web visitor has deliberately turned off the image functionality on his/her browser. If done well, adding suitable Alt Tags to your images can greatly enhance your search engine page ranking.
When it comes to Alt Tags, remember that:
- Your images must be described in simple words.
- It is not a wise move to stuff your Alt Tags with keywords or else your site could be punished.3
- It is not good to use alt tags for every image on your site or else; the search engines may accuse you of over-optimization.
Conclusion
Now you know how size matters when it comes to using images on your WordPress blog or site. Use this information to improve your site loading time as you work on your images for maximum output and enjoyable user experience.
