PLIP: Retina image scales

[ghost]

Proposer : Diederik Veeze

Seconder : Maurits van Rees

Abstract

Scale images in plone.scale such that they will look good on devices with pixel ratios higher than 1.

Motivation

More and more devices these days can display images with higher resolution than the html/css resolution. Plone however often serves images that are scaled to the exact same size as html/css resolution, while a lot of devices can display twice the resolution.

Assumptions

N/A

Proposal & Implementation

I propose to add an option to the imaging control panel to set a pixel ratio for image scaling. Images generated in plone.scale will generate images whose height and width are multiplied by this pixel ratio. For instance an image in the site of 320x240 with a scaling factor of 2 should result in something like the following: <img src="someimage-640x480.jpeg" alt="Some Image" width="320" height="240">

Deliverables

• Scaling factor in plone.scale
• Option for pixel ratio in imaging control panel
• Documentation

  Risks

The image scales will get larger, but the image quality for these larger scales can be reduced while still giving a satisfactory result, for only a small increase in byte size.

Participants

@mauritsvanrees

Note

I recently signed the contributor assignment agreement and am awaiting confirmation.

[mauritsvanrees]

I have rebased CMFPlone and p.a.upgrade and started the Jenkins job again.

[mauritsvanrees]

There were a few failing tests, but I fixed them and the plip job is green now.

[thet]

Here are some screenshots showing the improvement with Retina image scales on and off on a Laptop with 4k display.

You have to click on the images to open them fullscreen to see the difference.

Although the original scale has a higher quality setting, the 2x version with the lower quality setting which is used by the browser and scaled down is much better.

News Item retina off:

News Item retina on:

Image retina off:

Image retina on:

[thet]

More test results - these are the images including their size:

Inline news image 1x, 8,7 kB:

Inline news image 2x, 17,5 kB:

Inline news image 3x, 31,8 kB:

Image 1x, 118,3 kB:

Image 2x, 245,9 kB:

Image 3x, 455,5 kB:

Original Image, 5.5 MB: Github doesn't scale down for the preview and includes 5.5 MB, so I removed the picture.

Pics © by me, Johannes Raggam

[thet]

@mauritsvanrees I have added a review here: https://github.com/plone/buildout.coredev/blob/5.1/plips/reviews/plip1483-retina-image-scales-review-thet.rst

[thet]

By the way: The pics above show the "Which Hat Tower" in Minneapolis. Beautiful neighbourhood.

[hvelarde]

awesome, guys! I can't wait to test lazysizes with this new feature.

[jensens]

My review is ready and available at https://github.com/plone/buildout.coredev/blob/5.1/plips/reviews/plip1483-retina-image-scales-review-jensens.rst

[mauritsvanrees]

@jensens Did you commit and push your changes to the review? The last change to that file was two weeks ago.

[jensens]

ops, need to read more careful the console output, now its on GitHub

[thet]

@mauritsvanrees I just updated my review with a code-review section about adapterization of plone.namedfile.scaling.ImageScale. This is a non-blocker, but I want to raise awareness (and not loose my thoughts while reviewing) about an issue I might need an answer to sometime soon.

Second thing, re-reading this thread, I found that you already mentioned an imagetag view with some critical thoughts about it. I mentioned the same in my review. Funny thing, I thought I came up with that idea while reviewing your code :)

[mauritsvanrees]

As for testing in the wild: you can see the srcset attributes in use on the carousel of a client of Zest: Zeelandia International.

[jensens]

merged!

[jensens]

Thanks for the great work!

[fgrcon]

Phantastic / I am merging with PLIP https://github.com/plone/Products.CMFPlone/issues/1734 right now. I found still some locations to upgrade:

• plone.app.contenttypes.image.pt,

furthermore

• collection portlet ,
• event portlet. These I will fix myself during the merge - image_scale.tag(...) makes quite easy!

How should this work with TinyMce ... ?

[mauritsvanrees]

Thanks for the reviews and the merge. Glad to have this finally in core. Thanks to colleague @didrix who did most of the work and figuring things out. Congrats on the merge!

So, reading the reviews and final comments, it seems there may be room for some extra fixes or ideas:

• [ ] An @@imagetag view which takes a brain as context. But I don't see much that we gain from this. A view on a brain can work fine as far as I know, but I fear a small performance dip.
• [ ] Move control panel javascript to a different place. Currently at CMFPlone/static/plone.js. But adding things to a plone-legacy bundle sounds strange (it's legacy, so don't add anything), and making a pattern for something that is only needed in one control panel sounds strange to me as well.
• [ ] See if we can let images added via TinyMCE use the retina stuff too.
• [ ] Maybe register plone.namedfile.scaling.ImageScale as browser page in zcml so integrators can more easily override it.
• [x] User documentation is missing. There should at least a small chapter about how to activate and configure retina images.
• [X] Update plone.app.contenttypes.image.pt. This already uses the tag function, so seems good already.
• [ ] Update [collection portlet] (https://github.com/plone/plone.portlet.collection/blob/master/plone/portlet/collection/collection.pt#L32-L36)
• [ ] Update event portlet.
• [x] Maybe replace 'Retina' by 'HiDPI' or something like that in documentation or help texts. See https://github.com/plone/documentation/issues/812

[fgrcon]

Update plone.app.contenttypes.image.pt. This already uses the tag function, so seems good already.

sorry I uploaded too small images, works fine!"

• [x] Update [collection portlet] done in branch plip1734thumbs (https://github.com/plone/Products.CMFPlone/issues/1734) (https://github.com/plone/plone.portlet.collection/blob/4e23864c9703b7f51b010c5a2d97de8f98455910/plone/portlet/collection/collection.pt#L19-L44)
• [x] Update [event portlet] done in branch plip1734thumbs (https://github.com/plone/plone.app.event/blob/6a8ebc01da833de8b32f0249204143a4ce2ad58e/plone/app/event/portlets/portlet_events.pt#L18-L35).