Attractive and well optimized images are imperative to grab the visitor’s attention. Images are very useful to describe your whole article, and can help you to more share on social media and other platforms.
Why you need to optimize images?
In my mind there are two reasons for that:
1) To reduce the extra load on your server:
To reduce loading time of your website, you must optimize images. If you have high quality images with extra size, then it can generate extra loading time. In modern SEO, loading time plays crucial role, if you want to get better ranking, then your website should be well optimized by images.
2) To gain extra advantage in search engine:
You may not agree this, but images can generate enormous traffic from image-based search engines (Google Images for example). If your images are well optimized with title, description, alt tag, etc. Then you can generate extra traffic from search engine.
Images are a vital part of SEO as well. Well optimized images can give you better placement in search engine. So, if you want to increase your traffic, then you have to learn how to optimize images.
Fortunately, it’s easier than you think once you know what to do and how to do.
In this article, I would like to show you how to optimize images before and after uploading to your WordPress website.
JPEG vs. PNG – Which one is better to use?
Selecting image format is always a big question. Different peoples have a different theory about this issue, but here I’m going to differentiate both formats.
PNG format is a lossless compression file format, which makes it a common choice for use on the Web. PNG is a good for iconic, storing line drawings, and text at a small file size.
JPG format is a lossy compressed file format. This makes it helpful for storing photographs at a smaller size than a BMP. JPG is a common choice for use on the Web because it is compressed. JPEGs are used for photographs and realistic images.
So this is a significant difference between JPEG and PNG format. Now it’s up to you for what purpose you are using images. If you are doing blogging, then my personal choose is to use JPEG format.
This image can tell you more better story.
How to Optimize Images Before Uploading To Your Website
Once you decide the file format, now it’s time to optimize it before uploading to your web server. There are several images optimizing tools through which you can optimize you images.
#1. Adobe Photoshop
Adobe Photoshop is a most effective tool to optimize your images. By the help of this tool, you can resize, edit, and reduce your images size. Here is step by step guide to optimize images in Photoshop.
1) Open Adobe Photoshop
2) Upload or create an image in Photoshop.
3) After editing, go to file menu and click on save for save for web & Devices.
4) Click on Save button.
5) After that, you can reduce the quality of image and file size will automatically decrease.
So this is how you can optimize images with Photoshop.
#2. kraken.io (link)
Kraken is a robust, ultra-fast image optimizer and compressor with best-in-class algorithms.
We’ll save you bandwidth and storage space and will dramatically improve your website’s load times. Here is step by step guide to optimize images with kraken.io.
1) Go to Kraken.io.
2) Click on Try Free Web Interface.
3) Click to upload or drop your images here.
4) Here you can see the original size of the image is 35.67 KB and after optimizing file size reduce by 3.21 % and file size is 34.53 KB.
5) Now click on download and save your image.
Other image Compressors tools to Speed Up Your Website:
6. PNG Gauntlet
10. Tiny PNG
These are some handy tools to optimize your images before uploading to web server. Using these tools, your file size will be reduced and will be less weight on loading time.
How to Optimize Images After Uploading To Your Website
Game not over here, after uploading you have to do many things to optimize them. These are some recommended tips to optimize images after uploading to your website.
#1. Alt Text
Alt tag is very important to describe your images to search engine. There is not hot and fast rule for that, to include it, simply add alt=”this is your alt text” to your image tag. Here’s an example:
<img src=”baby-crying.jpg” alt=”Baby Crying” />
It’s that simple.
Image description also necessary to gain extra traffic from search engine. You can add the description related to your image.
#3. File Size
After uploading, you can resize your file size here as well. There are many handy tools for that. If you are wordpress user then, you can use Plugins for that. These are some best WordPress plugins to optimize your images.
1) WP smush.it
Smush.it offers an API that performs these optimizations (except for stripping JPEG meta data) automatically, and this plugin seamlessly integrates Smush.it with WordPress.
The EWWW Image Optimizer is a WordPress plugin that will automatically and losslessly optimize your images as you upload them to your blog. It can also optimize the images that you have already uploaded in the past. It is also possible to convert your images automatically to the file format that will produce the smallest image size (make sure you read the WARNINGS). It can also optionally apply lossy reductions for PNG images.
3) Lazy Load
Lazy load images is used to improve page load times. Uses jQuery.sonar to only load an image when it’s visible in the viewport.
This plugin is an amalgamation of code written by the WordPress.com VIP team at Automattic, the TechCrunch 2011 Redesign team, and Jake Goldman (10up LLC).
Hammy speeds up your website by generating and serving resized images for your content area depending on content width.
Imsanity automatically resizes huge image uploads. Are contributors uploading huge photos? Tired of manually scaling? Imsanity to the rescue!
The Bottom Line
This is how you can optimize your images after and before uploading to the web server. Never upload images without optimizing otherwise it will be useless.
I hope this article will be useful for you. Please must share your feedback below in comments.
Keep visiting Latest Tutorial for more such awesome posts in the future!