When you start designing, some stuff is so invisible that you don’t even know enough to ask. And the first time you realize that there are several different file types for web images, you might wonder:

“Which image format delivers the best user experience?”

Just starting the Crash Course? Start here!

****

Now, just so I stay consistent with previous lessons, I want to point out that UX design is not about “a user’s experience”. It’s the process of making users effective.

Therefore — technically — this stupid question is about performance, not UX. You can’t wireframe an image format or specify an image format before you see the images.

BUT…

…it falls into the category of “everybody on the team is responsible for improving the experience”. So you’re gonna fucking learn it whether it’s “technically” UX design or not.

Learning your craft isn’t restricted by your job description.

****

The stupid answer:

“The format that makes images look the best is the best for user experience.”

(Best for the designer’s experience, maybe. Not the user’s.)

****

The real answer:

If two image formats perform roughly the same, the difference will not be visible in your data, or the interactions of the user, or the user feedback, and only 1 out of a million users will have an eye trained well enough to notice.

Therefore, if the images are done properly, image format does not concern the user.

The average person can’t tell the difference between a JPG at 100% quality and 30% quality, even though, to a designer, one of those looks like the designer kept it in their pocket all day.

If your target audience is other designers, you can care a little more. Otherwise, get over it.

However, if the images are not done properly, the answer is different.

****

Why this isn’t a stupid question:
Image format is only a UX concern if you do it wrong.

You can see a slow website in the bounce rate and conversion rates, and users will mention it in interviews. So guess what?

Your image formats just became UX.

*sad trombone*

There are several image file formats for a reason. They are good at different things. They have different “features”, if you want to think of it that way.

Ideally, you want your image files to be as small as possible while staying as beautiful as possible.

It is really easy to “save for web” without realizing all your full-width images are 700k, making your website as fast and graceful as the average contestant on The Biggest Loser.

Nobody wants to wait for 30 seconds just so the image they can’t see yet can be slightly more perfect in eyes of the designer.

****

Web image format quick-reference guide:

Right now the popular ones are JPG, PNG, GIF, and SVG.

JPGs include data for every pixel, so they tend to be better for photos and more complex images with smooth colour gradients and shit like that.

GIFs and PNGs include data for “groups” of pixels, so they suck for photos (where every pixel is different, which makes them huge.) but they are great for screenshots, icons, and images with simple color palettes. Both allow transparency. PNGs are generally better quality, but GIFs can make smaller files sometimes.

GIFs can be animated. Huge feature.

Some of these files can be “interlaced” or load “progressively” so they appear piece-by-piece instead of waiting for the whole file to load before appearing. That can be better on ultra-slow connections, like if your target audience is in developing countries that don’t have high-speed internet services yet. Otherwise, skip it.

SVGs are vectors, not pixels. So they suck for everything above, but they are brilliantly superior for scalable things like logos or graphs. And since they are actually made of code, they can be crazy small files. But don’t over-do it. Hundreds of vectors at the same time are hard on the processor (i.e. — slow), especially when they move.

****

FYI:

Google recently released a new image format called WebP which is supposed to have the quality of a JPG, the transparency of a PNG, and file sizes 25% smaller than both.

If it gains adoption and performs as promised, you might see more websites that look like magazines (big images, smarter layouts, etc.)

You can read more here:
https://developers.google.com/speed/webp/

****

Tomorrow we will get into questions about data, starting with: “We just got analytics. What do I measure?”