PNG-8 uses an adaptive color palette capable of up to 256 colors. You may also have a raster image with some transparent areas that should let their background shine through. In these cases, the best format is a PNG file, which comes in two flavors, PNG-8 and PNG-24. However, sometimes a graphic won’t have an SVG version available, and JPEG compression artifacts would look ugly in flat areas of color and with sharp lines. SVGs are best for images that are composed of solid shapes and sharp lines, while JPEGs are best for photographs and artwork. Efforts like the Responsive Images Community Group and Zurb Interchange are helping to advance the state of the art in this area. However, there’s still room for improvement it’s much better to deliver pixels only to the devices that will actually be able to use them. There aren’t enough 5k iMacs out there yet to justify anything greater. However, I generally only worry about 27″ monitors at 2560×1440 and below. That’s a moving target, which is why SVGs are so great. However, if you send more pixel data than there are physical pixels on a device and the image is scaled downwards, it’s just wasted bandwidth.Īt the very least, you should optimize images so that they’re never larger than the highest resolution you expect them to be displayed on. Sometimes you’ll need to let the browser rescale an image a bit so that it works in a responsive design. All other factors being equal, more pixels usually mean slower page load times.įor better or worse, the web doesn’t deal in pixels it’s a fluid medium that looks different from one screen to the next. However, raster-based file formats like JPEG and PNG have an absolute resolution expressed in pixels. SVGs are resolution independent, so they don’t need to be rescaled. Still, you should come up with a progressive enhancement strategy if you think your pages won’t work for IE8 visitors without these graphics.
They’re supported in all modern browsers along with IE9+ (source: ). That being said, you should try to use SVGs for all your images first, and only in cases like photographs or artwork should another format be used instead.Īfter many years of browser incompatibilities, the age of SVGs has finally arrived. For extremely high-detail images like photographs or artwork, you’ll still need to use a raster-based file format that uses pixels. SVGs are mostly good for representing graphical imagery composed with shapes, but they’re not good at everything. When you optimize images with a tool like SVGO-GUI, the file sizes can be even smaller. These shapes are then automatically projected into the physical pixel grid, regardless of its resolution.
#Optimize images for the web series
That’s because SVG files store images as a series of coordinates that form shapes, rather than pixel data. In other words, you can zoom in to an SVG all you want and they’ll always look sharp. SVGs are great for the web because they have infinite resolution and very small file sizes. The SVG format works best for graphics like this one.
0 kommentar(er)
