Southern Listeners

Thanks to Greenlava for this cool gadget. Get yours here

Sunday, October 31, 2010

Image Too Large When Clicked On

This is a very common modification that blogger would like to make but has no direct solution to it. Here's the problem. You have a cool camera, and you want to upload pictures that you have snapped to your blog. But when you have done this, the target image when it is clicked on appears to be very big, huge!

There are two ways to work around this issue. The first one is the obvious and tedious one, to resize your image before you upload to your blog. There are hundreds of online websites where you can resize your pictures. Alternatively, you can use software like Windows built-in MS Paint or Adobe's Photoshop to resize your image. You can even download third party software to resize your image in a batch.

But that is not what this post is about. In this quick tutorial, I am going to teach you how to resize your target image without going through the hassle of resizing your image before uploading. You can simply 'tell' (with machine language of course, but not literally 'machine language') blogger to show your image at a different size. And it's rather easy and flexible, as you can change to a different size whenever you change your mind without having to upload your image all over again.

Here's an example. Take a look at the images below. They are the same image, uploaded only once. But with a nice trickery, the second image opens a much smaller image compared to the first one:

Clicking this will open a huge target image
This one has a smaller target image

So here's how. Let's try this together. Go ahead and upload a really huge image to your post using the compose mode. Then click on Edit HTML. The HTML portion of the image will look something like this in the new editor:
<div class="separator" style="clear: both; text-align: center;">
<a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="240" src="" width="320" />
Note that there are two image URLs in the code above. One corresponds to the size of image before you click on, and the other refer to the size of the target image that we are concerned about. In the HTML above, the URL that we are talking about starts with the tag <a href....>, I have highlighted that line for your convenience. This is how the URL looks:

Now, just before your image name, you will be seeing some number. Usually it is s1600, although there can be some variations like s1600-h and so on. If your image is not that big, you will see a smaller number instead of 1600. Here comes the fun part. Change 1600 into something smaller, and your target image will be much smaller. I wanted my image to be half the size of what it was before, so I'm going to change it to 800. Here's how my URL look like now:

And here's how my HTML portion look:
<div class="separator" style="clear: both; text-align: center;">
<a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="240" src="" width="320" />
So in summary, all you have to do is change the number before your filename to a smaller number in Edit HTML mode. And be sure to change the number on the correct URL, as there are two URLs for one image in Edit HTML mode. Good luck!


  1. Hi! Is there a way to systematically change ALL images to a smaller size??

    p.s. I don't see those codes you're talking about (I'm guessing bc I used an 'outside' blogger template?).


  2. @Cosmetic Passion:

    I can think of a way, using CSS, but I wouldn't recomend this method to anyone because it will pixelate the images. And it will only be suitable if all the images in your blog are of either landscape or portrait mode, not both. Feel free to check it out. Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    .post-body img{
    width: 600px;
    height: auto;

    Change 600 to something else. Cheers.

  3. Hi! I tried it, and already saw my images starting to pixelate from the preview (well, certain happy face emoticons in my post) I didn't bother to press 'apply to blog,' for fear of actual pictures doing the same ....but thank you so much for answering! Appreciate it :)

  4. I want to show screenshots of some web pages. Obviously these are going to be very large. I have tried some different ways of doing this including a separate blog dedicated to just showing large images.

    I would prefer to keep the images in the Dynamic Views platform and the same blog. I notice that you have to click the image twice to see the full view. This is not good for a nice clean presentation. I have even tried using an iframe.

    I am still open to using another blog to host just images. I am just stuck. I have played with this for many hours and can usually figure out a good solution

    What would you suggest? Your input would be appreciated.

    Thank you.

  5. @World Evidence: You don't really have to click twice to get an image to show in full view, in Dynamic View. Once will do. What happens when you click on an image just once? Of course, I'm talking about clicking on an image. If you have chosen any view other than Classic or Sidebar, you'd have to click on the post first, then click on the image. Is this what you're referring to when you said you have to click twice?

    If I were you, I'd definitely stick to one blog. I wouldn't want my traffics to get split. And if viewing large images is a priority, I'd choose the sidebar view so that it won't be confusing for my readers. Cheers.

  6. O.K. YoboY

    Here is a link to show you an example. I want to be able to upload an image and to click it once to show it full(original) size.

    I would really like to show the original full size of the image without clicking the image at all. I am using the flip layout

    I am looking forward to your feedback.

  7. @World Evidence: Clicking it once does open up the image, but you need to click it again to enlarge it. Unfortunately, this is not a Blogger attribute. Rather, your browser is made this way. There's nothing you can do about it.


  8. Thank you for your input, I appreciate it.

  9. @World Evidence: Don't mention it, and happy blogging. Cheers and God bless.

  10. Hello Yoga,
    I have a problem on my blog.
    The pictures are a bit too big on my screen and huge on my mobile device when I use Mozilla for mobile device.
    I would like to know how it is possible to resize automatically all of the pictures.
    I wrote this code, but nothing happened.
    img {
    max-width: 100% !important;
    height: auto !important;
    Thank you.

    1. Hello Cath,

      You will need some script to automatically resize your images (based on the viewer's screen size). CSS is mostly static and will not be enough to achieve this.


Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.