o-l-e
commented
11 years ago Hi again.
I don't know any php or twig etc, but thought i would try to contribute in spite of my limited competance by testing Stacey/SLIR and the quality parameter. I am trying to get the best out of the image resizer, as i increasingly end up working on projects that require retina support. I usually use Stacey for projects that use a lot of large images, like portfolios etc.
I was inspired by this article before some testing myself with Stacey: http://blog.netvlies.nl/design-interactie/retina-revolution/
Note that i have not used progressive jpg's (see my question in the post above), but i did figure out how to use the "quality" settings.I would like to see how progressive jpg's would affect the following tests though (if possible). I have not tried the "base resolution/half size" like in the article referenced above, as my aim was to see how the images responded to Stacey/SLIR.
The variable in my test looks like this:
<img src="{{resize_path(image.url, 2048, 1536, 0, 100)}}" />- The max height/width is 2048px x 1536px (this would be a full screen iPad retina max image size).
- The "0" is the ratio setting (for those who didn't know this :)
- The last parameter showing "100" is the quality setting that i have tuned in my test.
The following results are done by tuning the quality parameter to see how it affects the image size. The image used to test is a 72dpi image 1536px x 2304px, with lots of information (nature image). I then fetched and renamed the images from the cached files in the app/_cache/images/rendered folder. These are the results:
Quality: Size output:
Original 1.3 MB
100 1.4 MB (yes, it's bigger...)
99 1.2 MB
98 1.1 MB
97 957 KB
96 867 KB
95 787 KB (from here every 5% down)
90 574 KB
85 465 KB
80 398 KB
75 349 KB
70 316 KB
65 287 KB
60 264 KB
55 244 KB
50 229 KB (this probably does not look too good)As you can see the size reduces dramatically just by lowering the quality a tiny bit. It goes to say that a reduction in quality from 100 to 95, reducing the size to a half of the original, would make a difference in loading time. This example would not make the image look that much worse, but would speed up the loading of 20 x 1MB images in a retina supported slideshow. Now i know that images with typography/flat graphics sometimes get worse with jpg's and quality reduction, so like the article referenced above suggests in the comments, you could just use png's for graphics.
Hope this is useful for others, would like to hear your thoughts or experiences on this issue :)
PS: I am including some of the test images below (hope Github does not compress them) so you can see some examples (the image is from a vertical double page spread in this magazine that my little company designed).
The "100" quality parameter at 1.4 MB:
The "95" quality parameter at 787 KB:
The "50" quality parameter at 229 KB:
mjau-mjau
Hi there,
the new SLIR image resizer is a really nice feature in stacey, and while reading and article about progressive JPGs and quality, i looked around in the SLIR parser. There are some possibilities for progressive JPGs and quality on lines 663 and 664.
Is it possible by any chance to choose these settings? This is not really an issue, and if it is too much hassle i understand. Just trying to find ways to speed up large images (damn retina...)
Update to understand what i mean: There is a nice article on retina images and compression here http://blog.netvlies.nl/design-interactie/retina-revolution/
Thanks in advance