Understanding image optimization

Modern websites use lots of high-quality images. Unfortunately, if your site incorporates many images, its loading time will grow a lot, and this won't make the visitors happy. With image optimization, you will use tools and/or web services that help reduce file size, while maintaining a good image quality. Here are the most important criteria that will influence the amount of space that's used by your images.

1. Image size

I like a high-res image just like anyone else, but the truth is that most web designers utilize images that may have huge resolutions, but don't provide any benefits to the users. If you have a site, chances are you've installed a visitor analytics suite, right? So, go ahead and log into the system right now, and then let me know how many people use monitors that have resolutions above 1280x1024 pixels...

If you don't own a 4K wallpaper site, I bet that over 80% of your visitors utilize low-resolution screens. So, those 1920x1080 pixels images need to be replace with graphic files that have 1024x576 pixels. By doing this, you will allow people to have a bit of space on the left and right side of the image, which will nicely accommodate the page's scrolling bars (if any), and so on.

Don't be afraid to resize all the images on your site; people who have low-res screen can't see their beauty anyway, and you've just learned that they form a significant majority. Actually, people who own older monitors and visit sites that have high-res images will need to rely on their browsers' image resizing abilities, which will often work much worse in comparison with what you will get by resizing the images in a dedicated graphics editing application.

To give you an idea, a full HD image (1920x1080 px) has got a size of about 800 KB, while the properly sized one (1024x576 px) only weighs 200 KB. It's true that compression can vary depending on the actual image content, but these values are pretty much standard. The conclusion is simple: be sure to optimize your images by reducing their size. Your site will load much faster, and your website visitors will be very grateful.

2. Image format

Sadly, there isn't a specific format that will work great for any image in the world. Raster graphics use a rectangular pixel grid; you will discover that JPG, PNG or GIF provide the best results, depending on the image's resolution and content. JPG continues to be one of the best solutions out there, especially when people choose a good compression factor. As a general rule, images that are compressed with a quality factor of at least 70% will look good on the web.

Vector graphics files don't store the data that's associated with the image pixels; instead, they include a list of commands and instructions (draw a line, a polygon, etc.) that are executed with the goal of recreating the image at runtime. Scalable Vector Graphics (SVG) files are the recommended option here, because they have a small file size and can support animations and various interactive features. In addition to this, most web browsers provide native SVG support.

3. Image compression

We've already discussed JPG compression, but PNG and GIF files can, and should be compressed as well. In fact, PNG files don't allow lossy data compression, but you can minimize image size by reducing their color depth, which ranges from 1 to 64 bits per pixel. GIF files can be sized down by making use of tools that implement variable-length LZW compression. People have built tools that can reduce the size of animated GIFs by 30%-50%.

Some image optimization applications and services can reduce file size even more by stripping the unused metadata, which isn't important for people who are only interested in viewing images on the web.

DID YOU KNOW THAT BIG IMAGES SLOW DOWN YOUR WEBSITE?

I CAN REDUCE THEIR SIZE WHILE MAINTAINING A HIGH QUALITY

CONTACT ME