Image optimization is something which is often ignored by the web-owners specially the newbie bloggers. But when they realize the importance of image optimization on their blog, its already too late. Off course it is a herculean-task to optimize hundreds or may be thousands of images after they realize the importance of image optimization.
So you should start image optimization on your blog from the very beginning.
And if you made the mistake of not optimizing your blog images, start doing from right now.
- 1 How Things Work Under The Hood
- 2 Why Do You Need To Optimize Blog Images At All ?
- 3 How To Optimize Blog Images?
- 3.1 1.) Image File Format
- 3.2 2.) Image Dimensions
- 3.3 3.) Image Compression
- 3.4 How To Compress Your Images To Reduce Their Size?
- 4 Final Thoughts :
How Things Work Under The Hood
Every image you add to a post or page on your blog has to be downloaded by the users from your hosting servers to their devices.
So the equation is straight forward – More the size of your image. more will be the page load time and less will be the speed of you blog.
Why Do You Need To Optimize Blog Images At All ?
There are loads of reason behind the image optimization.
- Image optimization can increase your page load times.
- Slow loading pages can increase your bounce rate as the user leaves your site in frustration.
- Un-optimized and bulky images increase the size of your pages and ultimately slow down your website. Proper optimization can make a huge difference in speeding up your WordPress site.
- Large sized and heavy images also increase your bandwidth and hence the hosting expenses.Specially if you have high traffic blog.
- Large and un-optimized images will end up using more storage on your web-host server which can cost you more money.
- By using proper optimization practices you can save that bandwidth and storage which ultimately save your web-hosting expenses.
According to a survey conducted by Strangeloop a one-second delay can cost you 11% fewer page views. 16% decrease in customer satisfaction and 7% decrease in sales.
How To Optimize Blog Images?
During the image optimization process you need to focus on three main factors.
- Image File Format.
- Image Dimensions.
- Image Compression.
In the below section you will walk through each image-properties one by one and understand their importance in image optimization. Also you will learn how to deal with these image properties to reduce image size.
1.) Image File Format
There are different types of formats available for images. Some of the most popular are JPEG, JPG, PNG, SVG, GIF image formats.While the bucket is full out there, the formats matter most to bloggers and web-masters are : JPEG(JPG), PNG and sometimes GIF.Lets have a look at them.
A) JPEG (JPG) Format :
(Best For Images With Many Colours)
JPEG is the most popular and most widely use format on the web. JPEGs are recommended for the images with lots of colours and specially digital photography.These types of images are small in size as compared to PNG format.
B) PNG Format :
(For Vector Graphics And Transparent Background)
PNG format is a lossless format which means it is uncompressed and high quality image format therefore have larger file sizes. PNG format is generally used in web-designing elements such as icons.This is specially used for achieving a transparent background effect for an image.
C) GIF Format :
(Best File Format For Animated Files)
GIF image format got in trend a few time ago and become popular in a very small time-period. The main reason behind this is its small size and comfort for animated files.It is best for low quality images which have few colour concentration and therefore have small file sizes.
Use JPEGs for images with variety and lots of colour and use PNG for simple images like screenshots, icons and buttons on your WordPress blog.
2.) Image Dimensions
The next thing you need deal with is image dimensions. Generally what most bloggers do is, they download a image from the web and upload it to their blog with default dimension and size.
For example :
You need a 700X300 image for your post. But you download a image which has dimensions 1200X800 and upload as it to your blog post. Now what happens is, that WordPress will load the whole image and ask the browser to squeeze it into 700X300 dimensions.
This one is the most common mistake attempted by the bloggers when it comes to images.
Off course, more the image dimensions more will be the image size.Which lead to slower page loads as your users browsers take more time to download the large & bulky images from your server.
No.. No.. No…Don’t tell me that you resize the height and width of the images in your post editor.Because that doesn’t make any difference at all. The web browsers still loads the original image with original dimensions and then it will be resized. So, your page load time is still gonna INCREASE.
So the best way to handle this problem is to resize the image dimensions before uploading it to your WordPress blog. Generally the stock images downloaded from the web are of large dimensions.
So its better to resize them before uploading and using them on you site. There are various tools online as well as offline for this purpose.
Helpful Tools :
These are some tools which can help you through this step.
Just check the content area width of your blog and resize images perfectly according to it.
You can insert images as much small as your text and as large as your whole blog area according to your requirements.But to get your image picked up social networking platforms like Facebook, Google+,Twitter and many others your image size should be 200X200 at minimum.
3.) Image Compression
This is the last but most important image optimization method in this tutorial.
What is image compression?
Image compression is a method to reduce the image size by removing and stripping out its unused colour profiles and unnecessary meta data (date, time, camera etc.) from images. Obliviously the quality of the image will decrease as the size decrease.
So its very important to make a proper balance between the image size and image quality. By using right combination you do not even enhance your users experience but on the other hand also save storage space and server bandwidth (which indirectly means…… money).
How To Compress Your Images To Reduce Their Size?
You can compress your images online, offline, before uploading to your blog and even after uploading to your blog.
There are are various offline tools & software you can install locally on your machine and compress your images before uploading them.
Some Offline Tools for image compression are :
There are also online tools available for image compression. The procedure is simple and similar for all. You upload an image which is to be compressed and then after processing download the reduced and light version of the image from their websites.
Some Online Tools for image compression are :
In WordPress you can also optimize and compress your images after uploading them to your blog with the help of WordPress plugins. There are tons of plugins out there in official WordPress repo, free as well as premium to accomplish this task.
Some WordPress plugins for image optimization :
#Interesting Fact : WordPress automatically compresses your JPEG files to 90% of its original quality, without even telling you. YUP !
Final Thoughts :
Image optimization is very important for, say —
- saving server storage space
- saving bandwidth
- decreasing page load times
- increasing your website speed.
- user satisfaction
- ……..seriously ! you still need more reasons. Shut Up!
So start implementing these methods on your blog images an see the difference on your own.Hope this tutorial served its purpose and educated you enough to take care of image optimization on your website/ blog.
As always, like and share this article with your near & dear ones.
If you have any question as well as any advise regarding this article, you can drop a line below in the comment section.
You can can connect with us at Facebook