View Issue Details

IDProjectCategoryView StatusLast Update
0003816Composrcorepublic2019-06-18 15:11
ReporterChris GrahamAssigned To 
Severityfeature 
Status non-assignedResolutionopen 
Product Version 
Fixed in Version 
Summary0003816: Performance-centric image overhaul
DescriptionWe can do responsive images simply using something like width: 100% in CSS or width="100%" in HTML.

This makes things mobile-friendly, but it makes things less-friendly performance-wise as it requires a page reflow once the image metadata (width and height specifically) loads.

Ideally we would be able to set intrinsic width/height in the HTML, or the aspect ratio, but there's no standard yet.

There's another concern about image lazy-loading. People currently do this kind of thing with JS hacks, although there's a web standard coming. The web standard is a simple binary flag, but I think a precedence setting would be better.

We can resolve both the above performance areas together with a JavaScript solution. We provide the <img> with a src="data: ..." holding image that has a width/height the same as the source image. We provide HTML width="100%". This should allow the browser to paint correctly without any future reflow. We then also supply a data-src attribute which our JavaScript handles, for the real image to then be loaded on top. And finally there'd be a precedence value that defines how soon the browser should load the image relative to others.

To make things easy in templating, we'd handle it via a new Tempcode symbol, {$IMG_RESPONSIVE,url[,precedence][,further-HTML-properties]}. It'd automatically construct the HTML needed, as described above.

From a Comcode point of view, an img/media/attachment would be able to have the following sizing methodologies configured:
1) Intrinsic size (the HTML width/height properties are set using the existing {$IMG_WIDTH} and {$IMG_HEIGHT} symbols)
2) Specific size (the HTML width/height properties are set simply)
3) Responsive (100%) - uses the {$IMG_RESPONSIVE} Tempcode symbol defined above

And there would also be a lazy-loading precedence value too.

We should also extend img/media/attachment to support srcset.
Additional InformationConsider doing the same with a {$VIDEO_RESPONSIVE} symbol.

For core design images, like a logo header, we would not want to have JS processing them as we want them to come before JS is loaded and parsed. This scenario is best handled by embedding the image inside the CSS (which we can already do using the {$IMG_INLINE} symbol), which should also avoid the need for a re-paint.
TagsType: Performance
Attach Tags
Time estimation (hours)8
Sponsorship open

Relationships

related to 0002051 non-assigned Support Google's AMP 

Activities

There are no notes attached to this issue.

Issue History

Date Modified Username Field Change
2019-06-10 17:59 Chris Graham New Issue
2019-06-10 17:59 Chris Graham Tag Attached: Type: Performance
2019-06-17 18:43 Chris Graham Relationship added related to 0002051