MMDT1021 Chapter 6 Notes - page 4
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="images/world.jpg" width="137" height="145"
alt="Globe image" border="0" align="right" /> |
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. ![]() |
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="images/world.jpg" width="137" height="145"
alt="Globe image" border="0" align="right" hspace="25"
/> |
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.
![]() |
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="images/world.jpg" width="137" height="145"
alt="Globe image" border="0" align="right" vspace="25"
/> |
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.
![]() |
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="images/world.jpg" width="137" height="145"
alt="Globe image" border="0" align="right" hspace="25" vspace="25"
/> |
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.
![]() |
Scaling an Image
True Image. |
Code | Result |
---|---|
<img src="images/world.jpg" width="137" height="145"
alt="True globe" border="0" /> |
![]() |
Double size. What happens when you scale up? Pixilation occurs and the image quality looks poor. |
Code | Result |
---|---|
<img src="images/world.jpg" width="274" height="290"
alt="Bigger globe" border="0" /> |
![]() |
Double width, half height. |
Code | Result |
---|---|
<img src="images/world.jpg" width="274" height="72"
alt="Squished globe" border="0" /> |
![]() |
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="images/world.jpg" width="68" height="72"
alt="Incorrect thumbnail" border="0" /> |
![]() |
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="images/worldsm.jpg" width="68" height="72"
alt="Thumbnail" border="0" /> |
![]() |