Everyone who runs a blog will use images in their articles sooner or later.
They enhance the visual aspect and it is proven that posts with a great text structure and a correct usage of images perform much better than “text-only” posts.
Depending on your WordPress theme and the importance of images in your posts, you will eventually encounter a problem though.
Images have a huge influence on your websites speed performance.
If you don’t optimize your pictures well enough, your website is going to slow down overtime.
Since Google recently announced that the website speed is going to be an important factor for ranking, you definitely want to make sure that your pictures perform well.
The following tips will help you to optimize your wordpress images for better online performance.
#1: Choose The Correct Image Dimensions.
Wordpress is an amazing custom management system that helps you with a lot of tasks regarding your website. However, it is also known for automatically resizing your images in order to fit your post or page.
What sounds convenient in theory can turn into a real problem.
The reason: Due to the resizing, the final image that appears on your blog will look worse than your original file.
If you ever worked with a graphic software like Photoshop and wanted to adjust the image size, you hopefully know that it’s not recommended to simply drag the picture into the software and just change the dimension directly to your prefered resolution.
Improper resizing causes a loss of quality. That’s why you start to resize the image in several small steps. For example: If your image is 1600 x 1600 px and your prefered resolution is
400 x 400 px, you start by changing the dimension to 800 x 800 px first (divide it by half) and then set your final resolution.
However, several WordPress themes are manually adjusted to only display a fixed image resolution. If your intended image is smaller or bigger than that, WordPress will simply auto-resize it.
Depending on the resolution difference, the outcome can be horrible.
If your WordPress theme uses custom image resolutions, adjust them accordingly.
You should be able to find the necessary information about it in the instruction or help files.
Alternatively, you can use a web application such as “Firebug”.
Firebug is a Firefox Mozilla extension which allows you to easily check the source code of any given website that you are browsing. If you are using a different browser, try searching for similiar addons in “web design” or “web developement” categories.
In Firebug, all you have to do is navigate to your own website, activate the plugin in the top right of your browser. After that, you can use the selection tool to click on the image that you would like to know the resolution of.
In the layout tab, it will show you the exact size of the final image resolution.
If you adjust your images according to that size, your picture will not loose any quality, since WordPress doesn’t have to resize it.
If you think that this step is too complicated, you can still use a WordPress plugin that takes care of this issue. A good plugin that I can recommend (current date: 4th April 2015) is: Imsanity.
Imsanity is a (currently) stable plugin with an amazing 4.8 out of 5 stars rating that automatically adjusts the size of images for you. No need to figure out how to scale pictures before uploading.
2#: Choose A Suitable Image Format.
As soon as you know the right dimension for your images, it is a good idea to think about the different file types we can use to render images.
First of all we have to define the most important formats that are being used on the web.
Those are JPEG, GIF and PNG.
A simple rule of thumb is to use JPEG for photos and complex images with a lot of colors and gradients/blends. If your image does not fit this criteria, choose PNG.
However, there are some more things to consider when it comes to the right format:
JPEG is by far the most popular format when it comes to images. It is used for complex images with lots colors, gradients and blends. If your picture is a photograph, you should go with JPEG.
The GIF format is special since you can also create animated graphics with it instead of static images. It is however also recommended for images that only utilize one or two colors such as simple drawings.
Note: This format is especially useful when your picture has a transparent background.
Compared to the GIF format, PNG produces much better-looking pictures for the same limited-color images. It’s also smaller in size, which is a bonus.
However, certain older browsers do not support this format and transparent PNG’s are said to cause problems with several browsers as well.
Depending on the usage, all of the above formats can have their unique advantages and disadvantages. When it comes to file size, which is one of the most important aspects, we still have another solution which can be applied to all of the formats mentioned above.
3#: Compress Your Images Before Uploading.
This step is one of the easiest ways to minimize the file size, yet many people either don’t know about it or forget it when they are working on an article: Compression.
Luckily, there are endless websites that offer exactly that: Image Compression.
You simply have to upload or drag and drop your image to the website and the rest happens automatically. Most of these websites even offer additional options and functions to optimize your images even further.
Here is a list of the most popular image compression websites. I personally use them and I can only recommend the usage of such tools.
Optimizing your images is a vital part of on-page optimization. If you spend enough time on choosing the most suitable format and make sure to compress your files, you can rest assured that your pictures are not going to be an issue regarding the file size ever again.