5 Image Formats for Website Optimization

This article contains an introduction to several image formats that are commonly used on websites so that we can choose the most optimal one.
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
memilih format gambar untuk optimasi website
Updated: 31 March 2021
favico digitalizer

Hi Digital Buddy! This time we will share information about several image formats that are commonly used on websites.

The purpose of choosing an image format

We need to know several existing image formats so that we can choose which one is the best and optimal in terms of website performance but can still meet the needs of our website visitors.

Image format type

There are several image formats commonly used for websites, namely JPEG, PNG, GIF, SVG and WebP. Below is an explanation of each image format.

1. JPEG or JPG format

JPEG stands for Joint Photographic Experts Group , which is the name of the organization that developed the image format.

When you save an image as a JPEG, some data from the image is permanently lost and deleted to reduce the file size. This method is called " lossy compression ".

This image format is the most widely used because the output file size is relatively lower and has high compatibility, can be opened in many browsers and applications.

The JPEG format is suitable for use on photos or images that do not have a transparent background.

Sample photos with JPEG format, medium compression, 300x300 pixels, 8kb
Sample photos with JPEG format, medium compression, 300x300 pixels, 8kb
Example photos with JPEG format, high compression, 300x300 pixels, 4kb
Example photos with JPEG format, high compression, 300x300 pixels, 4kb

There is no difference between JPEG and JPG. JPG extension is used because especially on Windows OS it uses a 3 letter extension.

2. PNG format

PNG stands for Portable Network Graphic, has high compatibility from various browsers.

PNG uses a compression method known as " lossless compression ".

With lossless compression , the image quality does not change but has a smaller file size.

Lossless compression only removes image data that is not very important, so when compared to lossy compression , the reduction in file size is relatively less.

The PNG format is widely used for digital image art such as logos, icons, and " flat images " because it uses 24-bit color and has the ability for a transparent background.

What is meant by " flat image " is an image that only has 1 layer, and generally has relatively few colors, unlike photos.

Example image with PNG format, transparent background
Example image with PNG format, transparent background

If we compare the image file size between JPEG & PNG, in general the PNG file size will be larger, but if we compare the " flat image " image , it is not certain that PNG will be larger in file size.

3. GIF format

GIF stands for Graphical Interchange Format and has high compatibility when opened from various browsers.

The advantage of an image in the GIF format is that we can create a short animation or video without sound made of several images.

Animation or Video Examples of images in GIF format
Animation or Video Examples of images in GIF format

The animated image above is an example of the animation we made for the article Making Sticky Headers and Shrinking Logos in Oxygen Builder.

If the image we use is low resolution, then the animation or video output file will also be small. But for a certain condition maybe we still use GIF instead of video format.

However, video compression technology is getting more advanced, and when we compare it with the .mp4 video format, the result is that the video file size in the GIF format is smaller, but the difference is not too significant.

But because GIF is an image format, the code on the website will use the image tag to display it.

Likewise, search engines will classify the animation or video as an image and not a video.

4. SVG format

SVG stands for Scalable Vector Graphics. SVG contains data in XML format that can output graphics / images.

For those of you who are users of Corel Draw or Adobe Illustrator, of course, you are no stranger to vector-based drawing characteristics.

Because SVG is basically a vector, images with this format have high image sharpness even though the size is enlarged so that it is very suitable for use for logos or icons.

Example of an image with an SVG format, try to enlarge or zoom to find out whether the image will blurry or not.
Example of an image with an SVG format, try to enlarge or zoom to find out whether the image will blurry or not.

The file size depends on the amount of data contained in the XML.

When less color and components make up, the size is relatively smaller than other formats, but if it gets more complicated, the size can be larger than other formats.

5. WebP format

WebP stands for Web Picture format, an image format developed by Google.

Unlike JPEG which uses lossy compression , and PNG which uses lossless compression , WebP is an image file format that contains image data with lossless compression and lossy compression .

Because WebP uses these 2 types of compression, the file size can be reduced by between 20-40% when compared to JPG & PNG.

WebP has a much smaller file size than JPEG & PNG and can use transparent backgrounds. The downside of WebP is its lower compatibility than JPEG and PNG.

At the time of writing, the Safari 13 browser cannot read the WebP format, so images cannot be displayed normally. ( Apple Adds WebP Image Support in Safari 14 ).

diskusi-digital-300x200.bk
Sample photos in JPEG format, 300x200 pixels, 9KB
diskusi-digital-300x200.jpg
Sample photos with WEBP format, 300x200 pixels, 7KB (file size smaller than JPEG format)

IMPORTANT! We also noticed that if we use the WebP format for the Open Graph image (og: image), the website link that we share on Facebook doesn't output the thumbnail image, but only a blank box. So for those who use WebP as the featured image of your article, you should specify og: image with other formats, we recommend using JPEG.

Closing

Of the several image formats that we have described above, here we summarize in a character table some image formats and their features.

Character table of several image formats and their features
Character table of several image formats and their features

These are some of the image formats commonly used for websites. By knowing the character of each of these image formats, we can choose the best so that our website will be more optimal.

Which format do you usually use? Do you have any tips on choosing image formats for websites? Please leave a comment buddy in the comments column below.

Happy Digitalize your life!

Leave a Reply

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

Latest Article

How to Apply Headroom.js on WordPress and Oxygen Builder
This article explains how to use Headroom.js in WordPress and Oxygen Builder, but you can also apply it to any website.
Read more...
How to Create an Off-Canvas Menu with Oxygen Builder
This article explains how to create an off-canvas menu on a website using the WordPress CMS and the Oxygen Builder plugin
Read more...
Create Sticky Header and Shrink Logo in 3 Step with Oxygen Builder
This article contains a tutorial for those who use Oxygen Builder to make sticky headers and logo images shrink.
Read more...
How To Create Dynamic Slider with Flickity in Oxygen Builder Repeater?
This tutorial explain how to create dynamic slider using flickity combining with Oxygen Builder Repeater element.
Read more...
Flickity on WordPress & Oxygen Builder
This article explains how to create sliders & carousels with flickity on WordPress & Oxygen Builder or any other website.
Read more...
Convert Website to Oxygen Builder (Case Study)
Do you want to convert a website using Oxygen Builder? This article are examples of cases and performance improvements from the optimization results.
Read more...
Oxygen Builder, the Best WordPress Page Builder Plugin?
This article contains an introduction to Oxygen Builder as a page builder plugin in WordPress.
Read more...
COMPLETE PACKAGE OF WEBSITE DESIGN & DEVELOPMENT
Digitalizer offers website design & development services for company profiles, online shops, event organizers, educational institutions or other fields. You don't need to think about domains, web hosting / servers, DNS, email, design, development, security and other technical issues. Just prepare your website content, we do the rest.
All website design & development packages include 1 year maintenance!
Free Consultation
Back to top
logo digitalizer - en
© 2011 - 2021 Digitalizer My ID
cross