- The image format or file type you choose for your images
will have a direct impact on performance.
The web supports several different image formats
and one of the key steps
to optimizing your images for performance
is choosing which format to use
for which images and graphics.
On the web we generally use one of five formats
JPEG, PNG, GIF, SVG, and webP
so let's go through them see how they work
and when we should use them.
The JPEG file format was created to optimize photos
and other images with complex color gradients.
When saving a JPEG you can set the optimization level
you want to achieve from lossless meaning no detail is lost
to extremely lossy meaning your image will look
a lot like a pin by numbers painting.
That's because the JPEG compression works by finding pixels
or areas of pixels that look roughly the same
and then redefining them as the same color.
The more compression you have
the less complex the gradients will get.
In an application like Photoshop
you can choose the optimization level on a scale
from either one to 12, where one is extremely lossy
and 12 is lossless or on a percentage scale
between one which is extremely lossy and 100%
where all details is preserved.
A general rule for photos is
compression between eight and 10
is not noticeable for human eyes
and in most cases for the web
you can bring the compression all the way down
to around 75% without losing any discernible detail.
Use JPEG anytime you have a photo or a graphic
with complex color gradients and you can't use webP.
PNG is primarily a lossless bitmap image format
for high quality computer generated images.
The more detail an image in a PNG has
the larger the file will get
because it's mapping out all the pixels within that image.
An important feature of PNG is unlike a JPEG
a PNG can have a transparent alpha layer.
When you see a transparent image or graphic on the web
it's usually a PNG.
So use PNG, anytime you have a computer generated graphic
or an image with transparency
and when there's a lot of detail you cannot lose.
PNG is not recommended for regular photos
as the file size will generally be significantly larger
than the equivalent JPEG or webP
GIF is a 256 color graphic format
supporting both images and animations.
Way way back in the beginning of the web
GIFs were often used for simple graphics.
Then they fell out of favor for JPEG and PNG
because they are better image formats.
And then finally GIFs made their triumphant return
as animated GIFs in social media memes.
GIF images provide a very small file size
due to their small color gamut
but that comes at the cost of image quality.
GIF images have almost no colored depth
they only have 256 colors to work with
that's usually why they're used for only
tiny, tiny tiny graphics.
For this reasons,
they are best used for very simple graphics.
Animated GIFs on the other hand
can become very large very quickly
because you are mapping out every single frame
in the animation and these create huge performance issues
so much in fact, that social media companies
when you say you're sharing an animated GIF
you're actually sharing a video.
Twitter for example, convert all animated GIFs
that are uploaded into standard video files
and then share those video files
instead of the animated GIF.
In most cases, if you're considering using a GIF
an SVG is a better option.
If you're considering an animated GIF
a proper video is always preferred
from a performance perspective.
SVG or Scalable Vector Graphics is a file format
that's been around since the late 1990's
but only really made its way onto the web in the late 2010s.
Unlike all the other formats
which all describe pixels in some way
SVG is a web native graphics format
describing lines and curves and shapes
and allowing the browser to paint the graphics in real time.
The major benefit of SVG is encapsulated in the name itself.
SVGs are scalable, meaning the graphic will look good
at any size, all the way from tiny to extremely large.
The lines will always be clean
because they're generated on the fly by the browser
that makes them extremely versatile.
And because SVG is a markup language
you can declare an SVG in code once
and then style it using standard CSS and then reuse it
as many times as you'd like in one document.
Use SVG anytime you have a computer generated graphic
that may need to be scaled, that'd be a icon, a logo
or a graph or any other graphic that needs to be responsive.
Finally, we have webP, this is a brand new lossless
and lossy image format with transparency
that was created specifically for the web.
It aims to be a replacement for JPEG
and provides the same or better compression
with the addition of transparency and faster rendering.
According to standardized testing
webP lossless images are 26% smaller than PNGs
while lossy images are up to 34% smaller than JPEG.
WebP is supported by all modern browsers
but have zero support in older browsers
so using them right now requires a fallback
using an older image format.
This is typically done using the picture element
and some CDNs will also automatically serve webP
to browsers that can support it.
Use webP for images and computer graphics
if you know your audience is using newer browsers.
If you need to support older browsers provide fallbacks
to either JPEG or PNG.
Knowing all this what format should you use?
Well, it's simple with this list,
for photos use webP with a JPEG fallback
or if you can't use webP use JPEG.
For a complex computer graphics
use either PNG or webP or JPEG.
Here's good idea to save all three
and then see which one is smaller,
for graphics with transparency use PNG or webP
for scalable computer graphics
icons, graphs or anything else
that it's drawn with lines and shapes, use SVG
and in all cases avoid animated GIFs if at all possible.
Use a video anytime you want any kind of animation
that's encapsulated in image.