Images are vital parts of any Website or Blog. They add aesthetic beauty as well as help the readers get clear idea about the things we are writing in Blog posts. Do images slow down the website? Have you taken time to make sure that Images that we use are not hindering the blog performance in any way? If no follow these key points.
Images are important for blog posts. Plain text posts are definitely boring and not all readers will have the patience to go through all the things are written in here. But when we add images in between some paragraphs the post becomes visually appealing. That will grab readers attention and will definitely improve the whole experience of the Website.
This post is targeted towards WordPress Websites and Blogs. After all it is the most widely used Blogging Platform of the Century. WordPress is really simple to use with self-explanatory features. There are tons of Themes to change the look and feel of the Website. And then there are plugins which are small addons that will add new features to WordPress….and what? There are literally thousands of such plugins.
Images are always heavy on Servers unless they are optimized properly. We will go through some key points today and see how your website sums up with all the aspects.
Where Do I Get Images for use in my Blogs?
I make use of Websites offering Royalty FREE Images. These sites provides Images with CC0 license which means we can use those images Freely with edits or modifications.
Lets get started on the 4 Key points, Here we go:
1. WordPress Theme Issues:
We all use different themes for our Blogs. I personally use a Magazine theme for this particular blog. There are tons of themes that are available for FREE while some are premium themes with great design and features.
Using images with some themes can sometimes cause for server load and compromise the performance of the website. This usually happens on very poorly coded themes and rarely occur in premium themes. Certain themes even causes distortions to the whole blog structures.
Make sure you use a well coded theme that has been proven to be great. We are always free to experiment with themes before finalizing a theme for the Blog. You might be wondering this happens. Image placements and image attributes are written into the themes files. So these attributes are added to all the images that we add to the post. If these attributes are poorly coded, it might lead to resource over usage or maybe resource leakages. This might also happen when there are so many additional customization options for images in the theme. These extra customization options might cause problems.
How do I test my themes? – By Installing WordPress on my Local Computer.
There are many ways that using more images in a poorly coded theme might cause problems with the Site Page speeds. Test Websites using Page Speed Tools like GTMetrix, Pingdom etc to evaluate the performance of the Themes before actually selecting a Theme. Make sure that the theme is not causing any problems with the image resources.
2. Plugin Issues:
After we have checked if the theme is having any issues with images, we have our next item in the checklist- Plugins. Plugins are vital part of any blog. Every Blog will be using plugins for improving the whole website. Plugins adds additional functionalities to the website which WordPress couldn’t do alone. Plugins are coded by developers and often aims on any particular functionality.
There are tons of plugins for optimizing, and handling images. Even i use plugins for managing my images and how they appear on each posts. There are plugins which are used to reduce the image size, then there are plugins which are used to crop images, then there are watermarking plugins and so on.
While selecting plugins make sure the plugin itself is having good ratings and reviews so that we can install them without any need to worry. Plugins might sometimes cause for image duplication and increases the storage requirements. Some plugins might over optimize the images and the image appears to be blurry and dull.
Don’t use more than one plugin to do the same thing. That is if you have installed say two plugins which do the same job of compressing images, sometimes the images might compressed two times and will be looking very unusable. Make sure you use plugins only when you really need them. Actually there is not need of optimization plugins at all if the images are optimized while making and before actually uploading it.
3. Image Optimization:
This is one the most important point to be considered. Are you properly optimizing the images? If no, you should get started on How to properly optimize images before uploading it into WordPress. Using images as such without giving attention to the images resolution and image size can really hinder the performance of the website and can seriously slow the website down.
Images are having large size than all the html that you have in your post. Html is just plain text and doesn’t take much space. That is why plain text pages are loading faster than the ones with tons of images.
There are three key attributes that we should be noting about a picture before uploading it: The Resolution and the Image Size and Image Format.
Consider a case where the Theme specifies an image of resolution say 800 by 400, but you have uploaded an image with a resolution of say 1600 by 800. The image size will also be increasing. The theme only needs a 800 by 400 images so the images larger than that need to be drawn down to the needed resolution which will consume resource and causes webpage to load slower. Imagine the condition when there are not just one but many images on a single post? Yes the webpage has to make all the images to the needed resolution before displaying it.
So using images with apt resolution is a very important point to be noted. Next one is compression of the images. Images can be compressed in order to reduce the image size by a huge margin. Even the smallest size savings matters. If the webpage size is less, the faster it will load.
Another thing we should be aware of is the format of the image. There are many image formats out of which JPG, PNG, GIF etc being the most widely used. Here is a small figure to help you select the correct format:
JPG vs PNG vs GIF
Image Courtsey: Google Developers
How Do I Optimize My Images:
I love to use images in my blog posts. These are methods I follow to make my Images well optimized for Blog Posts.
- Always make sure to use the correct resolution of images needed by the theme:-
That is if i have an Image with higher resolution I bring it down to my original resolution. And if the image is smaller, I place it in a canvas with my needed resolution. In that way there is no need for the webpage to enlarge or shrink my images.
- Using proper Image format and compression:-
I mainly use JPG for my images and there is roughly any need to use PNG images. JPG images are most suitable for websites and blogs. I use JPG with around 60-80 quality scale. I use Adobe Photoshop for all my graphics and the Best way to create optimized Images is by making use of “Save for Web” Option and choosing the required quality.
4. Number of Images:
Number of Images used inside a post is also pretty important. Having a small blog post and a lot of pictures inside it would not be a good idea. If images dominate posts then the overall UI experience will be harmed. Always make sure to use images whenever its necessary. Don’t let images overpower the written content at all times.
There will be times when we need to use more images, example can be in the case of a tutorial. In case of Tutorials and How to guides, Images are really helpful in such cases and it really helps the readers get the clear cut idea. In such cases it is always advisable to use optimized images.
In normal blog posts, only use images when it is necessary. Also make sure the images used are having some relevance with the topic you are writing. In a long post, using images between few paragraphs can really help the readers stick to the post.
Images are important for improving the aesthetic of the post and at the same time images convey more information than a paragraph of plain text. Make it a habit of using images within blog posts. Images should be properly optimized before uploading. Images can really effect the page loading speeds of a website. So a poorly optimized image can always be causing a slow down for the website.
Also make sure to use good quality images, this will really add to the look and feel of the website. Also don’t over optimize an Image, this can blur or pixelate the images.