Types of images for websites

Types of images for websites.

In this post We are going to list the types of images for websites. It is an issue that must be paid attention to since it influences the time it takes to load the pages and the disk space on the server. It is the prologue to another in which we will mention Linux tools to prepare the images.

I told you a few days ago that, at the request of an old friend, I temporarily resumed web development (an activity that I abandoned because I couldn't stand clients) and I am using that to tell you about different open source solutions.

Types of images for websites

A site has two types of basic content, text and multimedia. The information about that content travels over the network in bit format and the browser reconstructs it separating what are words from images, video or sound.

In the case of images, Different formats are used that contain information about the location of the pixels, colors, dimensions and compression algorithm.

The most used image formats on websites are:

  • APNG: It was developed by Mozilla to give animation capabilities to the PNG format. Ideal for animations that are not synchronized with other resources such as sound. It works with a much broader color palette than GIF.
  • AVIF: It should not be confused with the AVI video format. Its name is an acronym for AV1 Image Format and it encodes AV1 bitstreams into the HEIF (High Efficiency Image File Format) container. It has better lossy compression than JPG and PNG and better lossless compression than WebP. Supports animations and transparency. As a negative point, it should be noted that the image must be downloaded completely to be viewed, although this is compensated by the shorter download time.
  • bmp: I mention the classic Windows image format, just to tell you that you should never use it. Although there are some ways to reduce their size, they tend to be quite heavy images.
  • GIF: It is a format created to compress 8-bit graphics without loss. It is ideal for simple animations and images on websites destined for places with slow connections, as it allows you to display the full image, but in lower quality when it has not finished downloading.
  • JPEG: It is a lossy compression format widely used for photos, although it is not recommended for graphs or diagrams.
  • PNG: Also widely used, it offers lossless compression, excellent transparency handling, and a broader color palette than GIF.
  • svg: Instead of pixels, this format defines the images with a series of commands that build them. It is ideal for graphs and diagrams that require precise representation.
  • TIFF: It is not a widely used format since it generates very heavy images. Although it can be useful if what you want to embed on the site are scanned images. You can store multiple images in a single file.
  • WebP: This format for still images and animations produces smaller files with or without compression than JPEG and PNF. It can also be used to create animations. Although it is supported by all modern browsers, older ones are not compatible.

What image to use for each case

  • Photography: The ideal is to use JPEG or WebP. In case the size is critical, it is better to use the second, if you want to ensure compatibility with older browsers, the first.
  • Icons: The best compatibility and size ratio is offered by PNG. WebP can also be used (taking into account that only modern browsers support it) OR SVG if we want to use a vector image that we will show enlarged elsewhere on the site.
  • Screenshots: Taking into account that in this type of images we need the text to be seen, it is best to use an image with lossless compression such as PNG or WebP. You can test how it looks using JPEG.
  • Diagrams and graphs: Here, without a doubt, the best option is SVG, although we can put an image in PNG format as a backup.

Leave a Comment

Your email address will not be published. Required fields are marked with *

*

*

  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.