la menu
<DCH/>
back

Common Image Types Used in Web Development

HTML5
5 min read

Image Types

Images play a crucial role in enhancing user experience and providing visual appeal to websites. The keyword “image types” refers to the different formats in which images can be saved. Each format possesses its own unique characteristics that impact factors like file size, quality, transparency support, and animation capabilities.

By understanding image file types, web developers gain greater control over how images are displayed on their sites while optimizing performance and ensuring compatibility across browsers, devices and screen sizes. Web developers have to make informed decisions when it comes to balancing image quality with loading speeds – a vital consideration for improving website usability.

Raster vs Vector Graphics

  • Raster images are made up of colored pixels, which makes them perfect for photo images. But this means that raster images cannot be enlarged or they will pixelate or become blurry. When editing a raster image, you may save it at the same size or smaller.
  • Vector images are made of points with lines that connect them. Vector images are can be scaled up or down without any loss of image quality, and are perfect for icons, and logos.

The most common image types used in web development include:

JPEG / JPG (Joint Photographic Experts Group)

A JPG file is a raster-based image that is good for web and print applications. The format has good compression capabilities and universal support across various platforms and devices. JPG uses lossy image compression, which reduces the file size by removing unnecessary or redundant information.

Filename extension .jpg or .jpeg.

Pros

  • Universal browser support
  • Full color Spectrum
  • Good file size
  • High quality images
  • Good for print and web

Cons

  • Lossy compression
  • Does not support transparency

PNG (Portable Network Graphic)

The PNG file is a raster file, but uses lossless image compression which means that no data is removed at the sacrifice of file size. The key benefit to using a PNG file, is that it supports transparency.

Filename extension .png.

Pros

  • Transparent backgrounds
  • Universal browser support
  • Full color Spectrum
  • High quality images
  • Supports animation through APNG (Animated Portable Network Graphics)

Cons

  • Larger file sizes

WebP

WebP is a modern image format that was developed by Google. Webp is a raster image format that is both lossy and lossless. Webp images are usualy smaller in filesize compared to JPG and PNG, but still retains the same quality.

As with all lossy compression formats, some image quality may be reduced.

Filename extension .webp.

Pros

  • Smaller filesize compared to either JPG or PNG.
  • Supported in all modern browsers
  • Supports transparency
  • High quality images
  • Supports animation

Cons

  • Not supported in older browsers
  • May not be able to preview images on your computer
  • Some image quality loss

SVG (Scalable Vector Graphic)

SVGs are vector images, which means that they are computer generated. They are made up of mathematical equations that uses points, and lines to draw geometric shapes. Vector images can be scaled up and down without losing any image quality. This makes vector graphics ideal for scalability and precision, this includes logos, icons and illustrations for web and print.

Since SVGs are computer generated, the code is technically XML, they can also be edited in a text editor, and the code can be placed right in HTML files.

Filename extension .svg.

Pros

  • Scalable
  • Code based - SVGs can be manipulated with CSS and Javascript
  • Can be animated
  • Very lightweight
  • Great for printing graphics
  • The code can be placed right in the HTML page, removing any need for an external image file

Cons

  • Not photo image quality
  • Not compatible with older browsers

GIF (Graphics Interchange Format)

The GIF image format are most often used to express emotions and conveying short animated messages across the internet. The primary capability that made GIFs so popular was that they can be used to create short animations.

Filename extension .gif.

Pros

  • Good for small looping animations
  • Good for adding personality to a web page

Cons

  • Can have a very big filesize
  • In some cases it may be better to convert a GIF to a video file for better compression.

The Web Development Basics Series

This post is part of the Web Development Intro Series.

Click here to continue to Graphics and Image Editing.