Reduce image size: use the correct format — PNG or JPEG

SPEAKER: You can make
your website faster and less data-hungry
by using the right file format for images. What’s wrong with this web page? Now it loads quickly on
100-megabit broadband, but let’s try it on 3G. Now this is the kind of
experience most of your users will get. And that’s not so good. Let’s see what’s going on. Now one really easy way
to find website problems is to look for heavy files in
the Chrome DevTools network panel. Just rearrange to sort by size. In this case, you can see some
heavy images right at the top. A simple rule is to look out
for any images over about 100 kilobytes in size. That is often a sign of trouble. Let’s see what’s gone wrong. Aha. These photos have been
saved in the PNG format. Now photos should
always be saved using a format like JPEG that’s
designed for the purpose. The WEBP format can often
work even better than JPEG. To find out more, check out
our links in the description after this video. Let’s download the PNGs and
try saving them as JPEGs. There are lots of
ways to convert files. But for now, I’m just going
to use Preview on Mac. Let’s compare the size
of the image files– the PNGs and the JPEGs. Wow. That’s a big difference,
about a quarter of the size just by saving as JPEGs. The JPEGs look just fine, too. Even better if you save
them from the originals. Let’s replace the images for
the website in the images directory, update the HTML
to use JPEGs instead of PNGs. And you’re done. Now let’s take a look at the
logo at the top of the page. Yep. Looks like the company
logo is a PNG as well. Now there’s nothing
wrong with that. But if you can use
an SVG instead, that will be much smaller. The SVG format describes
the lines, shapes, and colors that
make up an image, rather than the
individual pixels. That means that SVGs are
naturally responsive. They can resize to fit. What about the
social media logos? It turns out that these
were done using a logo font. Again, there’s nothing
wrong with that. But if you only use a few logos,
you’re better off with SVGs. SVG logos are available for
all the social media brands. And SVG is really
well supported. You can even include SVGs
inline in your HTML file. They don’t need much code. And that can speed up loading
by reducing the number of things your site needs to load. Now let’s upload our changes
and open the site again. In this example I’m adding
my SVG files with Git and committing and pushing them
to the repo to update the site. That’s a big improvement. Now what about page load speed? That’s what really matters. Compare the old version
and the new version. You can see the new
version is much faster. So that’s a really easy way to
make your website work better. Use a web-optimized format such
as JPEG or WEBP for photos, and use SVG for icons and logos. Thanks for watching. See you next time. And check out our other
videos for more tips to make your
website even faster.

25 Replies to “Reduce image size: use the correct format — PNG or JPEG

  1. You need to differentiate better between photos and images.
    As PNG would be the format of choice in many situations.

  2. Back in 2013 i learned that JPEG were dedicated to photographs because it shows more détails comparing to others but it was heavy for the web, PNGs were more for icons logos and light for web (at that time SVG were a working draft) from that time is there any updates that was applied for the JPEG format making it lighter ?

  3. You could've of mention the fact that PNG allows transparency and thus makes it the preferable image format sometimes.
    Cool informative video anyway thanks !!

  4. Do note! webp and webm are small, but not supported by all browsers:

  5. What about using JPEG2000? What compression algorithms do you recommend? Does that decompression algorithm work on Mobile devices correctly? Does Webp work on iOS device? How do you talk your marketing and graphics department into using compressed images? Cause I tell them and they said " you stupid idiot.. PNG files look better."

  6. Like sure, its Chrome Dev YouTube channel, of course they're going to promote Chrome V8 engine, which might prefer Jpgs over PNGs, but the first clip showed Jpgs over 2MB, then they're suddenly 2MB PNGs in the next clip. I've never had issues using either format, and some times one format is better than the other.
    Webp on the other hand, is something obscure and not widely viewable. Leading to supply polyfills along with your website, slowing it down. Google employs this same trick on popular websites like YouTube, using code only supported by Chrome due to it being outdated, leading it to load polyfills for everyone elses browsers. In turn "your browser is slow, switch to chrome" …. no, you supply code which you only check against your own browser to work as intended and load extra resources to make it work on others

  7. You should have made a better case for each image format. Not always you want a lossy image. And SVG only has limited uses. Speed has an impact in UX, but not always you can compromise it in high end devices, with gigantous resolution.

  8. JPG causes problems on some WordPress website and come up blurry. I ended up having to use JPG and use an image compression plugin.

Leave a Reply

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