Images on the World Wide Web: Tips and Practices for Smart Use

Images are an essential part of our online experience.

From web design to social media posts, images help us communicate, entertain and inform. However, large image files can slow down websites and reduce the overall user experience.

To ensure images are optimized for the web, it’s important to understand the basics of image size, resolution, and format. In this article, we will take a closer look at these three aspects and compare the most commonly used image formats (JPEG, PNG and WebP).

Basic Terms

Pixel: A pixel is the smallest unit, the minimum element of an image. If we imagine an image made of small squares, then each corresponds to a pixel, and the color of the square determines the color of the pixel in the image.
Image Dimensions: The dimensions of an image are measured in pixel (pixels), in height and width. We have e.g. Dimensions 1024*768 or 800*600 pixels.
Color Depth: It is a number of bit required to store the color of each pixel. If we have a monochrome image (two colors, white – black) it is sufficient for 1 -bit (2^1) to store information. If we have 24-bit (3 bytes) available for each pixel, then we can have a picture that can display 2^24 = 16.7 million different colors.
Image Size: It is measured in bytes or KB or MB and concerns the space that requires the image file for storage. It results from the product of the pixels of the height and the width of the image, e.g. 800*600 = 480,000 pixels. If for each pixel we use 2 bytes (16-bit) for color information, then the file size of the image will be: 480,000 * 2 = 960,000 bytes. When an image has more pixels then it has more information, so better sharpness – detail.
Image resolution: is the density of pixels, that is, the number of pixels in 1 inch (dots per inch, dpi). The analysis is characteristic of digital images. On the Web and in general on the computer or mobile screen we use the 72 DPI resolution. If the image is intended for printing, the proposed resolution is 300 dpi. The more DPI has a picture, the greater its analysis, the more pixels we have in an inch, so the better the image quality we have.
Image compression: The process of reducing the volume of the image file while maintaining its quality. This process is necessary on the world wide web, as larger image file sizes slow down the site’s loading speed

Image formats on the web

The JPEG (Joint Photographic Experts Group) format is a popular image format because it supports lossy compression. This means that some data is lost in the compression process, resulting in smaller file sizes and faster load times. JPEG is a great choice for photos and images with a lot of detail, as lossy compression has – most of the time – minimal effect on image quality. However, it is important to note that repeatedly saving a JPEG image can result in a loss of quality. This is because every time the image is saved some data is lost. This is because JPEG uses a compression algorithm that discards data that is less likely to be noticed by the human eye.

The PNG (Portable Network Graphics) format is another popular format used on the Web. Unlike JPEG, PNG uses lossless compression, which means that no data is lost during the compression process. This makes PNG a great choice for images that require high levels of detail, such as logos. But PNG files, most of the time, are larger than their JPEG counterparts. This may result in slower loading times.

The WebP format is a newer image format developed by Google. It supports both lossy and lossless compression, meaning it creates smaller file sizes while maintaining high levels of detail. WebP is quickly gaining popularity because it produces high-quality images with small file sizes. In addition, WebP supports transparency, which makes it an ideal solution for images that require a transparent background.

Conclusions

The higher the resolution, the sharper and more detailed the image will appear. However, higher resolutions result in larger file sizes. When optimizing images for the web, it’s best to aim for a resolution of 72-96 pixels per inch. This resolution provides sufficient detail while keeping file sizes small.

So, which image format is best for the web? The answer is that it depends on the specific use case. For photos and images with a lot of detail, JPEG is a great choice because it produces small file sizes with minimal impact on quality. For images that require high levels of detail, PNG is a good choice due to its lossless compression. And for images that require small size and/or transparency, WebP is a great choice.