- [Instructor] Whichever image format you choose,
the performance of every single image can
and should be improved with some manual image optimization.
First, decide on the maximum visible size
the image will have in the layout.
Even so-called full-bleed images that span
across the entire width of the viewport
should have a maximum width
because some people have extremely wide monitors,
and it makes no sense to display a full-width image on them
because it'll take up the entire viewport.
A good rule of thumb here
is no image should ever be displayed wider
than a full HD monitor, so 1,920 pixels.
This is already a huge image,
and in almost every case it is, at the most,
going to fill in the entire monitor.
But if you're going full-bleed,
this will give you what you want,
and you don't need to go any higher.
To avoid anyone complaining about the image stretching
beyond 1,920 pixels
if they have one of those giant monitors,
make sure you also restrict the display width of that image
to 1,920 pixels, and then center align it.
That way if the monitor is abnormally large,
then the image will sit in the center,
and you will get margins on the right and left-hand side.
And, yes, I know someone will say,
"But you should really serve up a 2X image too
for high-resolution monitors."
That's a fair point if you are intentionally serving up
high-resolution images
and are trying to display high-resolution images.
But for most cases when you're working on the web,
you're just showing an image.
And unless the user is seeing a high-resolution image
versus a regular resolution image side by side,
they will not be able to tell the difference.
So serve up 1,920-pixel images
to the full width of the monitor.
And even if people are on a 4X monitor,
it'll still look great, and they will only ever know
if you then do a comparison with something else.
1,920 pixels is fine for almost every circumstance.
And for reference, my current maximum width for all images
in all projects is 1,200 pixels.
Anything bigger than that is too much
of a performance hit in my opinion.
But that's my opinion.
It's entirely up to you.
My recommendation is never go over 1,920.
Once you've settled on a width for an image,
scale your image to fit that size.
That means if your image is displayed in content
and the maximum width is 800 pixels,
save the image at 800 pixels.
There is no good reason to serve up an image
that's larger than the displayed size
because the displayed size is the displayed size.
And, yes, the same thing I previously said
about 2X images applies here.
You can if you want to also serve up a 1,600-pixel image
to give you the 2X resolution,
but like I said, the only time people notice it is
if you do a side-by-side comparison,
so it might just be a waste of bits.
If you're using JPG or WebP,
experiment with compression ratios.
For JPG, you can usually get away with a number
around 75 to 80%.
And I always try to get as low as possible.
The main difference between 75% and 100%
in terms of the image quality
is the lower the compression ratio gets,
the higher the number of artifacts you see
in subtle gradients like a blue sky.
The good news is when you're doing compression
in Photoshop or in Sqoosh or in some other tool,
you can actually see the artifacts
as you're previewing the compression,
so you can quickly find that compression point
that works for your specific image.
And if you've already scaled your image down
to the size you're going to display it,
you'll also notice that a lot of these artifacts
will not really be noticeable at all.
Try to get this number as low as possible.
A good rule of thumb is somewhere around 75%,
and you should usually be fine.
If you're using a PNG,
make sure you only enable transparency
if the image is actually transparent.
Otherwise, you're just wasting data for no good reason.
The same thing applies to WebP.
If you're using an SVG,
make sure the SVG is as simple as possible
by eliminating any anchor points or shapes
or anything else you don't need.
It's a very good idea to run every SVG
through some sort of SVG compressor,
just to make sure that everything is as simple as possible.
And finally, if you're working
with a complex computer-generated graphic
and you can't use an SVG, try saving it both as a WebP,
as a JPG, and as a PNG,
and then pick whichever file is the smallest
after compression because depending on the graphic,
you might get either one
of these three being the best option.