![]() If there is not enough difference between those images, we recommend cutting the middle one out to make better use of the cache.ģ) Generate all the possible variants you need, including high DPI For example: small 12 KB, medium 25 KB, big 40 KB. I would use this approach if the size difference between the images are at least 50%. This approach is trying to target small, medium and big screens. If the difference between the smallest and largest image is not especially big, we would just go with that - this is what we use in our documentation site.Ģ) Generate one small, one medium, and one big image We think this is the correct choice for most websites. There are a couple of approaches here to consider:ġ) Generate only the largest image you need Keep in mind that the pixel became a subjective measure since high DPI screens entered the market. On desktop it is displayed as 400x200, on mobile there is one column and the image is displayed as 100% width, let's say 600px and height proportionally. Let's assume we are talking about a product photo on a search list. And most of the bandwidth used to send those pixels is also wasted. If your image is 3000x4000px and you are displaying it as 300x400px, most of those pixels are wasted. Remember, that your users will very rarely report a bug, they will just leave, so minimizing risks is important. WEBP - as of April 2020 it still has no universal support despite being a very good format, so we will ignore it - it takes too much time and effort to shave off a couple of KBs in the most popular browsers just to get a bug report a year later that something is broken in Safari since 2017 when it was introduced.If you need lossless graphics, PNG is also your best bet PNG - use for everything else, especially if there is not a lot of colors (at some point JPEG is going to be better), or you need 8bit alpha channel.GIF - limited to 256 colors, has transparency support.The more colors and gradients, the better JPEG stands in terms of size/performance vs PNG ![]() Let's see what is left in the bitmap formats: It is very possible that if your image is not a photo and does not have a lot of colors, SVG will be a good format for it. We are only going to describe raster images in this article, but keep in mind, that if you can use SVG because you have the vector source of the image, use it. Product photos, your photos if you are a photographer, people's faces, big images that are essential on a page are another story, you might want to keep them closer to the original, even when using lossy compression, because this is crucial content - it is showing what your product is about, it is about selling or telling a story. You need to assess the risk to reward ratio and make a decision that's best for your website, often on an image by image basis. It's nice to have, and it is even nicer if it does not make your webpage feel sluggish. You need to know why people came to your website and prioritize or deprioritize the quality of some of your images.įor images that are purely decorative (for example, backgrounds) users can tolerate more quality degradation, because this is not crucial content. "What your user accepts" is a very subjective term, and you need to make a decision - what is better: Faster load times and less money spent on bandwidth, or better looking images. What you want is to have the smallest possible footprint that your user accepts. While Image size has increased from ~250KB to ~900KB on desktop and ~100KB to ~850KB on mobile. Downloading takes time, rendering images takes time and then keeping those big images on the screen takes memory.īetween 20, the median resource weight increased from ~100KB to ~400KB for desktop and ~50KB to ~350KB for mobile. Images take up on average 60% of the page weight and websites are growing year by year, while network speeds (especially mobile) can't keep up. The problem is simple, but not always easy to solve - heavy images that your users need to download and display, costing mobile users a fortune and making them wait for far too long to see the content they visited the page for. This time we will only talk about bitmaps - if you are interested in optimizing SVG, read Optimizing SVG Exported from Figma. We are not going to dive into too much detail, but focus on transferring a lot of experience and linking to resources that will explain exactly how to use that experience to your advantage. In this article you can learn about the steps we are going through when preparing images for our web properties.
0 Comments
Leave a Reply. |