Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 16, 2021 07:19 am GMT

How to optimize your images for performance

Images are a big part of a web page. Not only do they take up a lot of screen real estate, but they also account for a large chunk of the total page size.

As of January 2021, images made up on average 45% (Desktop) and 48% (Mobile) of a pages total weight (HTTP Archive).

Optimizing images can therefore reduce your total page size by a lot, and as a result, speed up your performance.

Use the right image format

Choosing the right format for your images is like a craftsman selecting the right tool for a job.

He can build a house using an ordinary hammer, but using a nailgun instead will accelerate the process significantly.

The same goes for images. If you wanted to display a picture of a cat, you could use PNG, but a better and faster solution would be to use JPG.

Alt Text

Lets go over some of the most common image formats and when to use them.

JPEG / JPG (Joint Photographic Experts Group)

The JPEG-format has, since its introduction in 1992, dominated the web.

JPEG uses a lossy compression which means that the file size decreases as the image quality decreases.

JPEG doesnt support transparency it must have a solid background color.

NOTE: JPG and JPEG are the same image format. The E was removed to support the three character-limit in early Windows-versions.

You should use JPEG for: Photos and artwork.

PNG (Portable Network Graphics)

In contrast to JPG, PNG displays higher color depths (meaning millions of colors) and also supports transparency.

PNG uses a lossless compression which means that the compression doesnt affect the quality of the image.

PNG is great for illustrations and images with text (e.g., comics) since it doesnt pixelate like JPEG.

Alt Text

NOTE: Since PNG is a lossless format, file sizes can get huge.

You should use PNG for: Transparent graphics, illustrations, images with text.

GIF (Graphics Interchange Format)

GIF goes all the way back to 1987. It almost died out in the 2000s, but thanks to its animation support, it had its renaissance when the meme-culture exploded.

Alt Text

It soon found its way into pop-culture, and now animated GIFs are everywhere (for instance, nearly all messaging apps have a GIF-section where you can send animated GIFs).

GIF-images often look pixelated since they only support 256-colors (this can be tweaked).

NOTE: An animated GIF is really just a collection of separate images; therefore, file sizes can get huge.

GIF also uses a lossless compression.

You should use GIF for: Animations and simple graphics.

SVG (Scalable Vector Graphics)

SVG is an XML-based vector format, which means its automatically scalable. You could scale it 1000x, and it wouldnt affect the resolution nor the file size.

It works great for logos, icons, and text and often gives you a smaller file size than JPGs or PNGs.

By adding some code, you can also animate SVG and make it interactive.

You should use SVG for: Illustrations, logos, and icons.

WebP (Web Picture format)

WebP is the new kid on the block. Developed by Google, it is looking to bring smaller and richer images making the web faster.

WebP is 25-35% smaller in file size than JPEG and PNG, supports lossless and lossy compression, animation, and transparency when lossy compressed.

So why isnt it everywhere? Browser support.

Even though support has grown steadily, it is still (as of February 2021) only 92%. Were getting there, though.

But this doesnt mean you cant use WebP you just need a fallback image.

By using the <Picture>-tag, you can provide a fallback image e.g., JPEG if the users browser doesnt support WebP. If youre using WordPress, you can use a plugin like ShortPixel for this.

You should use SVG for: Photos, illustrations, etc.

Use videos instead of animated GIFs

As mentioned earlier, animated GIFs can be huge in file size some going up in the double digits megabytes.

Luckily its relatively easy to convert your GIFs to video files, and thanks to the autoplay attribute in the <video>-tag, it can still have the same look and feel as a GIF.

You can use a service like CloudConvert to convert your GIF to MP4-format.

Compress, compress, compress

Compressing an image is one of the easiest and fastest ways to reduce your page size.

What is image compression?

Image compression is an application of data compression that encodes the original image with few bits. The objective of image compression is to reduce the redundancy of the image and to store or transmit data in an efficient form.

-Source: An Introduction To Image Compression.

There are tons of excellent image compression tools out there both web-based and plugins. Most of the time, you wont be able to tell by the image quality that the image has been compressed, but the saved kilobytes tell another story.

Some of the tools you can use:

Scale it down

Bigger is definitely not always better. It can be tempting to upload an image in as high a resolution as possible since you want your image to look as good as possible for the user.

Dont.

You are wasting the users bandwidth by serving them oversized images and damaging your sites performance.

Weve seen images with a 3000px 4000px width before, which makes absolutely no sense. If youre using WordPress, you can use a plugin like Imsanity to scale images down to a sane size automatically.

So be sure to serve your images in the correct dimensions.

If you use icons, it can also be a good idea to check which size they are uploaded in. If the maximum dimensions you are showing them in are 3232 px, then you should shrink anything above these dimensions down.

Get responsive

Back in the days, when we all were browsing the web in an 800600 resolution, it was easier to serve images since we all had roughly the same screen size.

Today, not so much. Screen sizes vary from the tiny Android phone with the 320px width display to the insane 49-inch monitors.

Alt Text

So instead of using a one-size-fits-all approach for your images (the same image gets served to all devices), it can be a good idea to use responsive images.

By serving scaled-down versions to smaller devices, it can save 2-4x data.

So how many versions should you serve? There isnt a correct answer to this, but its common to serve 3 5 different sizes of the image.

We wont go into the technical details on how to serve different sizes for different resolutions, but Mozilla has a great resource here explaining it.

You can also use a cloud service like Cloudinary (they also have a WordPress-plugin) to serve responsive images.

Lazy load images

We already know that images take up a considerable chunk of our total page size. But what if you didnt have to download all the images right away?

Lazy-loading does just this. When enabled, it wont download or render the images before they are visible to the user.

This essentially means that you can have an infinite amount of images below the fold and it wont affect your performance.

In the past, you needed custom JavaSript to enable it, but in early 2020 it became a web standard, meaning you can simply enable it by adding loading=lazy to your <img>-tags. Pretty cool, right?

Moreover, since WordPress 5.5, all images will be lazy-loaded by default.

Unfortunately, its not all sunshine and rainbows. Since its a relatively new feature, not all browsers are supporting the attribute yet. For instance, the always late to the party, Safari, doesnt support it yet. You can see browser support for the loading-attribute right here.

Use Alertdesk to analyze your content

In our performance reports, youll find a breakdown of all your content including images.

Get a better understanding of how it impacts your performance and quickly identify load-sinners.

Start analyzing your content today with Alertdesk. Try us free for 14 days.


Original Link: https://dev.to/kaspera/how-to-optimize-your-images-for-performance-24pn

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To