Images
Images are the media lifeblood of web design. Sites can contain many images in different file types, and how that image will be used dictates what file type it should be, and vice versa.
image.jpg
Joint Photographic Experts Group (JPEG or JPG)
The JPEG is the most-utilized image format in digital publishing. JPEGs can be compressed to low-, medium, and high-quality and, because of this, can showcase images on screens at relatively small file sizes without sacrificing the integrity of the image. File types like JPG, PNG, and GIF are “rastered” and have defined dimensions. This means the image will lose quality when resized, and should not be manipulated beyond its original dimensions (width and height).
- Good for photographs, artwork, or other detailed images.
- When the image has many colors.
- Medium to small file size.
- Rastered file.
image.png
Portable Network Graphics (PNG)
PNGs allow for transparency, an important tool in graphic and web design. Unlike JPGs, there is no compression with PNGs; these files will not lose quality when saved. However, this means PNGs are a rather large file type, and should be used sparingly or on small images.
- Good for graphics like logos and icons.
- When the image has areas of full- or partial-transparency (like drop shadows).
- Large file size.
- Rastered file.
image.gif
Graphics Interchange Format (GIF)
Similar to PNGs, GIFs have certain properties that allow for image effects. This format is most-often attributed to animated files, as it allows for several consecutive frames to be included in a single image file. Due to this, GIFs can be quite large, and may require heavy compression to be feasible in site design.
- Required for animated images.
- Good for simple icons with low-color density (few colors).
- Large file size.
- Rastered file.
image.svg
Scalable Vector Graphics (SVG)
SVGs are an integral component of web design. SVGs, as stated in their name, are scaleable and can be manipulated and styled without sacrificing quality or file size. SVGs are, in effect, “drawn” by the browser in that they are actually packets of coordinates written in a markup language (XML, or Extensible Markup Language). This code is editable, and SVGs can have colors, effects, and animations applied to them.
- Good for vector graphics like logos and icons.
- Resolution-independent.
- Manipulating does not change file size.
- Not good for detailed images, or beyond 2D needs.
- Requires an understanding on how to properly use and implement the code.
development