Images

In web design, Images bring web pages to life. Sites can contain many different types of images. Different file types serve different purposes.

jpg icon 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. This means that smaller JPEG files can be displayed on mobile screens without sacrificing the integrity of the image. Keep in mind that file types like JPG, PNG, and GIF are “raster” images and have defined dimensions. Being a raster image means the image loses quality when resized or changing the 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.
png icon 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.
gif icon image.gif

Graphics Interchange Format (GIF)

Similar to PNGs, GIFs have certain properties allowing for image effects. Often, GIFs are used to animated files since several consecutive frames can be included in a single image file. However, 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.
svg icon image.svg

Scalable Vector Graphics (SVG)

SVGs are an integral part of web design. SVGs are scaleable and can be manipulated and styled without sacrificing quality or file size. SVGs are “drawn” by the browser using packets of editable coordinates written in a markup language (XML, or Extensible Markup Language). 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 markup language.

development design file image