1 / 6

5 Things you need to know about images*

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 .

polly
Download Presentation

5 Things you need to know about images*

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 5 Things you need to know about images* *Images for the web

  2. 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

  3. 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.

  4. 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.

  5. 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 ofquality • 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.

  6. 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

More Related