Digital data is organized into files. These files must have specific structures (formats)
in order to be interpreted by other software, such as a web browser. Web browsers understand
several formats for displaying images.
A file's format is often declared as an extension at the end of the file name. The HTML page you
are reading right now is named image-formats.html, and the .html portion is the extension
indicating that this file can be read by any software that understands HTML.
Common image formats for the web include JPG, PNG, GIF, and SVG.
Each one is useful for specific purposes.
JPG for Photos
JPG (or JPEG) format images are best for files with photo-realistic image data.
A large amount of detailed information can be stored in this format, with
compression options to find the best balance of file size to quality.
The JPG format does not support transparencies.
PNG for Graphics
PNG format images are best for digitally-created graphics which may need transparency.
It is a good choice for logos, banners, icons, and most other non-photo graphics on
a web page.
When in doubt, try PNG.
GIF for Animations
GIF format images support transparencies and animations. This makes GIF the ideal
choice for animated icons such as progress spinners.
However, the file size of a GIF image increases drastically with larger color palettes,
and the algorithm that compresses GIF files for saving may lose quality in detailed images.
Thus GIF format images should be limited to simple animations with few colors.
SVG for Flexibility
All the other image formats store data based on pixels
arranged in a grid that represents the image.
Resizing pixel-based images means losing or extrapolating the data,
which may cause quality problems.
SVG stands for scalable vector graphics,
which describes how the format is different.
Vectors (or "paths") are calculations for determining how an image is displayed.
This makes SVG ideal for images that may need to be scaled (or "resized") frequently,
such as fonts.
Because working with SVG takes a completely different approach, it is not
very common, even though it is very useful for a wide variety of image purposes.
In this course we will not see many SVG images, but it may be worth studying
if you like the design side of the web, and it would be very useful if you
wish to practice making your own fonts.
Practice
Choose the format you believe is most appropriate for the image displayed.
There are 6 images to practice.
Great! SVG is a good choice for images that may need to be resized frequently, such as type faces.
Try again. What is a good choice for images like fonts that need to be resized frequently?
Great! JPG is a good choice for detailed, full-color photos.
Try again. What is a good choice for detailed, full-color photos, with no need for transparency?
Great! PNG is a good choice for detailed images which need transparency support.
Try again. What is a good choice for detailed images with transparencies?
Great! GIF is a good choice for animations.
Try again. What is the only choice in the list that supports animation?
Great! PNG is a good choice for logos, banners, or other images which may need transparency support.
Try again. What is a good choice for logos, banners, or other images that may need transparencies?
Great! JPG is a good choice for detailed, full-color photos.
Try again. What is a good choice for detailed, full-color photos, with no need for transparency?
_%E2%80%93_Frontansicht%2C_31._Mai_2011%2C_W%C3%BClfrath.jpg)