Web Front-End Programming
HTML Image Types
Images are files that are used to render a collection of pixels on a screen that provide a visual.
Copyright By PowCoder代写 加微信 powcoder
There are countless image formats, but we will explore some of the key ones used in web browser. This is a great article.
JPG PNG GIF BMP SVG
Raster Images
Raster image files display an image where every pixel has a defined colour (e.g. RGBA) and position.
When enlarged, the original image is just stretched, leading to a lower quality image.
GIF BMP JPG PNG
Vector Images
Vector image files store a series of geometric instructions (lines, shapes, colours) that are rendered on-the-fly by the browser. Vector image files are typically used for icons & animations.
Vector images do not distort when enlarged
Two Key Categories
Two Key Categories
Source: Psu.edu
Vector Images
Vector images, specifically SVGs, will be discussed in a separate SVG lecture.
Raster Images
General Format
Compression
Yes, Lossless
Yes, Lossy
Yes, Lossless
Image animations*
High resolution photos
Most non- photo use cases
* Nowadays a .webm is an increasingly common format for animations than GIF
Base64 Encoding
Instead of loading an image as a resource via HTTP, you can instead encode it directly into your page of API response.
This reduces the number of HTTP connections required (there is a finite amount that can run in parallel), but does increase the overall amount of data needing to be processed, and will naturally slow down the request being made that contains that information.
Commonly used for SMALL images.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com