MMDT1021 Chapter 5 Notes - page 10

 

Adding Space around an Image

No Space
Code Result
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" />
This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. Globe image This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

hspace="25"
Code Result
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" hspace="25" />
This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. Globe image This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

vspace="25"
Code Result
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" vspace="25" />
This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. Globe image This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

hspace="25" vspace="25"
Code Result
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. <img src="world.jpg" width="137" height="145" alt="Globe image" align="right" hspace="25" vspace="25" />
This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.
This is some text before the image. This is some text before the image. This is some text before the image. This is some text before the image. Globe image This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image. This is some text after the image.

Scaling an Image

True Image.
Code Result
<img src="world.jpg" width="137" height="145" alt="True globe" /> True globe

Double size.  What happens when you scale up?  Pixilation occurs and the image quality looks poor.
Code Result
<img src="world.jpg" width="274" height="290" alt="Bigger globe" /> Bigger globe

Double width, half height.
Code Result
<img src="world.jpg" width="274" height="72" alt="Squished globe" /> Squished globe

 

Scaling to half size.  The image quality is fine, but this is not recommended.  Why not?  Consider file size and download time.

The original file world.jpg is 14.5KB

Code Result
<img src="world.jpg" width="68" height="72" alt="Incorrect thumbnail" /> Incorrect thumbnail

 

This is the correct method.  Resize the image in your graphics editing software to half size.

The new, reduced size file worldsm.jpg is 2.2KB.  This is a major reduction in file size and download time savings.  Notice that reducing an image's dimensions by 1/2 reduces file size 4 times smaller or more.

Code Result
<img src="worldsm.jpg" width="68" height="72" alt="Thumbnail" /> Thumbnail