I elaborated on this already, but we should quickly reflect on perhaps the biggest advantage to using an SVG over a PNG or JPEG image. Why should we use them? The Awesome Advantages of SVGs Pixel-Perfect Scaling! This means that they can scale indefinitely without a reduction of quality. Rather than consisting of pixels, SVG images consist of shapes.
So how does the SVG format differ to bitmap-based images? They are vector-based meaning that they are resolution independent.
#Best image format for web dev how to#
You can find out more about WebP via the Google Developers site or read this article by our very own Ian Jones which discusses WebP compression in a bit more detail as well as how to serve WebP images using WP Offload Media. It is currently unsupported by Safari and is yet to gain significant traction on the web. In short, the WebP image type was created to generate much smaller file sizes and eliminate the need to use different image types on the web. I feel as if discussing WebP would make this article more confusing than helpful as it’s a different subject altogether which I’d be happy to consider in another article. We also have the more recent image type of WebP, developed by Google which aims to supersede the JPEG, PNG and GIF file formats altogether as a singular more flexible solution.
Typically, this means that as soon as you start to increase or decrease an image of this type, you are presented with jagged lines, blurry artifacts and a pixelated mess. Well, traditional image types like JPEG, PNG and GIF are bitmap-based (or raster-based), meaning they consist of a set amount of pixels. That SVG file would render a 250 pixels wide, blue square. In its simplest form, this is what an SVG file looks like under the hood: SVG images are predominantly found on the web, and while they have comparable uses to JPEG, PNG and WebP image types, their DNA is extremely different. SVG stands for “Scalable Vector Graphics” and is an XML based, vector image format.
Today I’ll be taking a look at what SVGs are and why you should start using them, and how to get started even if you’re not a designer yourself.Īnd in case you want to get straight to the good stuff, here are the main reasons why you should be using SVGs if you’re not already.
The adoption and adaptation of SVGs is without a doubt one of my favorite things to happen to the design and developer community in recent years.Īs a designer, they were the aspirin to many a headache that always occurred during the development handover.
0 kommentar(er)
