search

zenorocha / browser-diet

:fries: The definitive front-end performance guide
https://browserdiet.com
2.2k stars 441 forks source link

Image optimization : Progressive jpeg #87

Closed varemenos closed 11 years ago

varemenos commented 11 years ago

At the image optimization paragraph, you could add a few words about the use of progressive jpeg against baseline jpeg. There are tons of articles out there explaining the issue (this for example).

sergiolopes commented 11 years ago

I think the use of progressive JPEGs to improve perceived performance is controversial. I don't think we should include it here, since browserdiet is focused on beginners.

paulirish commented 11 years ago

https://github.com/yeoman/yeoman/issues/810 had an all-star cast of experts weighing in. the conclusion is progressive jpeg has enough advantages to outweigh any cons.

it is VERY MUCH recommended over baseline jpg.

this should be included here, yes.

sergiolopes commented 11 years ago

Great discussion there, Paul. I read most posts, and completely agree that size/CPU/memory problems aren't issues.

My main concern (also cited by some people there) is about the user experience. Progressive visual render is better than linear one, from an user perspective? I think this point is controversial and I don't see any studies reinforcing any argument (or maybe I skipped the wrong posts while reading that discussion ;).

What do you think? Most people agree that progressive rendering is better visually? Does users prefer initially blurry images or linear ones?

paulirish commented 11 years ago

Does users prefer initially blurry images or linear ones?

try this comparison

varemenos commented 11 years ago

Does users prefer initially blurry images or linear ones?

Remember that progressive jpegs take the space that their final result will require, so they don't force other elements to move away, resize etc

sergiolopes commented 11 years ago

@varemenos This isn't a benefit of progressive jpegs. You can specify width/height on all images and avoid reflow.

The main benefit is the one Paul highlighted, that users prefer a progressive visual rendering.

marcelduran commented 11 years ago

+1 while webp is not widely supported yet, progressive jpeg should be the goto format.

sergiolopes commented 11 years ago

Fixed.