Make Blog Images and Post Thumbnails Responsive!

mobile friendly responsive imagesWe have covered most important core concepts of responsive designs and have shared almost every tip to design mobile friendly layouts in blogspot blogs, now it is time to learn how to make blog images to auto adjust their dimensions in mobile phones and tablets without effecting its resolution. Images with large sizes often don't fit in small screen devices and as a result gives a bad UI impression. Images must be fluid in its behavior, their width and height dimensions should be stylized such that they may instantly change their overall size as the browser screen goes smaller or bigger. Our approach is based on CSS @media Queries unlike adaptive image methods which makes use of JavaScript of php.

Tutorial Series
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
5. Using Mobile Friendly Images in Blogger.
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

Why do you need Mobile Friendly Images?

Your blog is being increasingly viewed on smaller, slower, low bandwidth devices. On Such small screen devices your desktop-centric images will load really slowly, which can cause UI lag, and cost you and your visitors un-necessary bandwidth and money.

Therefore responsive images is the only solution to fast load speed and better SEO ranking of your blog.

Image Size differ For Different Pages

Images are used all over your blog. Inside header, footer, sidebar and mostly inside your Post content. You may wish to display small thumbnail images on your homepage posts list but you would choose to display a large image when the post page is viewed. Thus image sizes may differ for different types of pages.

On Homepage: Index Page

index page thumbnail

On Post Page : Item page

image on item page

In order to achieve this we will make use of both @Media queries and Conditional Tags to better control image appearance of our UI.

The images in Header and Post content are often wider in size compared to images in footer and sidebar. So we will style the images accordingly.

Find Parent ID's or Classes

I have written a detailed tutorial that you can read to learn how to find what is the parent class or parent ID of any HTML element on your webpage using browser inspection method.

In our case the parent classes or IDs are as follow:

  1. The Header widgets have classes - .headerright  and .headerleft 
  2. The Sidebar Column has ID (Same for you) - #sidebar .widget-content
  3. The Footer has ID - #lowerbar-wrapper
  4. The Post has the following class (Same for you) - .post

Since we are styling images and we know that all images have the <img> tag therefore we will append img class next to all the above IDs and classes and for images which are hyperlinked we will use the class a img.

Select Device Breakpoints

Now you just need to add the following CSS codes in their respective breakpoints using the CSS Responsive Cheat Sheet (Refer Part#2) . We will choose the 786px breakpoint which is ZONE4 . You will add the following CSS code inside this zone as shown below:

/*-----iPads, Tablets ZONE4 ----------*/

@media only screen and (max-width:768px) {

.headerright a img,.headerleft a img{
  max-width: 75%!important; 
  margin-left: 0;
  position: absolute; height:auto;
  left: 30px;}

.post a img, .post img{max-width:95%; height:auto;}

#sidebar .widget-content a img , #sidebar .widget-content img { max-width:98%; height:auto;}

#lowerbar-wrapper a img , #lowerbar-wrapper img { max-width:98%; height:auto;}

}

Importance of max-width:

A max-width property of 98% will ensure that your image width may not exceed 98% of to parent container width. Never keep this property equal to 100% else the images will overlap the parent container.

In short your image will be neatly displayed on screen, no matter how big or small it be.

Display different sized images on Homepage and Posts

If you want to display thumbnails on homepage and larger images on post page or if you wish to float images to left on homepage but display them center aligned on post page then  you can make use of the conditional tags and enclose the media queries inside it as shown below:

You will need to add this code just below ]]></b:skin>


HOMEPAGE IMAGES or Thumbnails:

<b:if cond='data:blog.pageType == "index"'>

<style>

/*-----iPhone 2G, 3G, 4, 4S Landscape View ZONE2 ----------*/

@media only screen and (max-width:480px) {
.post a img, .post img {width:95%; float:none; height:auto; clear:both; margin-bottom:10px;}
}

/*-----iPads, Tablets ZONE4 ----------*/

@media only screen and (max-width:786px) {
    .post a img, .post img {max-width:50%; height:auto; float:left; margin: 0px 10px 10px 0px;}
  }
</style>
    </b:if>

In the above code:

  • the first breakpoint (480px) will give your homepage post images a 95% width and center alignment in small smartphones having width less than 480px.

Result on 480px screen - Homepage:

center aligned responsive thumbnail image

  • the second breakpoint (786px) will float your images to left of text and give it 50% max width on homepage.

Result on 786 screen - Homepage:

left aligned responsive thumbnail image

POST IMAGES:

Now for Images inside Posts you can use the following breakpoint code that we already shared earlier

/*-----iPads, Tablets ZONE4 ----------*/

@media only screen and (max-width:768px) {

.post a img, .post img{max-width:95%; height:auto;}

}

  • The code above will center align your images and give it 95% of maximum screen width

Result: Image on Post pages

image

You can do wonders with these conditional tags and customize your blogs for mobile devices the best you can! =)

Need Help?

You will never be able to succeed with responsive designs unless you remove confusions by asking us questions. Post your questions below and I would love to help you with all your queries. I hope this series may help you better understand some complex web designing terminologies and techniques. Wishing you guys the best of blogging and life! =)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

20 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. For a long time I have been waiting for this post and finally you made this. All series apply in my blog successfully without facing any problem, but only this post I am facing a little problem.

    In this system I can be able to make my blog post page Image responsible. When I apply to Homepage thumbnail image for 480px media quarry, it's work only for image size but not work image align center. I want to make 480 size media quarry image always center position. Please help me dear brother. If you help me, I'll be grateful to you very much. Thank you..

    My blog address - http://www.prozokti.com

    ReplyDelete
    Replies
    1. Hi buddy,

      I am so glad you tried all series. Well done :)

      I tested your blog in small screen sizes. Your images are perfectly aligned in center and left aligned in tablets. Everything seems ok. What is it that you can not figure out? Can you send me a screenshot?

      Delete
    2. Thank you for replying by spending your valuable time. In fact, this problem has been solved. There were an additional section of my blog and finally I found it. There is no problem in your post.

      Delete
  2. Salam Mohammad,

    As always great i have started reading your blog 2.5 years before than get some inspiration started my career as IT. Now Alhamdulillah i am enjoying great life as a Developer and running my own company too. There are some people to whom i think my ideal and its not wrong if i say from all of them you are one who give me inspiration. God bless you

    ReplyDelete
    Replies
    1. W.salam dear Ahmed,

      May Allah bless you even more with success. Keep working hard and make us all proud. I feel so honored to have received your kind compliments. Means a lot :)

      Delete
  3. Mohammad, I want to heartly thank you for these series posts. Specially the breakpoints points...

    Now I have made my template responsive. Can you please now see template's responsiveness? Please tell me if it's responsiveness looking good in you eyes.

    Note for backlink- http://bloggerguidersv3.blogspot.com

    ReplyDelete
    Replies
    1. Always a pleasure dear shivansh.

      Loved the animations. They look great, especially the menu scroll effect.

      Would appreciate more on image and graphics try to work on it. I have found some mbt images there but you can create quality graphics using photoshop, it will help harness your graphics skills more. You have excelled in CSS now excell in jQuery/Graphics and ofcourse php. Try your hand there too buddy

      All my best wishes are with you dear =)

      Delete
    2. Thanks Mohammad. Yeah! I am learning JavaScript from Code Academy and I will surely learn PHP and Photoshop. :)

      Delete
  4. My Blogger is search4unow.blogspot.in I want my Blogger like my Blogger tricks from mobile view. Pls Admin Help Me...........................
    I want to create a Computer and networking trick site with this templates. Admin help me............. I m begginer. So pls Give me the solution Step By Step...

    ReplyDelete
    Replies
    1. Learn, Practice and Apply - this is the only key to success. If someone does it for you then what is so good in it? =)

      Delete
  5. Admin pls pls help me. I will vry vry thankful to u

    ReplyDelete
  6. Dear Mustafa
    I have a blog/site, That has blocked by Google Search engine, If i try or visitor try to open that browser can't and saying that this website having a maleware.
    Recently i bought Domain. When i removed .com from my blog so google has no issue with that.
    in other words
    google has no problem with lollywoodin.blogspot.com
    has has problem with lollywoodin.com
    what that means please reply me.

    ReplyDelete
  7. While I have recently changed the theme. The issue I am facing is the thumbnail stretching out and not being responsive... I am not confused

    ReplyDelete
  8. admin plz help me im so tring to this code but its not work tell me how to make a resposive image in not work my blog

    ReplyDelete
  9. Hi, this image stuff on the homepage of the mobile version is really confusing. Pls, how can I ensure that the image shows on the mobile homepage. www.nairaleaks.com

    ReplyDelete
  10. This is what I need. Thanks Mohammad for this article.

    ReplyDelete
  11. I have installed blogger auto image seo script on my blog. This script has added + to image names but when i hover over the image, the image title is shown with %2B repeatedly. How i can get rid of this. Please Help.

    ReplyDelete
  12. Assalam o Alaikum,
    Inserting the code inside the media Query doesn't help. Is there any other way to fit post's image inside thumbnail image div.

    ReplyDelete
  13. Assalamualaikum,
    I need help here. I am using standard template from blogspot but I put coding for body image. Width 100% and height auto. It works fine with mobile view but in desktop view, the vertical image look so big (I set original when uploading image).
    How can I set the size for desktop view in px but mobile view as what I did?

    ReplyDelete
  14. How to make embeded audio/video player responsive in Blogger blog posts??

    ReplyDelete