A Chapter for <img>![]()
前言
这一章讲了 Web 图片 format 的各自的优缺点和elements of 's attributes.
Section1:Q1:How the browser work with images?
- First, the Browser retrieve the HTML page, but doesn't get the images.
- Then, retrieved the first image, and then moves on to the next image
- ...
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.