Must Do Image Optimization techniques for your Site

submit to reddit

Its very important to increase your blog/site page performance. Your Site performance plays a vital role in your Google page rank, Google search results and obviously visitor engagement.

We need to identify performance best practices for images, which will increase your overall site performance drastically. Lets see some of the techniques used by site moderators to improve their site performance.


1]  Compress the Image :


Compressing the image is a must for a high traffic site.
You can do this in various ways.
If you have Adobe Photoshop, Follow the below Steps,

STEP 1] Open or Create your Image in Photoshop.

STEP 2] After opening image in Photoshop, Click File-> Save for Web & Devices.

Image_optimization_Technique

A pop up window will appear. Select your image quality as “Very High” (Quality – 80). You can see your image got optimized in the panel at left side. Original image size is 626 KB and the new optimized image size is 69.15 KB. Almost 90% of your image is reduced, but still your image retains very high quality.

img_optimize

 


2]  ALT Text and Caption for an Image :


Alternative Text is used by search engine to know more about the image. For Example,

<img src="img1.jpg" alt="Men Hair Style" />

So When search engine reads it, then it knows that this image is about men hairstyle. If you dont specify the ALT Text , then uploading image becomes useless.

Caption is another important criteria for an image. Lets not confuse Alt text with Caption. ALT text is an alternative for an image. For eg : In a Text based Browser or Browser where image options are disabled, ALT Text will be shown instead of the actual image. Caption describes what the image is about like a description about the image.

Image Optimization techniques

Image Optimization

 


3] Re-size it and do not Shrink it:


Your browser will take time to render your re-sized image. So we should avoid resizing it.

Lets say you are resizing an image twittericon.jpg whose original size is 980 * 780 Pixels and if you are resizing the width of image from 980 to 40 pixels and height from 780 to 40.

<img src=”twittericon.jpg”  width=”40″ height=”40″ alt=”Twitter Icon”>

then,

the original image has to be downloaded by the browser before it can display it in the screen with smaller pixels.Your Browser will use more bandwidth and your webpage takes longer to load. This can be easily reduced by cropping/resizing your image. Trust me it wont take much time. We have lots and lots of tools to crop the image these days. One good example is Photoshop.


4] Manage Your Image Sitemap :



You can use a sitemap to provide search engines with metadata about specific types of content on your images.If your site is really large, sitemap is the what search engines will use to filter your website data.

According to Google, ” A sitemap image entry can include the image subject matter, type, and license. ”

you can generate one sitemap for images from online sitemap generators.


5] No Data in your Image :



Another important aspect to get more search result is not to embed data, specific to your post, inside the image.

Below Image is a very good example of a bad image,

badexample

 

 

 

These are very basic 5 steps one must follow to optimize the site images.

Last but not least, read the image optimization suggestions from Google : https://support.google.com/webmasters/answer/114016