All language subtitles for 21 - Image formats.en

- Let's talk about the image file itself.

To put an image on a webpage,

it has to be in a file format

that web browsers will understand

and there are several options.

We keep inventing new ones

in a quest for the perfect balance between tiny file sizes

and gorgeous-looking images.

We want as much data as possible,

so that it'll look amazing.

But we want as little data

as possible so images will download faster

and not eat through people's data plans.

The goal is to have the highest quality possible

with the smallest file size possible.

Each file format takes a different approach to solving this.

Each uses a different technique for compressing the image.

There are four main file

formats commonly used on the web today.

Each is good at compressing certain types of images

and not as good at compressing others.

The GIF is one of the oldest.

It's good at compressing illustrations

that have large areas of a single color.

It has a limited color space.

It only has 256 colors,

so your image can only use those colors.

This can make photographs fairly pixelated.

So it's a bad choice for photographs

unless you're looking for a retro look.

One of those colors is clear.

So the GIF can be transparent,

but the edges between the transparent part

and the solid part tend to be usually quite jagged.

Of these four, the GIF is the favorite

for making small movies, the animated GIF.

SVG is great for logos,

icons, and other kinds of illustration.

Instead of the file being made up

of individual pixels, it's a vector file.

It contains instructions for a drawing.

Make a square.

Make it this color.

Put it here.

Because SVGs are made of vector and math,

these images can scale to be physically quite large

or very small without ever losing any quality.

It won't get pixelated because there aren't any pixels.

This makes the file size very small.

If you can use an SVG, you definitely should.

SVG stands for Scalable Vector Graphic,

and it's actually a whole other language,

a programming language for graphics.

If you're interested into diving into the SVG language,

there are whole other courses on it.

Meanwhile, you can export an SVG file from Illustrator,

Sketch, or other vector graphics programs,

and handle them much like you handle any

of the other file formats on the web.

JPG is known for being a great

format for compressing photographs.

Most digital cameras in fact save photos

that you shoot as JPG files.

When you put a JPG image on the web,

you want to make sure that either a human

or robot resizes the image to an appropriate physical size

and compresses it for the web.

Don't just stick a 5000 pixel wide,

half-compressed JPG on your website.

They are far, far too big for users to download

and will make your site very slow.

JPGs can be compressed to much smaller sizes,

by simplifying the color information in the file.

You can pick a balance

between the quality and the file size.

You can do that manually

or rely on software on your web service to handle the task.

Either way, when JPG files are prepared for the web,

they are good solid reliable way to deliver a photo.

PNGs are newer format for the web than GIFs or JPGs.

They're a good solution when you have a photograph

and you need part of the photo to be transparent.

The PNG sometimes does a better job than a GIF

at compressing the kind of images that the GIF format likes,

and sometimes it does a better job than

a JPG than compressing the kind of images

that the JPG format likes, but not always.

If you're manually compressing files,

you should try several options

and see which results in the small file.

There will be other image formats coming in the future,

ones that'll do an even better job

of compressing millions

of pixels into smaller and smaller files.

So keep an eye out.

Consider the physical size of an image,

the file format and the compressing settings

when making your image files.

Aim to make them download as fast as possible.

The HTML that we use is the same no matter

which kind of file format you use.