Thursday, February 09, 2012

Animated gif image: How to change size

This in response to a question in Uploading animated .gif image to Blogger post which asked: "please tell me how to change height and width of that image?"

The answer is very simple if you just know a little of HTML. To display a picture on the web, an image tag <img> is used. Thus:

<img src="image URL" />
(just concentrate on img leaving aside src if you are not familiar with HTML)

To change the size, just add the attributes width="some number" and height="some number" (Note: the picture will be distorted {aspect ration changed) unless you keep the ratio constant. The task will be made easier if you just add the width attribute only leaving out the height and the height will be adjusted accordingly.

For example, in the HTML to display the animated gif image in Testing uploading animated gif image (image replicated below),

gif image uploaded direct from Blogger post editor

the following code is used:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_jizoPL28qCY/RuWpFKGWb-I/AAAAAAAAAsY/dMcfQpy7HR4/s1600-h/starandbird.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_jizoPL28qCY/RuWpFKGWb-I/AAAAAAAAAsY/dMcfQpy7HR4/s400/starandbird.gif" border="0" alt="gif image uploaded direct from Blogger post editor"id="BLOGGER_PHOTO_ID_5108675258397126626" /></a>

Now when I add width="350" to the img tag as shown below (note: just concentrate on img and ignore the rest):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_jizoPL28qCY/RuWpFKGWb-I/AAAAAAAAAsY/dMcfQpy7HR4/s1600-h/starandbird.gif"><img width="350" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_jizoPL28qCY/RuWpFKGWb-I/AAAAAAAAAsY/dMcfQpy7HR4/s400/starandbird.gif" border="0" alt="gif image uploaded direct from Blogger post editor"id="BLOGGER_PHOTO_ID_5108675258397126626" /></a>

the image is enlarged as in the image below:

gif image uploaded direct from Blogger post editor

Update: Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.

Source: W3schools: HTML width Attribute.


Now to make it smaller, the attribute width="50" is added instead as in

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_jizoPL28qCY/RuWpFKGWb-I/AAAAAAAAAsY/dMcfQpy7HR4/s1600-h/starandbird.gif"><img width="50" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_jizoPL28qCY/RuWpFKGWb-I/AAAAAAAAAsY/dMcfQpy7HR4/s400/starandbird.gif" border="0" alt="gif image uploaded direct from Blogger post editor"id="BLOGGER_PHOTO_ID_5108675258397126626" width="50"/></a>

and as expected, the animated picture is now smaller:

gif image uploaded direct from Blogger post editor

11 comments:

  1. If the style width is defined, it will override the width attribute. Like:
    <img width="50" src="img-url" style="width:120px;">
    will show the picture at 120 pixels not 50.

    ReplyDelete
  2. thanks dude
    http://jimake.blogspot.in/
    http://risingbloggers.blogspot.in/

    ReplyDelete
  3. Great tips for web designers.
    thank you
    http://www.ictblogging.com
    http://www.loksewaexam.com

    ReplyDelete
  4. nice post.....http://www.wikicyber.in/

    ReplyDelete
  5. Peter, I like your blog. I am a new amateurish blogger.It is sad, but being not IT literate, I have difficulty understanding what I am supposed to do.
    Anyway, do keep up the good work and thank you.

    ReplyDelete
  6. Hi Leehwa,

    Glad you wants to blog. However, don't worry about being IT literate. Most of the blogging platform has now made blogging a user friendly way to blog, especially Blogger. You don't really nee to be IT literate, only how to use what they provided.

    ReplyDelete
  7. Nice post! May I ask how can I change all image to original size? I mean how to config to when posting any images, it'll be displayed with original site. Thanks!

    My site: galaxylol.com

    ReplyDelete
  8. I know of no way to do it all at once for all images. It will have to be done manually for each image

    ReplyDelete
    Replies
    1. You can set general style properties:
      - for ALL images on a page:
      img {width:350px;border:0;}
      - for all images of a special (named) class:
      img.className {width:150px;}
      - for all images/elements of a (named) class:
      .className {width:150px;}
      - for any element with a given id:
      #elementId {width:50%; border:thin;}

      This can be placed anywhere in your page as long as it is surrounded by style tags:
      <style></style> like:

      <style>
      img {width:400;}
      img.thumb{
      width: 150px;
      border:thin;
      }
      table#previews { width:50%;}
      </style>

      <img class=thumb src="mypic.png">

      Delete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics