[MGNLDEMO-33] Reduce Image Size - Efficient responsive Images Created: 18/May/15  Updated: 19/Oct/15  Resolved: 19/Oct/15

Status: Closed
Project: Magnolia Demo Projects
Component/s: None
Affects Version/s: None
Fix Version/s: 0.8

Type: Story Priority: Major
Reporter: Christopher Zimmermann Assignee: Roman Kovařík
Resolution: Fixed Votes: 1
Labels: None
Remaining Estimate: 0d
Time Spent: 0.75d
Original Estimate: Not Specified

Issue Links:
dependency
depends upon MGNLDEMO-102 Ad-hoc Images in demo should be loade... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Travel Demo
Sprint: Kromeriz 15
Story Points: 3

 Description   

Currently the same image is loaded regardless of screen width - and scaled in the browser AKA responsive images.
This is inefficient when the browser is narrow - wide images are not required.
We should load an image that is appropriate to the required width of the image..
We must add a set of image variations so that images of different sizes will be available.

I made a suggestion on implementation on branch MGNLDEMO-33-exp, based on the srcset attribute.
But, since then - based on consultation with developers and approaches learned in (https://jira.magnolia-cms.com/browse/MGNLDEMO-102) - the new recommendation is to use the lazySizes javascript library instead of the srcset attribute. The main reason is that it is easier to configure - you dont have to provide a "sizes" attribute.
(Info on srcset and sizes attributes: https://developer.mozilla.org/en/docs/Web/HTML/Element/img )

As lazysizes works on img tag - we probably need to replace the usage of background-image that we used to have images stretch nicely to fill their containers without distortion. A newish css value supports this behaviour in the image tag "object-fit: cover". A custom javascript helper is used (jquery.object-fit-cover-simple.js) to enable this feature on browsers that do not support this attribute.

Implementation Notes (for git branch MGNLDEMO-33-exp):
A collection of image variations is created to support this behaviour.
Unfortunatly, the srcset property requires explicit sizes to be declared in the html. For this reason I find it clearest to name the variations with their actual pixel sizes. ("small, medium, large" would just add obscurity in this use-case.)

The javascript resources should be added to the theme instead of directly to the main.ftl!

The carousel does not work with the object-fit property - therefore I recommend leaving it the way it is.

relatedTours.ftl should be updated to use this technique - probably very similar to the changes in tourTeaser.ftl



 Comments   
Comment by Antonín Juran [ 16/Oct/15 ]

Pictures resolution is wrong

Generated at Mon Feb 12 05:15:37 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.