There are many image formats on the web, so we should take a moment to review our

options before diving into responsive images in HTML.

You might have already learned about scalable vectors graphics otherwise

known as SVGs, but this is [UNKNOWN] is one of the best options for

delivering images that work at all pixel densities resolutions and most sizes.

In fact, because SVGs are just mark-up,

we can modify them on the fly using media queries.

SVGs work best for images that have large, flat areas of color.

For any image that has lots of rich detail,

such as a photograph, we will need to pick another image format.

For more details on SVGs, see the notes associated with this video.

For any image that isn't a photograph, you have a few choices.

There's Ping or png.

There's the graphics interchange format or gif.

And there's more common formats like jpeg.

And then finally, there's newer emerging formats like webp.

In general jpegs tends to work best for photographs.

In the rare case that we need an image to be animated,

we can use an animated gif and additionally,

if we need full alpha transparency on an image, we can use a 24-bit png.

However, just know that gifs and pngs have a tendency to

increase load times due to their typically higher file sizes.

JPEG is designed for digital photography,

which is why it compresses photographs and detailed artwork so well.

Source set sizes and

picture should work with any image format the browser supports.

We could also, for example, deliver WebP to browsers that support it and

deliver a fall-back for browsers that don't.

However, in these lessons, we're going to use .jpgs since and

they represent the most common use case, and

they'll give us the best file size to image compression ratio.

Now, when working with .jpgs, there is a trick we can use to get

a small file size on images that are at 2X pixel density.

We'll talk about how to properly deliver these images next.

But, first let's take a look at these in an image editing tool, like Photoshop.

So, here I have an image open in In Photoshop, and

you'll be able to find this image in the workspaces associated with this video.

So we'll take a look at that soon.

But first I just wanted to show you this little compression trick that you can use

for 2X images.

So this is a fairly high resolution image.

I'll zoom in here.

So this is at 100%, and you can see that there's a lot of find detail here and

it would be nice to have this at 2x resolution and

still get a good file size to compression ratio and

the thing about 2x images is that you can't really see

jpeg artifacts as much as you can in 1x images, so

I'm going to go up here to file, and I'm going to go to save for web.

And this will bring up the save for web dialogue box.

And you can scroll around and pan the image here just to see what it looks like.

And over here, I have the jpeg preset.

And I'm going to set the quality as low as possible here.

And now you might not be able to see this perfectly, but basically there's a lot

of JPEG compression artifacts going on in this particular image.

So I'm going to bump this up a little bit to about 20% here.

And, actually, maybe even go a little higher, maybe like 30 or 40.

Let's try 40.

Here we go.

Now, there are still some JPEG compression artifacts here,

but the file size is pretty good.

This is about 300K for an image that is 2048

pixels across by 1366 pixels in height.

And that's a pretty good file size to compression ratio,

but like I said, there's a lot of JPEG compression artifacts.

However, when this is actually viewed at 2x resolution on a webpage, and

it's shrunk down, so maybe I can zoom out here to show you what that looks like.

You'll see something that looks more like this.

So, you'll see all of the crisp detail on a high DPI display, but

because of the scale of the JPEG artifacts you won't really see those.

So, basically, you can get away with much higher compression on 2 x images.