![]() Depending on the level the quality can be reduced a lot. Lossy: this is a type of filter that removes part of the data, reducing the image quality.If you want to give it a try you can use this tool. There are different types of compression, it's up to us to choose which one to use. ![]() Among the latest to introduce it is Safari for OSX and IOS. It is still not fully supported but more and more browsers are supporting this new format. webp: is a new format developed by Google that allows you to reduce the size of images up to 34% while maintaining quality.This format is an excellent choice for website graphics, all images that are part of the graphics of our website (such as the logo) are in svg. Since it is a vector format, images are never blurred and their size tends to be small. svg: (Scalable Vector Graphics) is supported by all major browsers, including internet explorer.gif: this image format uses only 256 colors and is the best choice for animated images.This format allows us to find a good balance between the size and quality of the file. They are usually used for images with few colors such as logos or illustrations. png: these are images of very good quality, obviously at the expense of size.There are several formats for images, each suitable for one use rather than another. Our goal is to find the right compromise between size, compression and format in order to have images that are both light and pleasing to the eye. We must therefore find a meeting point to make these two borderline cases in order to find the best compromise. Surely the impact on the loading time will be minimal, at the expense of the image quality which will be grainy and blurry. Let's take the same photo as before, but now let's reduce its size and quality until it weighs 50Kb. Surely the quality will be optimal, but it will heavily affect the loading time of our web page, especially with slower connections. Let's add a very high-quality photo to our page, with a 5000 px width and 4 MB weight. Note the impact that page size has on loading time when using a slow connection. Tested with a normal connection Test with 3G connection Below, I ran a test on the same page, using GTmetrix, changing the connection as the only parameter. To find out how to do it quickly with the help of some plugins, you can check our guide on how to delete unused images on WordPress. Remember that in order to save space on the server, it can also be useful to delete unnecessary files like media uploaded to the library that you're not using on the site. You will improve page loading times, especially on mobile, given the limitations of 3g connection.You will save space and monthly traffic on your hosting/server.Since site speed is one of the ranking factors, you may have an SEO advantage. ![]() Optimizing images for the web has several benefits: Notice that images weigh almost 50% when we talk about size and demands:Ī workflow to better optimize site images is super easy to implement, and it's also easy to fix old images in terms of size and resolution automatically. Would you ever buy from a site that has a blurry logo? Probably not!īy checking the web statistics of httparchive we can observe that the average page on the web has the following numbers: At the same time, it's important that your images have high quality as they are an integral part of the graphics, which will allow you to make a good first impression. images that are too large in size or too high in quality that unnecessarily weigh down the web page.Īs I explained in a previous article, it is important that your website is fast if you want to be successful on the web. One of the most common problems is having heavy images, i.e. ![]() Over the years I've had the opportunity to get involved with sites created by different people.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |