Transcript Image tags and introduce different formats

+
5 Things you need to know about
images*
*Images for the web
+
1. PNG is the best*
*most modern, robust, and web-friendly format.

PNG: Portable Network Graphic

Most advanced compression algorithm

Combines the best features of GIF and JPEG
+
2. GIF and JPEG are very different
 GIF: Graphics
Interchange Format
 Limited to 256 colors
 Great for shapes,
diagrams, and charts
 Small files size, but
crisp edges, uses
Run-length encoding
 JPEG
(.jpg): Joint
Photographic Expert
Group
 millions of colors
(photo-realistic)
 Still the standard for
digital photography
 Compression leads
to loss of quality.
+
3. Actual Image Size vs. Displayed
Size

The stored image file has an actual size Width X Height.


people.jpg might be 4000px by 3000px and 12MB
HTML and CSS can change the displayed size

<img width=“400” src=“people.jpg” alt=“funny”>

people.jpg could be as small as 0.2MB if it were resized to
400px wide

File size matters because of mobile web browsing.
+
4. Scaling-up small images leads to
loss of quality

A 100px wide image will look terrible if it is scale up. See
example

PNG, GIF, and JPEG cannot be scaled up without loss of
quality


Keep the original (large) image just in case you need a larger
version in the future.
SVG: Scalable Vector Graphic is the 4th format widely used
on the web. Images are stored as geometric functions instead
of as pixels.
+
5. Aspect ratio is really important
for photos
 If
you scale an image (especially a photograph), be
sure to scale the width and height proportionally.
 Common




aspect ratios:
4:3
old-fashioned computer monitors
3:2
old-fashioned 33mm film
1.618 : 1.000
(8:5)
golden ratio, common for artwork
16:9
modern wide-screen photos