Image file types (JPG, PNG, SVG, GIF) – Web design tutorial

Articles, Blog

Image file types (JPG, PNG, SVG, GIF) – Web design tutorial

Image file types (JPG, PNG, SVG, GIF)  – Web design tutorial


Images and other graphics can often make or
break a design. And we’ll start here with file types. And we’re going to focus on bitmap, GIF,
PNG, JPEG, and SVG. Bitmap: Don’t use this on the web. GIF (or “JIF” depending on what part of
the internet you’re from): It’s used for a lot of simple animations. It only supports 256 colors, and if that’s
all you need, it might be an option for you. GIFs also allow for transparency, but they
don’t support alpha transparency. This means anything other than absolutely
opaque or absolutely transparent won’t show up that way. Up next, we’ve got PNG—or “P.N.G.”:
This is a great file format if you need transparency—specifically, if you need alpha transparency. Of course, we have JPEG—extremely common
format. Supports compression, which is awesome, because
remember Bitmaps? Yeah, nothing’s changed—we still don’t
use those on the web. But the great thing about JPEG? This JPEG file is just over 300 kilobytes. But this bitmap at the same resolution—same
dimensions, is over 50 megabytes. The bitmap…is over 150 times the size. Why? Well, bitmaps contain precise data about each
and every pixel. That’s a ton of information. So when you save a bitmap, think of this patch
of gray pixels as being stored as, “gray pixel, gray pixel, gray pixel” and so on. And when creating a JPEG, this area can be
pretty compressed, without losing the essence of the image. That means we probably don’t need all this
precise, repetitive data for each and every one of these pixels. So JPEG is a pretty great, flexible format. Finally, we have SVG—scalable vector graphics. The wonderful thing about vector graphics
is that instead of having fixed pixels like you would in any of the other formats, SVGs
aren’t resolution-dependent. You can scale them infinitely with really
great results. And in most cases, SVGs are used for shapes,
text, sketches, logos—but for photographs, which are made up of actual pixels, you’re
much better off choosing one of the other formats. So…that’s our contingent of common file
formats. We’re going to make bitmap tiny and red
and strikethrough and move it almost entirely off the screen so it’s clear we really don’t
like using that format on the web. But that’s our list of common file types. You can mix and match these depending on what
works best for each image in your project.

3 thoughts on Image file types (JPG, PNG, SVG, GIF) – Web design tutorial

  1. An interesting video about image file types and how to make great websites. There must be a lot of web designs.

Leave a Reply

Your email address will not be published. Required fields are marked *