Understand images for web developers [part 2]

If you haven't already seen the first part, I recommend clicking here first. Now, before we dive in, I want to address an important topic about images that I missed in our initial discussion. I'll make sure to cover it thoroughly this time.

Image Format

You guessed it right: It's an image format. Let's go through some basic terminology.

Before delving into each specific format, I'd like you to familiarize yourself with a few terms.

• Bit: is how the computer stores the information ( 0 or 1 ); in terms of images, they need to store the wide range of colors in representations of 0 and 1

• Transparency: let's put it into a practical example: you want the image of the background to be transparent, so the color in the background can shine through

• Animation: very self-explanatory, an image that can be moving from one direction to another.

Let's unbox the GIF

Have you ever wondered why GIFs are like digital artists with an 8-bit

In a GIF image, each pixel is represented by a single byte of data. A byte is 8 bits, and it can represent a value from 0 to 255 (or 2^8 possibilities). Since the color palette in a GIF can have up to 256 colors (indexed from 0 to 255), each pixel in the image can be associated with one of these index values. So, each pixel in a GIF image is essentially a reference to a color in the palette, and it only requires one byte to store that reference

However, a limitation of GIF lies in its restricted color options, owing to its origin in 1987. Nevertheless, its advantageous feature is its compact file size, as each pixel consumes only a single byte, making it particularly well-suited for short animations.

Let's unbox the PNG

In the RGB color model, each of the three primary colors (red, green, and blue) can have 256 different intensity levels. Here's how it works:

• Red can have 256 levels (0 to 255).

• Green can have 256 levels (0 to 255).

• Blue can have 256 levels (0 to 255).

To determine the total number of possible color combinations, multiply the number of levels for each color channel by:

256 (levels of red) \ 256 (levels of green) \ 256 (levels of blue) = 16,777,216

So, there are 16,777,216 possible color combinations in a 24-bit color depth, or 2^24, which is approximately 16.77 million colors. This is why PNG images with 24-bit color depth can represent such a vast range of colors.

When we represent the rgb in binary code it will look like this
Binary format: 00101010101010 1010101010101 101010101010110101
Decimal      :    132              158               222

Let's unbox the JPEG

It also allows 16.777.216 colors like in PNG, no transparency and no animation, but the big difference I want to point out is how they compress the image

Compress the Image

We already know how a pixel represents an image; let's do some math

We have a small picture with 349 widths and 400 heights (in JPEG or PNG format) with 3 bytes in each pixel; in total, we have 418,000 bytes (418 KB). That's just too much for a small image. At this point, we'll compress it to reduce to 61.517 bytes

Here is an algorithm called Run-Length Encoding to compress GIF and PNG

Instead of displaying it as a series of pixels, we can change it to a series of counts and colors ( just to give you an idea of how it works, not to dive deep into it)

And JPEG uses a mathematical formula to compress images

JPEG analyzes the pixels in groups and uses a mathematical formula to find the factor that best represents those pixels. The JPEG file stores the factor, not the individual pixels When the browser displays the image, it will plug those factors back into the formula. Because the formula is not 100% correct, some of the original information will be lost due to lossy compression

Here are the same areas of a picture with different formulas.

If you choose the best formula to compress your picture, your file size will be larger

Compression between PNG and JPEG

Always optimize our images for our users

I have a few recommendations for you to optimize images before using them on the web. Think about our users who have a mobile device with a limited network connection and trying to load our images on the web :)

• https://jpeg-optimizer.com/

• https://tinypng.com/

  

There are a few hard rules I keep for myself that I want to share

• Try to choose simple illustrations over highly detailed photographs

• Always lower JPEG image quality (30%–60%)

• Resize the image based on the device (desktop, laptop, iPad, phone, etc) we'll discuss that in the next topic )

SVG format

SVG doesn't store pixels; it stores a series of shapes to be drawn. The file contains commands to tell the browser what geometric shapes to draw. It looks a lot like HTML (below)

The advantage of SVG is that it is scalable, making it a great fit for logos and icons that have to look good at any size.

Here are some facts about SVG:

SVG is such a broad topic that it fits neatly into a single chapter. If you want to gain deeper knowledge, feel free to click here for further exploration.

Conclusion

In this post, we have discussed all of the file types that web browsers use and all of the foundations around all image types ( GIF, PNG, JPEG, and SVG)

In the next post, we'll discuss some interesting topics around images on the web. Until then, take care, and remember to join my next blog for more intriguing insights!