DEV Community: Duck Programmer

Can You Explain the Difference among Image File Formats like JPG, PNG, GIF, TIF and BMP?

Duck Programmer — Thu, 03 Sep 2020 08:57:52 +0000

JPG/JPEG

JPEG stands for Joint Photographic Experts Group.

Difference between JPG and JPEG

You may have seen two types of extension, .jpg and .jpeg. In fact, there is no difference in functionality between the two, just a difference in the extensions. That's because MS-DOS, which is a OS widely used in the 1980s, has a restriction on file extensions of up to 3 characters.

Characteristics

It is a format for compressing image files. Its way of compressing is a little complicated and is lossy compression so you can't restore the image to its original state. If you want to know its compression algorithm, click here.
24-bit color depth is mostly used. 24-bit color is a method of expressing about 16.7 million different colors by assigning 8 bits, or 256 shades, to each of red, blue and green.
You can use jpeg format on web. But its background cannot be transparent.

Purpose

Digital cameras often use jpeg format for their photos. It is suitable for phots. It's not suitable for images with a few colors because of its compression algorithm. Also, it is used on web because of its high compression rate.

PNG

PNG stands for Portable Network Graphics.

Characteristics

It is a format for compressing image files. Its way of compressing is very simple so I'm going to explain the algorithm in next header. You can restore the image to its original state.
24-bit color depth is mostly used.
You can use png format on web. Also, its background can be transparent.

Compression Algorithm

In a image, there are always a lot of pixels that are the same color, pixel by pixel. So instead of storing each pixel data, you can store data like the image below.

Mostly, its compression rate is lower than jpeg.

Purpose

If you want the background of your image transparent, it's the only choice. It is suitable on web.

GIF

GIF stands for Graphics Interchange Format.

Characteristics

It is a format for compressing image files. Its way of compressing is called LZW compression. If you want to learn LZW compression algorithm, click here. Using its algorithm, You can restore the image to its original state.
8-bit color depth is used. So the data size is small.
You can use gif format on web.
You can use gif for animation.

Purpose

It is suitable for images with a small number of colors, like logos and illustrations. It's good on web. Also, if you want to save easy animation for a small size, it's a choice.

Extra Talk

There's been a debate whether the pronunciation is "gif" or "jif" over years. If you have an interest, click here to see the history.

TIF/TIFF

TIFF stands for Tag Image File Format.

Difference between TIF and TIFF

It is the same reason as jpg/jpeg.

Characteristics

It is basically uncompressed format. 24-bit color depth is mostly used. You can't use tiff format on web.

Purpose

Digital cameras often use tiff format for their photos.

BMP

BMP stands for bitmap.

Characteristics

It is basically uncompressed format. 24-bit color depth is mostly used. You can't use bmp format on web.

Purpose

When you want a high resolution image and you don't care the file size, it can be an option. Or, when you want to render or edit an image by programming, it can be one of the easiest formats.

Surprising Facts about How Browsers Interpret CSS

Duck Programmer — Sun, 30 Aug 2020 06:34:54 +0000

First, Let me get straight to the point, browsers match css selectors from right to left. If you already know, you don't need to keep reading. If not, please go ahead.

Wrong Idea

.sample table td {
  color: red;
}

When you see the above code, browsers interpret abd execute it in the following order.

Find the sample class
Find the table element of descendants of 1.
Find the td elements of descendants of 2.
Make the text color red.

If you don't think this order seems wrong, maybe you should keep reading this.

Correct Idea

.sample table td {
  color: red;
}

When you see the above code, browsers interpret and execute it in the following order.

Find all td elements
Check if the table element is present in the ancestor element of 1.
Check if the sample class exists in the ancestor element of the table element in 2.
Make the text color red.

CSS selectors are collated from right to left like the above order.
The rightmost selector is called "key selector".
This means that if you specify a selector with a large range of applicability for the key selector, it will likely take a long time to match it.

What's the Problem

Let's say you wrote the code below.

It will first find all td elements in the DOM, and then it will try to confirm the existence of the table element and the sample class.
Since the text color of the table under the sample2 class remains black, there is no need to find the td elements under the sample2 class.
This is an obvious waste of cost.
If the number of td elements under the sample2 class increases, it may lead to performance problems.

<html>
    <body>
        <div class="sample">
          <table>
            <tr>
              <td>Red</td>
              <td>red</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>red</td>
            </tr>
          </table>
        </div>

        <div class="sample2">
          <table>
            <tr>
              <td>Black</td>
              <td>black</td>
            </tr>
            <tr>
              <td>Balck</td>
              <td>black</td>
            </tr>
          </table>
        </div>
    </body>
<html>

<style> 
    .sample table td {
      color: red;
    }
</style>

So, in this case, it's better to give a red class only to the cells where you want the text color to be red like below.

<html>
    <body>
        <div class="sample">
          <table>
            <tr>
              <td class="red">Red</td>
              <td class="red">red</td>
            </tr>
            <tr>
              <td class="red">Red</td>
              <td class="red">red</td>
            </tr>
          </table>
        </div>

        <div class="sample2">
          <table>
            <tr>
              <td>Black</td>
              <td>black</td>
            </tr>
            <tr>
              <td>Black</td>
              <td>black</td>
            </tr>
          </table>
        </div>
    </body>
<html>

<style> 
    .red {
      color: red;
    }
</style>

Why Does Your Website Look Different In Different Browsers?

Duck Programmer — Sun, 23 Aug 2020 07:00:40 +0000

The Role of Browser

The main function of a browser is to present the user's selected web resources, such as html documents, pdfs, images and so on, by requesting the server to display them in a browser window.
For some documents like html, css need to be interpreted by the rendering engine in the browser.

Reason of Difference

Different browsers have different rendering engines and often interpret source code like HTML and CSS in slightly different ways, so that website looking can be different or not be displayed properly.

Difference in Box

In CSS, each element, such as div, h, p and etc., has a concept of box. A box consists of, from the outside, margin, border, padding and content like text or image.

box {
    width: 400px;
}

Sometimes you might define the width of the content like above, and W3C box model, which is the the main international standards organization for the World Wide Web, defines the width as content width while the Internet Explorer box model, which is one of the major browser and installed in windows computer since the beginning, defines width as content + padding + border.

DOCTYPE

You must have seen the code like below if you have the experience coding html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE html>

DOCTYPE is a declaration of the DTD, which stands for "Document Type Definition" and not an HTML tag.

HTML is a language based on SGML (Standard Generalized Markup Language) and the DOCTYPE declaration and DTD are derived from SGML.
Many web browsers display documents in different ways such as standard-compliant mode and compatibility mode depending on the presence or absence of the DOCTYPE declaration and its content. This switching of the display method is called DOCTYPE switch. A simple explanation of how the DOCTYPE switch works is that if a DOCTYPE declaration is not placed at the beginning of an HTML sentence, it will be adapted to an older version of the browser's display.

HTML5 is no longer a language based on SGML. Therefore, unlike the language used up to HTML4, no DTD is required. However, the DOCTYPE declaration itself is still required in HTML5 since the DOCTYPE switch allows the browser to operate in standards-compliant mode.

Further Knowledge

If you want to know more about the browser, click here to access the best resource that I think.

If you can't click the text link above, copy and paste the URL below into your internet browser:
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Let's Be Familiar with Character Encoding

Duck Programmer — Tue, 18 Aug 2020 07:49:46 +0000

What is "Character Encoding"

A character encoding is a numeric representation of binary numbers so that a computer can handle the characters.

It is also referred to as the character set, charset, and character code.

ASCII (American Standard Code for Information Interchange)

ASCII is one of the Charset which contains Latin alphabets. Since English consists of about 100 characters including not only alphabets but also numbers and other symbols, ASCII is made of 7 bits which can represent 2^7=128 characters. ISO/IEC 646 is the nationalized version of ASCII.

8bits Code

The 8bits character code can be divided into the CL, GL, CR and GR areas as shown in the figure below. In CL and GL, the 8th bit is 0; in CR and GR, the 8th bit is 1; C and G mean control and graphical; L and R mean left and right, respectively.

ISO/IEC 2022 makes it possible to use different character set by using Escape Sequence to invoke another character set to GL or GR area from buffers.

Also, in 8bits code, 2 byte character can represent 94x94 or 96x96 characters while keeping extensibility of the ASCII code. It is accomplished by setting ASCII in GL area and 2 byte code in GR area.

Unicode

Unicode is a character code based on the idea of putting all the world's characters in one table.

Unicode, which is correspondent table from character to code point, is called Coded Character Set, and the one from code point to code such as UTF-8 is called Character Encoding Scheme.

UCS-4, which is known as Unicode, consists of four bytes, which are groups, planes, rows and cells. Groups are from 00 to 7F and planes, rows and cells are from 00 to FF in hexadecimal. Plane00 in Group00 is called BMP (Basic Multilingual Plane) and also known as UCS-2, which is original Unicode. Most of the commonly used letters are included in BMP.

One of the complex structures of unicode is that there are two ways to represent combined characters.
However, there are some exceptions, such as combined emoji, which are only represented using ZWJ (Zero-Width Joiner), a kind of control character, and there's only one way of code to represent the combined emoji.

UTF-8

UTF-8 (Unicode Encoding Forms 8) is a variable length encoding scheme whose length varies from 1 to 4 bytes, depending on the value of the code point. It's compatible with ASCII, highly efficient and the most popular encoding scheme.

The steps encoding by UTF-8 varies depending the range of codepoint. First, divide the code into 1 to 4 parts. And then, add value in the front to make them bytes. Below is the table which shows what value is added.

Below is the example to encode U+611F which is represented by 3 bytes.

Change it to binary
Divide it into 4 bits, 6 bits and 6 bits
Add 11100000, 100000000, 100000000 to each value

UTF-16

UTF-16 is an encoding scheme that encodes code point as 16 bits fixed-length data. Non-BMP characters are expressed using surrogate pairs.　The same range as ASCII is not compatible with ASCII because it is also represented by 16 bits.

Surrogate pairs are a method of handling all code points in 16 bit * 2 pairs since 16 bits are not enough to represent over U+10000 codepoints. There are unused area in BMP which is U+D800 to U+DBFF (1024 bits) and U+DC00 to U+DFFF (1024 bits). Using these pairs to represent 1024 * 1024 = over 1,000,000 characters, which are allocated from U+10000 to U+10FFFF.

The steps converting from codepoint to surrogate pairs is below.

Subtract U+10000 from the code point
Change it to 20 bits by making it binary
Divide it into 10 bits each
Add U+D800(1101100000000000), U+DC00(1101110000000000) to each value