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, or just add the height attribute only.
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/AVvXsEgqf_4Gy9YqFLNf83qi8TpgcSgV5dqP8sQ2fs4OnPc84R4wr4OvFgDQbH2Rpgquu0hle5MmxgeZkGUtB6hJ7HKAsNl5tKHqkH7DVXUsjZRsAebuxVjhFVAxxUwQzr2AB-NLRAAgUQYErdg/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/AVvXsEgqf_4Gy9YqFLNf83qi8TpgcSgV5dqP8sQ2fs4OnPc84R4wr4OvFgDQbH2Rpgquu0hle5MmxgeZkGUtB6hJ7HKAsNl5tKHqkH7DVXUsjZRsAebuxVjhFVAxxUwQzr2AB-NLRAAgUQYErdg/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/AVvXsEgqf_4Gy9YqFLNf83qi8TpgcSgV5dqP8sQ2fs4OnPc84R4wr4OvFgDQbH2Rpgquu0hle5MmxgeZkGUtB6hJ7HKAsNl5tKHqkH7DVXUsjZRsAebuxVjhFVAxxUwQzr2AB-NLRAAgUQYErdg/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/AVvXsEgqf_4Gy9YqFLNf83qi8TpgcSgV5dqP8sQ2fs4OnPc84R4wr4OvFgDQbH2Rpgquu0hle5MmxgeZkGUtB6hJ7HKAsNl5tKHqkH7DVXUsjZRsAebuxVjhFVAxxUwQzr2AB-NLRAAgUQYErdg/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:
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/AVvXsEgqf_4Gy9YqFLNf83qi8TpgcSgV5dqP8sQ2fs4OnPc84R4wr4OvFgDQbH2Rpgquu0hle5MmxgeZkGUtB6hJ7HKAsNl5tKHqkH7DVXUsjZRsAebuxVjhFVAxxUwQzr2AB-NLRAAgUQYErdg/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/AVvXsEgqf_4Gy9YqFLNf83qi8TpgcSgV5dqP8sQ2fs4OnPc84R4wr4OvFgDQbH2Rpgquu0hle5MmxgeZkGUtB6hJ7HKAsNl5tKHqkH7DVXUsjZRsAebuxVjhFVAxxUwQzr2AB-NLRAAgUQYErdg/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: