how web pages work Archives

What is an extension? Easy to understand explanation of the differences between JPG, PNG, GIF and WebP – Part 2

Free Download Mp4Gain

What is an extension? Easy to understand explanation of the differences between JPG, PNG, GIF and WebP – Part 2

“JPEG (Jepeg)” which is more suitable for photographic data

* The yellow background color is shown below the image saved as “.jpg”.

[Advantages of the JPEG format] -Abundant
number of colors that can be expressed-
Data capacity
light-
Ideal for photo storage format- Suitable for printing images

[Disadvantages of the JPEG format] -The
Image deteriorates every time editing and saving is repeated
-Transparency processing is not possible.

JPEG is an abbreviation for “Joint Photographic Experts Group”.

The large number of usable colors and light data capacity make it ideal for storing photographic data.

On the other hand, every time it is stored, it is compressed and deteriorates. “When I edited the same image many times, the image got dirty.”

To avoid this, keep the original image and edit the copy. If you need to make corrections, copy the original image again and so on, the deterioration will be minimal.

Also, since it does not support transparency processing, it is not possible to say “I want to crop only here and show the site background”. The image above has a white circle in the background cut out, but in JPEG format it is displayed in white instead of the background color.

By the way, there are several types such as “.jpg”, “.jpeg”, “.jpe”, etc., but they are all in JPEG format. Originally, multiple strings were used for the “length is up to 3 characters” link, but now there is no such limit.

There is no difference in the data, so you can basically use “.jpg” or “.jpeg”.

High-quality “PNG (ping)” for the web

* The yellow background color is displayed below the image saved as “.png”.

[Advantages of PNG format] -Abundant
number of colors that can be expressed
-It is possible to process transparencies-
Suitable for displaying on the Web-Sin
deterioration even after repeated storage

[Disadvantages of the PNG format] -The
data capacity is heavy
-Color changes when printing

PNG is an abbreviation for “Portable Network Graphics”.

An important feature is that the background can be transparent while maintaining almost the same quality as a JPEG image. In the image above, you can see that the part that was just shown in white in JPEG becomes transparent and the background is shown in yellow.

Unlike JPEG, there is no “image quality deteriorates every time it is saved”, but the data capacity is large and can be more than double that of JPEG.

Also, since it does not support color expression for printing, if you print a PNG image as is, you will get “that? Somehow the color is light …”. Just the “when it comes to not so big image on the home page”, let’s think.

“GIF” that moves even if it is light

* The yellow background color is displayed below the image saved as “.gif”.

[Advantages of the GIF format]
-It is possible to express the animation -It is possible to
transparency processing-
Suitable for icons with a small number of colors-
Does not deteriorate even after repeated storage

[Disadvantages of GIF format] -Only
Up to 256 colors can be expressed.
colors change when printed

GIF is an abbreviation for “Graphics Interchange Format”.

There are many things in common with PNG, such as transparency and web rendering, but the most important feature is that you can still create animated images. Although it is not video data, it can be moved in the same way as a flip book.

The advantage is that the capacity is very light, but the maximum number of colors that can be displayed is 256, which is small.

Doesn’t the image above feel a bit rough compared to JPEG and PNG? Especially easy to see is that the red logo on the dog’s chest has been replaced by an approximate color to make it yellowish.

It seems to be better suited for data like logos, icons, and menu buttons than those with lots of colors like photographs.

By the way, there seems to have been a long-standing debate as to whether the reading is “gif” or “gif”. It seems that some countries read it as “gif”, but for now it seems that it has settled in the form of “gif is common”.

Free Download Mp4Gain

Mp4Gain Main Window

Mp4Gain Features

Free Download Mp4Gain

What is an extension? Easy to understand explanation of the differences between JPG, PNG, GIF and WebP

What is an extension? Easy to understand explanation of the differences between JPG, PNG, GIF and WebP

An extension that is one of the essential information for the production of the home page.

The extension refers to characters like “.jpg” and “.png” attached to the data name, but “I really don’t know what the difference is …” “By the way, I was too worried about Some people may say:” There is no such thing. ”

This time, I will explain in an easy to understand way the points of “what is the extension in the first place”, “how to read jpg” and “the advantages and disadvantages of each”.

What is an extension?
Image extension
“JPEG” which is ideal for photographic data
High-quality “PNG” for the web
“GIF” that works
even though it’s lightweight “WebP” Newcomer promising next-gen that can do anything
You can be at the forefront of “AVIF”
abstract
What is an extension?

The extension is a character such as “.jpg”, “.png”, or “.exe” that is displayed at the end of the data name. This represents “what kind of data is this data” and “what application should be used to open it.”

It’s like the nationality of the data, as we would say, “I’m from Japan, so let’s speak Japanese.” “Since .pptx is a PowerPoint extension, this data is PowerPoint. Let’s open it using.” The extension is important to open a file, right?

So if you accidentally delete the extension when renaming the file, or forcibly change it to a different one, you won’t be able to open the data, so be careful.

Rewriting the extension of an image from “.jpg” to “.gif” without using image editing software is like changing your nationality by handwriting directly on your passport without the formal procedure.

The extension may not be familiar to those who primarily use smartphones. However, just because it is a specification that is not shown to the user, all the photos they took, the apps they downloaded, the images shown on the home page, and the site have extensions.

Image extension

The extension indicates the type of data, but the extension of the image is especially important to use it correctly. The right one depends on the number of colors and the medium to be displayed (be it a site or a paper).

Also, unlike other extensions, one of the features is that there is almost no “open only with this software” with basic image data. In the nationality analogy mentioned above, it is an image of “from a country that uses multiple languages.”

What is WebP?

What is WebP?

Next generation image format!

WebP is a still image format recently developed by Google Inc. in the United States. WebP is also called the next generation image format, such as Apple recommended “JPEG 2000” and Microsoft recommended “JPEG XR” and has the following characteristics.

▼ Features of WebP

Development Goals: Reduce Display Speed and Reduce Website Traffic
Superiority over JPEG – smaller file size and less deterioration in image quality
Maximum number of pixels: 16383 x 16383 pixels
Extension: “.webp”
The history of WebP! Refocused on the Core Web Vitals announcement
Although WebP is positioned as a next-generation image format, it has surprisingly been around since 2010.

▼ History of WebP

September 30, 2010: First WebP specification published on the official Google Chrome blog
2011: WebP support when Google Chrome 9.0 and Android 4.0 are released
2013: Opera 15 was announced to support WebP and not APNG when Opera 15 launches.
From the information above, we can see the fact that the history of WebP is surprisingly old and that the proportion of supported browsers has steadily increased. So why is WebP getting so much attention now?

The reason is the official announcement of Google on May 28, 2020! We announce that we will add Core Web Vitals, which includes image display speed as a component, as a UX index to assess search ranking starting in 2021.

So now is a good time to implement WebP, which was developed to reduce display speed and website traffic. Check out the following articles for details on vital web basics and how to improve usability.

What is the impact of Core Web Vitals, to be featured in 2021, on Google search results?
What is the impact of Core Web Vitals, to be featured in 2021, on Google search results?
On May 28, 2020, Google will use Core Web Vitals as a UX indicator for existing signals when evaluating search rankings starting in 2021.

The usability of smartphone sites raises the search ranking! 7 effective improvement points for SEO
The usability of smartphone sites raises the search ranking! 7 effective improvement points for SEO
The “usability of smartphones” is becoming more important as the number of users of mobile browsing increases rather than PC. So in this article, why are you a smartphone user?
Benefits of WebP! Is it better than other image formats?
The biggest advantage of introducing WebP is, after all, the reduction in image weight. As shown below, in theory the image size is considerably smaller than JPEG and PNG.

▼ Slight WebP file size rate

Compared to JPEG: 25-34% smaller
Compared to PNG: about 28% smaller
Furthermore, it supports animation and can handle alpha channels even with lossy compression, making it suitable for exporting transparent images. In fact, when you compare the variety to other image formats, the excellence of WebP is obvious.

▼ Comparative table of 5 types of image formats

Format Compression performance Lossless compression Lossy compression Transparent animation
WebP Very expensive 〇〇〇〇
Raised SVG 〇 × 〇〇
Raised PNG 〇 × 〇 ×
High JPEG △ 〇 × ×
GIF usually 〇〇 △ 〇

What is WebP?

What is WebP?

Google provides, lossless compression, lossy compression is the latest corresponding image format.
The file extension is “.webp”.

WebP’s momentum of the next-gen format war
Typical image formats are “JPEG,” “GIF,” and “PNG,” which have been used as the standard from the dawn of the expansion of the Web to the present. While they have continued to support the Web for a long time, each company has promoted the development and adoption of image compression technology. The most prominent are “JPEG XR” from Microsoft, “JPEG 2000” from Apple and “WebP” from Google that appear in this article. However, due to speculation of competition for market shares, penetration has only stagnated. WebP, which is said to be the next generation standard, will be available in September 2010, so you can see how fierce the conflict was. WebP is now available in most browsers, except IE / Safari, as of August 2020, perhaps due to the format war that had stalled. The following is the result of searching for WebP on the “Can I use …” site where you can check the browser’s compatibility with Web technology. Since Safari will also support WebP in the upcoming version 14, the latest state of supported browsers is IE JPEG only

XR, Safari only JPEG It can be said that 2000 has been completely removed. Especially for JPEG XR, it will be stopped because it is no longer available in the new Chromium-based Edge, and it will be boosted by the improvement of WebP. From this background, the attention of WebP is extremely high and is expected to become an essential knowledge in web production.
f: id: t-ookubo: 20200817172652j: simple

Benefits of using WebP
Advantage 1: file size can be reduced
Excellent compared to conventional key format algorithm Lossless or lossy compression is possible to handle both types, WebP lossless image PNG (lossless compression) about 26% compared to lossy compression image of WebP JPEG compared to File size can be reduced by approximately 25 to 34%. The following is a comparison of information saved in the same image in JPEG / WebP (lossy compression) format. The file size is reduced by approximately 40% to 314KB for WebP, compared to 520KB for JPEG. By reducing the image file size, the page display will be faster and SEO measures and usability (UX) are expected to improve. In the SEO measurement function “Lighthouse” installed in the Chrome development tools, it is evaluated whether or not the image is compatible with the next generation format, and if it does not support it, the “Performance” diagnostic is performed as follows. A warning will be displayed and the score will be deducted from the number of old format images. You can see that next-generation format support is no longer an overlooked item.

f: id: t-ookubo: 20200818202726p: simple

f: id: t-ookubo: 20200817175635j: simple

On the other hand, as you can see from the fact that the evaluation increases in the number of images compatible with the next generation format, richer websites that use more images can expect the benefits of weight reduction. Now that designs that capture the hearts of users with large images, such as hero images, are popular, it can be said that compatibility with WebP is a very effective site improvement measure.

Advantage 2: Supports alpha channel animation (transparent)
Since JPEG is lossy compression, it has a high compression ratio and is effective for saving photos with many colors, but it does not support transparency or animation. On the other hand, GIF and PNG can be transparent and animated, but the compression ratio is not high due to lossless compression. Due to these individual characteristics, it has traditionally been necessary to use different formats depending on the intended use of the image. WebP has removed this barrier.
Lossless compression WebP lossless images support transparency with an additional 22% file size and can be animated using tools. . Also, as mentioned in Merit (1), it has a compression rate that exceeds that of the previous format, so it may not be long before there are no errors as long as the image file is placed in WebP.

Disadvantages of using WebP
Disadvantage 1: some browsers are not supported

You can reduce the size of the image! Next-generation image format “WebP”

You can reduce the size of the image! Next-generation image format “WebP”

Next-generation image format “WebP”

Do you know “WebP”?

WebP is an image format developed by Google.

It has the characteristic that the size of the image can be reduced, and it can be said that it is a format that we would like to adopt to improve the speed of the page as an SEO measure.

This time, we would like to introduce “WebP”, which is called the next generation format.

■ What is WebP?

WebP is an image format developed by Google in the United States. The feature is that the image can be reduced in size, which is said to be “25 to 35% smaller than JPEG and PNG”.

Currently (as of July 2020), about 78% of browsers like Chrome, Edge, and Firefox support WebP, but Safari doesn’t support it yet.

For “Items for Enhancement” in Google Speed Insight, if you use next generation formats such as “JPEG 2000”, “JPEG XR” and “WebP”, the compression rate is higher than PNG and JPEG and the file can be deleted, so the read speed is also high. Goes up “.

■ Advantages of WebP

The advantage of using WebP, as I mentioned earlier, is that it can reduce the size of the image.

As the size decreases, the page display speed increases, which is also a measure of SEO. In other words, WebP is an image format intended to reduce display speed.

In addition to “JavaScript”, “lightening the size of the image” is important to improve the speed of the page, so WebP is a format that we would like to incorporate.

Another advantage is that the image file formats are unified.

■ Disadvantages of WebP

The downside to WebP is that some browsers are not yet supported.

One of the things that is not supported is Safari. Especially in Japan, where the proportion of iPhone is large, many people use Safari, so it is necessary to set an alternative image format.

■ Safari also supports WebP

As of July 2020, “WebP” is not compatible with Safari, an Apple browser. However, it was announced that it will be compatible with the PC version and the iOS version of Safari 14.

This is a welcome update in Japan, which has a large part of the iPhone.

■ Notes and HTML description method when using WebP

Most browsers support images in WebP format, but not 100% of browsers support WebP.

Therefore, for unsupported browsers, it is necessary to describe how to display another image as shown below.

example.png.webp specifies two image formats for an image, and if the image in example.png.webp cannot be displayed, it is specified to display example.png.

What is WebP?

What is WebP?

WebP?

Webp? Wow? Many people read it by mistake, but the correct reading is “Weppy.”

WebP is a still image format developed by Google and the file extension is written as “.webp”.

Currently, it is said to be the “next generation format” and it is attracting attention, but it seems to have been around since 2010.

WebP was created with the purpose of reducing the volume of website traffic, and it is an image format that should be reviewed by those who are considering reducing the weight and speed of websites.

This time, we have summarized the advantages and disadvantages of using WebP.

Advantage 1 of WebP: file size can be reduced
After all, this is the best.

The most important feature of WebP is that the file size is said to be about 25-34% smaller than JPEG.

In fact, I made a WebP image and compared it.

Comparison of WebP and JPEG images

I am creating a WebP image with a compression ratio that does not seem so gross at first glance, but the file size has been reduced by 73%. This is incredible.

If you create a website using images created with WebP in this way, the loading of the site will speed up as the file size becomes lighter.

as a result

Lower user withdrawal rate = Improved UX (user experience)
It is also effective for SEO measures (the faster the site display speed, the higher the evaluation)
Use file capacity resources for other functions of your website
That’s very good.

WebP Advantage 2: Lossy Compression and Alpha Channel Handling
Lossy compression roughly refers to data that cannot be fully restored when compressed data is restored.

JPEG is lossy compression, but does not support alpha channels.

The alpha channel means that it can handle auxiliary data areas prepared to handle transparency information, that is, it can also handle transparent images.

GIF and PNG are lossless compression that supports alpha channel that can export transparent images, but the compression ratio is low.

Like JPEG, WebP is a special format that can export transparent images as GIF and PNG while using lossy compression with a high compression rate. Each format has a shape that makes up for the shortcomings and also supports animation and GIF, so that’s a good point.

Disadvantages of WebP: some browsers do not support it
This is the only downside.

There is only one, but it is a very important point.

As of April 2020, browsers such as Chrome, Edge, and Firefox support WebP.

However, Safari does not support it. Safari on iOS is also not supported.

I think Mac and especially iPhone users usually use Safari, but when they use WebP, they can’t see the images.

Regarding the share rate of the smartphone-only operating system, iPhone users account for more than 40% in Japan. it is. Safari, which is the default browser for 40% of people, cannot be easily ignored.