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),



the following code is used:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s1600-h/starandbird.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s1600-h/starandbird.gif"><img width="350" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/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:

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s1600-h/starandbird.gif"><img width="50" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/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:

Continue reading →

Uploading animated .gif image to Blogger post

I tested uploading animated .gif image to Blogger post at Testing uploading animated .gif image to Blogger.

Conclusion of the test is, if you upload the animated image direct via the Blogger photo upload icon , the image will no longer be animated as you can see from the first image which was uploaded via the via the Blogger photo upload icon in the toolbar of the Blogger post editor.
Read rest of post >>>

Continue reading →

Guest post: Animated gif images, Blogger and Photoshop

Welcome to Steve Wallet, Architect, Blogger Tips and Tricks first guest blogger with his post on working with animated gif images, Blogger and Photoshop. As for me, I only use free software, namely Irfanview and PC Paint, so I hope Steve's post will provide useful information which I am not able to provided for those who like graphic heavy posts or blogs:

---

I saw Peter's article about adding .gif's to blogger (Uploading animated .gif images to Blogger post), and thought I'd give it a try. I wanted to make .gif's and post them directly to my blog, without all the complicated html and uploading from other websites. After much trial-and-error, I have created simple .gif's for my blog.

I use Adobe Photoshop and ImageReady, version 7. This article will make much more sense if you are familiar with Photoshop.

What I've learned so far.
Read rest of post >>>

Continue reading →