Tweet
Tweet

Slide 1

Slide 1 text

Real Values. Responsive images and how to implement them HTML & Sitegeist.Kaleidoscope Martin Ficzel Photo by Malcolm Lightbody on Unsplash

Slide 2

Slide 2 text

Real Values. Martin Ficzel ● Backend Developer ● fi[email protected] ● twitter/slack: @kopfaufholz ● Neos Team-Member Atomic-Fusion, AFX, Fusion-Forms ● Sitegeist.Monocle, Sitegeist.Kaleidoscope, Sitegeist.MagicWand

Slide 3

Slide 3 text

Real Values. Quick Poll: Who are you ? ● Who is Backend Developer ● Who is Integrator ● Who is Frontend Developer ● Who is Project Management ● Who has not raised the hand yet 󰢧 󰢨 󰢨

Slide 4

Slide 4 text

Real Values. Responsive images and how to implement them ● Why is that relevant ● The relevant HTML standards ● CMS specific challenges & the solution we ended up with ● Questions

Slide 5

Slide 5 text

Real Values. Why is that relevant! 4 Reasons

Slide 6

Slide 6 text

Real Values. 1. Devices 600 > 6000 px

Slide 7

Slide 7 text

Real Values. 2. Bandwidth https://op.europa.eu/webpub/eca/special-reports/broadband-12-2018/de/ Rural areas General

Slide 8

Slide 8 text

Real Values. 3. Timing ● Images are requested during parsing ● At the same time as CSS and JS ● Browsers only know about the HTML at that stage ⏰

Slide 9

Slide 9 text

Real Values. 4. Payload ● HTML 10 > 100 KB ● CSS 10 > 100 KB ● JS 100 > 500 KB ● Images 1000 > 2500 KB * unscientific guestimation

Slide 10

Slide 10 text

Real Values. You can mess up performance in many ways but you cannot achieve great performance without caring for responsive-images!

Slide 11

Slide 11 text

Real Values. Responsive images in HTML a simplified overview

Slide 12

Slide 12 text

Real Values. 1992 - HTML 1.0

Slide 13

Slide 13 text

Real Values. HTML 2.0 - 4.0 Image showing things

Slide 14

Slide 14 text

Real Values. The long sleep ● One highres image will be fine for all once bandwidth becomes cheap ● Then Smartphones and Tablets became popular ● And mobile use became common

Slide 15

Slide 15 text

Real Values. JS - Experiments 🪄

Slide 16

Slide 16 text

Real Values. 1x 2x Multiple Resolutions

Slide 17

Slide 17 text

Real Values. 1x 2x Multiple Resolutions

Slide 18

Slide 18 text

Real Values. Multiple Resolutions

Slide 19

Slide 19 text

Real Values. Multiple Sizes

Slide 20

Slide 20 text

Real Values. Multiple Sizes

Slide 21

Slide 21 text

Real Values. 600w 800w 1000w 1200w Multiple Sizes

Slide 22

Slide 22 text

Real Values. 600w 800w 1000w 1200w

Slide 23

Slide 23 text

Real Values. - Art direction Case 1, same cat different crops

Slide 24

Slide 24 text

Real Values. - Art direction 🌙 ☀ Case 2: Different cat depending on use case

Slide 25

Slide 25 text

Real Values. - Art direction

Slide 26

Slide 26 text

Real Values. - Multiple formats

Slide 27

Slide 27 text

Real Values. - Multiple formats /picture>

Slide 28

Slide 28 text

Real Values. Cat loading behavior

Slide 29

Slide 29 text

Real Values. Image loading behavior Request when close to viewport Or never Request immediately during parsing

Slide 30

Slide 30 text

Real Values. Cat appearance behavior

Slide 31

Slide 31 text

Real Values. Image appearance behavior CSS Request immediately during parsing

Slide 32

Slide 32 text

Real Values. Future ● Smarter Browsers? ○ Consider current bandwidth ○ Consider CSS for lazy images ● Successor for JPEG / PNG? of cat images

Slide 33

Slide 33 text

Real Values. Responsive images are not that hard

Slide 34

Slide 34 text

Real Values. Non trivial to implement ● Editors can select images with different aspects ● Content Elements may be used in different contexts ● Separation of Integration and Presentation requires error prone communication of many urls

Slide 35

Slide 35 text

Real Values. Hard to verify ● You can only spot low resolutions ● Offices have fast networks ● Browsers other than Firefox stick to highres Versions

Slide 36

Slide 36 text

Real Values. Sitegeist.Kaleidoscope responsive images for Neos

Slide 37

Slide 37 text

Real Values. Quick Poll: Who knows Kaleidoscope ? ● Who has heard about Kaleidoscope ● Who actually tested it ● Who uses it all the time 󰢧 󰢨 󰢨

Slide 38

Slide 38 text

Real Values. the idea ● Avoid creating dozens of urls ● Decide on dimensions in presentation ● Make mistakes visible ● In other aspects stay close to HTML

Slide 39

Slide 39 text

Real Values. AssetImageSource imageSource = Sitegeist.Kaleidoscope:AssetImageSource { asset = ${q(node).property("image")} title = ${q(node).property("title")} alt = ${q(node).property("alternateText")} }

Slide 40

Slide 40 text

Real Values. Kaleidoscope:Image

Slide 41

Slide 41 text

Real Values. Kaleidoscope:Picture

Slide 42

Slide 42 text

Real Values. DummyImageSource imageSource = Sitegeist.Kaleidoscope:DummyImageSource { backgroundColor = '00ff00' baseWidth = 400 baseHeight = 250 }

Slide 43

Slide 43 text

Real Values.

Slide 44

Slide 44 text

Real Values.

Slide 45

Slide 45 text

Real Values. Tips and Tricks

Slide 46

Slide 46 text

Real Values. Eager loading in keyvisuals keyvisual = Vendor.Site:Fragment.Keyvisual { prototype(Sitegeist.Kaleidoscope:Image) { loading = 'eager' } prototype(Sitegeist.Kaleidoscope:Picture) { loading = 'eager' } }

Slide 47

Slide 47 text

Real Values. Eager loading first content content = Neos.Neos:ContentCollection { nodePath = "main" content.iterationName = "mainContentIterator" prototype(Sitegeist.Kaleidoscope:Image) { loading = ${mainContentIterator.isFirst ? 'eager' : 'lazy } prototype(Sitegeist.Kaleidoscope:Picture) { loading = ${mainContentIterator.isFirst ? 'eager' : 'la

Slide 48

Slide 48 text

Real Values. renderer = Neos.Fusion:Case { inMain { condition = ${q(node).parent().is('[instanceof Vendor.Site: renderer = Vendor.Site:Component.MainImage { imageSource = ${props.imageSource} } } inGrid { condition = ${q(node).parent().is('[instanceof Vendor.Sit renderer = Vendor.Site:Component.GridImage { imageSource = ${props.imageSource} One content, many presentations

Slide 49

Slide 49 text

Real Values. Enforcing dummy images # Root.fusion prototype(Sitegeist.Kaleidoscope:Image) { [email protected] = Sitegeist.Kaleidoscope:DummyImage baseWidth = ${value.width()} baseHeight = ${value.height()} } } prototype(Sitegeist.Kaleidoscope:Picture) { [email protected] = Sitegeist.Kaleidoscope:DummyIm baseWidth = ${value.width()} baseHeight = ${value.height()} ⚠

Slide 50

Slide 50 text

Real Values. What to take home

Slide 51

Slide 51 text

Real Values. ● no rocket engineering ● not trivial and easy to mess up ● Tooling is needed ● like Sitegeist.Kaleidoscope

Slide 52

Slide 52 text

Real Values. Questions?

Slide 53

Slide 53 text

Real Values. Thank you! cat images from the internet: Pixabay, Unsplash, Rawpixel, Pexels, Wikipedia