HTML第五章总结

A Chapter for <img>

前言

这一章讲了 Web 图片 format 的各自的优缺点和elements of 's attributes.

Section1:Q1:How the browser work with images?

1. First, the Browser retrieve the HTML page, but doesn't get the images.
2. Then, retrieved the first image, and then moves on to the next image
3. ...

Section1:Q2: How images work?

There are ONLY 3 formats are commonly used in Web:JPEG,PNG and GIF.

• JPEG:Work for continuous tone images, and are smaller. But it throw away some information about the image.
• PNG:Work for images with solid colors, comes in 3 formats:PNG-8,PNG-24 and PNG-32. A lostless format. Smaller than GIF but larger than JPEG.
• GIF:Work for imagine with solid colors.It can represent images with up to 256 colors. A lossless format. Support transparency. Support animation.

One more thing : PNG can have anti-aliased transparent area but GIF can't.

Section2:Attributes of <img>

• src="":its value not only can use relative path, but also URL src is short for "source".
• alt="":If an image can't found, the alt attribute is displayed instead.
• width="" 和 height=""：To size up images.

Section2:Use Photoshop to make changes

Because big image can make your page slow to load, and attribute width="" &height=""doesn't change the file storage. So, you'd better crop it and even make some thumbnails to see a lager version of the image.

For JPEG(photos)
: there are some options needed to change:

• Format :JPEG
• Quality:Medium is OK
• New size: less than 800px:Browsers are 800px ~1200px wide, so the width should less than 800 px.

For PNG(Logo)

• Format :PNG-8
• Colors:256 is OK
• Transparency:checked
• Matte :with the background color

One more thing:
Notice the small box:

It shows times and storage.