![]() 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. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |