SHARE

Website Friendly or Web Optimized Image

A website friendly image is also know as web safe image . These type of images do good impact on webpage loading time. A fast loading webpage is important in SEO . You can convert a normal image to website friendly image in adobe Photoshop with the following steps .

Convert Normal image to Optimized

Open abode Photoshop and select the image which you want to convert . To download sample image right click on the link and select “save link as” to save image on desktop. After download image open it in adobe Photoshop .

Look At Image Size and Dimensions

In top menu go to “Image” and then go to image size . See the image size in this window . In Pixel dimension  “width” is 2000 pixel and and image “height” is 1125 pixel  . In Document size “width” is 14.51 cm , “Height” is 8.16 cm and image resolution is 350 pixel . Image size is 1.15 MB .

 

width and dimensions before optimization
width and dimensions before optimization

 

Now notice that 1.15 MB image is not website friendly . When you place this size image on webpage ,page loading speed time increased . To reduce image size and make it website friendly follow these steps .

Check image loading time

Go back to main menu then go to “File” . Click on “Save for web and devices” .Look at the lower left corner of this window . You can see image properties here .

 

image2

In this image see the highlighted area . 215 sec@56.6 kbps is the image loading time . It means this image take 215 sec to load . Which is too much time .

To optimize image follow these steps .

In “Image Size” fill maximum “width” 600 pixel . This is because normal screen display size for webpage is maximum 600 pixels .

Set the image “Quality” to 68 . You can set it anywhere within 60-100 . 60 means miner low quality and 100 in full quality . In some type of image you have no need to full quality such as blog images .

  • Image type is “jpeg
  • Check the box “Optimized” .
  • Image Quality to “Bicubic Sharpner” .

 

web friendly image
web friendly image

Check image loading time again

After do all change look at again on the lower right corner for check the image loading time . Now you can see the image size is 68.61 K and loading time of image is 13 sec @ 56.6kbps . It means when you use this image of web page , image loading time is reduced 20 times .

With this way you can create a web optimized image for your website . Image optimization is slightly different for different type of images such as logo image, favicon image , image for post , image of product , thumbnails , background image etc.