Site user experience: Image format selection and user experience

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

This is my 10 years of time to write a blog, occasionally turned out, I think it is very fun. Seems to be because of inexplicable to see the JPEG compression algorithm, but see the fog. And then think about why so many pictures of the format? And in the software development of the B/s project with what format, C/s project with what format, logo pictures with what format, background pictures with what format and so on. So I wrote a text. Take out today, edit again, do not know how you think, old fat very sincere hope to communicate with you.

To write this thing, we first set a range, and we compare it to the common GIF, PNG, JPEG three formats.

First, let's look at the comparison of the three formats.

The above is for three kinds of common format contrast, in fact, there are BMP and other formats, but for us to do the design of the time this format is not particularly much, so not how to say, but frankly this format is still good, because it does not compress files, but the same picture of the other format is much larger, So on the page actually use relatively few. JPEG format also has a JPG, many people think it is the same thing, but if from a purely use point of view is one thing, in fact, JPG is the use of JPEG file Interchange format stored in the encoded image file name extension. JPEG is a compression standard.

Now that we understand the definition, advantages and disadvantages of these three formats, when should we use these three formats?

Old fertilizer suggests that you can consider using GIF if your picture is a single color, just a color block or text, because it reduces the volume. But on the other hand, PNG can be said to be a substitute in GIF format and really good. The same performance, PNG's smaller. So in this case you can still use PNG and don't use GIF. Someone said, you say so much nonsense to just say let us use PNG good. But consider the fact that if you design a product that faces users they usually use a browser that is old-fashioned or some old mobile device, such as a non-intelligent machine. Or a machine that has poor image quality. You still have to use GIF because these old objects don't support PNG. GIF is no more than 256 colors. If your picture has a lot of transition colors, gradients, etc. still have to choose PNG.

What about JPEG vs. png?

JPEG is suitable for storing pictures with many colors because it can be loaded faster on the network after compression. Then you can consider PNG if the image contains graphics or text, and vice versa. Otherwise, JPG compression becomes more ambiguous.

For JPEG In fact, we have to come out alone to say that some students may know that may not know, this thing actually has two ways to save, one is the standard type, with the birds speak is baseline jpeg, there is a progressive type is progressive JPEG. This is a pair of twins, everything is the same, but even if we live in the twins, many of the same also necessarily have a different place, this brother is not the same place he ~ ~ ~ ~ ~ ~ ~ ~ ~

The standard type of JPEG files are stored in a way that is scanned from top to bottom. The order of each row is saved in the file. When this file is opened, it is displayed from top to bottom in the order in which they are stored. Until all is open. So if you have a large file or a user network, imagine the effect. In fact, this display is not a little too much. So recommend the latter.

The progressive type is multiple scans. The outline of the entire picture is displayed first when you open it. And then multiple scans, the picture ideas clear. This benefit is needless to say, and users can use the outline to know what the picture is. If you have a large picture, consider this.

Compare the two ways, look at the latter, so that your user experience does not improve a lot? Actually, it's just a little trick you keep, isn't it? But what is the experience for the user? The former: What kind of broken things ah, half-day out, or is a strip, turn off turn off! The latter: Hey, come out a box, Wait a minute, more and more clear, excited ah! And this, and we are in the study of user experience, and the truth of the progress bar is similar?

Of course, if your picture is JPEG standard type, you want to convert to progressive type, you can do this: in PS, open the picture,

Save as Web format, and then tick "continuous" is progressive.

Written in the end, in fact this article whether you are a designer or Product manager I think you can look at, although from the use of the dimension to say that the designer to apply more. But we look at substance through phenomena. Because how your picture is used can have a great impact on the user experience of your product. This needless to say, I believe that designers of different products will certainly have their own feelings. So I'm still giving this article to the user Experience category. As a product manager of us, this basic knowledge should be clear. Old Fat firmly believe that only the heart with a perfectionist tendency of the product manager will be able to design a really good product, the kind of often feel "make it, can be", such a product manager do not have anything good, I do not want to do, also do not like.

PS: Want to further explore the students can refer to this article, very good http://ued.taobao.com/blog/2010/12/jpg_png/#2-1