Blogger Templates

Blogger Templates, Tips and Tricks. We Walk the Talk Blog.

3:19 PM

Blogger Images Sizes 2

Posted by Leathergloves on Monday, December 7, 2009

Optimize your images for the entire width of your blog post.





Why and how?

  • Why?

  • Empty spaces at the side of the images takes up useless spaces and readers need to scroll down more to view the rest of the post or posts. We want the readers to have the full visual impact in one glance to see as many high resolution images (if few images are in one post) or as many thumbnails as possible in a page (if many images are in one post).

  • How?

  • Remember the Blogger Images Sizes post I talked about sXXX & sYYYY. Look for the code after you added the image. E.g.



    Remove width: XXXpx; height: YYYpx; so that it will not resize.

    Substitute the s400 (large), s320 (medium) or s200 (small) with either
    s72-c, s110, s128, s150, s160, s200, s220, s320, s400, s640, s720, s800, s1024, s1280, s1440, s1600

    The longer side will be resized to the stated pixels with the shorter side proportionally.


Rule Of Thumb:
  1. For portrait (vertical) images, try to squeeze two High Quality (HQ) images side-by-side first with size s400. If they wrapped to the next line, then try s320. If s400 can be squeezed into one line, then try a higher resolution like s640 until the images wrapped to the next line.


  2. For landscape (horizontal) images, usually you will not be able to squeeze two HQ images side-by-side. Then you might as well use a higher resolution than s400 to make full use of the entire width of the post body.


  3. For many images are in one post, e.g. over 10 images, my recommendation is to make one or two of the best images with the highest resolution (see point 1 & 2) and use thumbnails for the rest like s200 and below. You could also end the post with a high resolution image as well to create an impact.

E.g. of of blowing up a landscape image


Next Post: Twitter Blog Feeds Automatically

0 comments:

Copyright © 2024 Blogger Templates 123. All rights reserved.

Home | About | Contact | Privacy Policy | Disclaimer