Did you know that certain image file types should only be used in specific contexts? Did you know that most website owners seem to not understand which image file types should be used for the web and thereby end up slowing down their site load time which lowers their SEO rankings. This article should help provide a better understanding of images for the web.

There are two main categories for image types

Raster Image Files

The raster image file format is probably the most common on the internet. JPEG, GIF, and PNG are all raster image files. Another way to understand the raster image files is that every pixel in the image has a defined color, position, and proportion based on resolution. And since a raster image is static, it cannot efficiently be resized. This is why you see a lot of "stretching", "distorting", "squishing", and even "pixelated". Most photographs and images on the internet are rasterized image files.

Vector Image Files

Some of the more common vector image file formats are SVG, EPS, and even PDF. As opposed to the raster image files, the design and shape of a vector image is tied directly to a pixel and therefore the images are more flexible. This means that no matter what size (large or small) image is used, the image can proportionally adjust properly.

The Most Popular Image File Types

  1. JPEG (and JPG) - Joint Photographic Experts Group
    JPEG is a raster image file format with lossy compression that makes it great for "shareable" images. The "lossy" aspect means the file size is reduced but also the quality of the image goes down.
    Advantages/Disadvantages
    - Universal Support
    - Low File Size
    - Lossy image compression can lead to poor text
    WHEN TO USE - -
    - Good for blogs and articles, product images, and more.
    WHEN NOT TO USE - -
    - Do not use for infographics and images with lots of small text or tutorial screenshots
  1. PNG - Portable Network GraphicsPNG is a raster graphic and is similar with lossy compression but it offers better text reada
    bility over JPEGAdvantages/Disadvantages
    - Higher quality images and clearly visible text
    - BUT larger file sizes can slow down a website.
    WHEN TO USE - -
    - Good for infographics, banners, screenshots, coupons, and images that use text
    WHEN NOT TO USE - -
    - Don't use for high-resolution photos because it will cause larger than normal file sizes.
  1. GIF - Graphics Interchange Format
    The GIF is another raster graphic format that also uses lossless compression, but it constrains the image to 8 bits per pixel with a limited palette of 256 colors. Most people know the GIF format as a method of animating images and therefore internet-friendly.
    Advantages/Disadvantages
    - Low file sizes
    - Animation support
    - 8-bit limitations means lower image quality
    WHEN TO USE - -
    - Spice up content with GIFs to demonstrate how to complete tasks in tutorials and guides.
    WHEN NOT TO USE - -
    - If you need more than 8-bit color, do not use GIFs
  1. WebP
    An image format developed with better lossless and lossy compression. On a website, switching from JPEGs and PNGs to WebP can not only save disk space but also bandwidth.
    Advantages/Disadvantages
    - Smaller files with better image quality
    - Not supported universally
    WHEN TO USE - -
    - Replace all JPEGs and PNGs to save bandwidth and site speed.
  1. TIFF - Tagged Image File Format
    Most commonly used for storing and editing images that will be used for print. TIFF files tend to be extremely large and do not use compression.
    Advantages/Disadvantages
    - High-quality files for print publishing
    - Large files with no compression
    - Limited browser support
    WHEN TO USE - -
    - Used by scanners to preserve quality of scanned documents
    - Use when preparing images and graphics for publication
  1. BMP - Bitmap
    An outdated image file format that maps pixels with little or no compression. These can be impractical to store or handle.
    Advantages/Disadvantages
    - Griant file sizes with no noticeable gains over WebP, GIF, or PNG.
    WHEN TO USE - -
    - None
  1. HEIF - High Efficiency Image File Format
    This image file format was developed by the team behind MPEG video format and is a competitor to JPEG. Compression is twice as effective as JPEG which make the quality of the image much higher with the same file size. The file format is also based on pixel mapping which means its easy to scale up the image without losing quality.
    Advantages/Disadvantages
    - Quality to file size ratio
    - Currently no browser support and limited OS support
    WHEN TO USE - -
    - Mainly used on phones
  1. SVG - Scalable Vector Graphics
    A markup language to render two-dimensional images right inside the browser. It uses XML text to outline shapes and doesn't rely on raster format. This means SVG images can scale without loss of quality.
    Advantages/Disadvantages
    - Small file size
    - Loss-free scaling
    - Not ideal for complex drawings
    WHEN TO USE - -
    - Ideal for logos, icons, illustrations that are needed to scale in a responsivel design.
  1. EPS - Encapsulated Postscript
    A vector image file used for storing illustrations. EPS is actually a text-based document that outlines shapes and lines with code rather than mapping pixels and colors.
    Advantages/Disadvantages=
    - Lossless scaling
    - Printer support for documents and designs
    WHEN TO USE - -
    Mostly used for storing, saving, and printing illustrations with Adobe products.
  1. PDF - Portable Document Format
    PDFs are files that are based on the same PostScript language that powers the EPS vector image files.
    Advantages/Disadvantages
    - Indexable and searchable text
    - Can include links and interactive elements
    - Lossless scalability
    - Cannot be included in web content, must be embedded
    WHEN TO USE - -
    - Creation of interactive visual reports or infographics
  1. AI - Adobe Illustrator Artwork
    Image format designed by Adobe to save image and project state. Not meant for web and isn't supported in browsers.
    Advantages/Disadvantages
    - All strokes, lines, shapes, filters, are customizable and reversible
    - Scale up or down freely
    - Large file sizes
    WHEN TO USE - -
    - Saving and storing Adobe Illustrator projects
  1. XCF - eXperimental Computing Facility
    Is an open-source file type from the application GIMP. Equivalent to PSD files. Not supported by web browsers.
    Advantages/Disadvantages
    - All paths, files, and shapes are customizable and reversible
    - Lossless image quality
    - Large file sizes
    WHEN TO USE - -
    - Saving and storing GIMP projects
  1. INDD - Adobe InDesign Document
    Native file format for Adobe InDesign. While most would refer this as an image file format, it also has links to visual elements beyond text.
    Advantages/Disadvantages
    - Store large multi-page design projects
    WHEN TO USE - -
    - Used by graphic designers for designing posters, flyers, magazines, and pamphlets.
  1. INDD - Adobe InDesign Document
    Native file format for Adobe InDesign. While most would refer this as an image file format, it also has links to visual elements beyond text.
    Advantages/Disadvantages
    - Store large multi-page design projects
    WHEN TO USE - -
    - Used by graphic designers for designing posters, flyers, magazines, and pamphlets.
  1. Raw Image File Types
    These are file types that come from digital cameras to store full-quality images for later post-production and editing. Most RAW files offer up to 16,384 shades per color channel in a single picture (as opposed to the 256 shades per color channel in JPEG).
    Advantages/Disadvantages
    - Higher quality pictures with more variablity in color
    - Giant image file sizes (sometimes more than 40megabytes)
    WHEN TO USE - -
    - When saving your images from your digital camera for future post-processing and editing.