die sache mit den bildern - contao.ninja€¦ · steuerbar über css media queries device-größe...
TRANSCRIPT
![Page 1: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/1.jpg)
Die Sache mit den Bildern
1
S Grafiken im mobilen Webdesign S
S Contao NRW Day 2014 S
![Page 2: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/2.jpg)
Janosch Oltmanns seit 2011 bei DMA Interaction Developer – Desktop & Mobile Buchautor: Web-Apps erstellen mit CMS-Daten
2
HTML5 Content-Management-Systeme Datenaustausch JS/CSS-Frameworks PhoneGap
![Page 3: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/3.jpg)
3
Bilder im mobilen Webdesign
![Page 4: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/4.jpg)
Anforderungen
4
1
![Page 5: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/5.jpg)
Hintergrund-Grafiken
5
2
![Page 6: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/6.jpg)
Bilder im Content
6
3
![Page 7: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/7.jpg)
Performance
7
4
![Page 8: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/8.jpg)
…und Contao?
8
5
![Page 9: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/9.jpg)
Anforderungen
9
![Page 10: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/10.jpg)
10
AuflösungV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 11: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/11.jpg)
11
Viewport-GrößeV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 12: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/12.jpg)
12
BildausschnitteV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 13: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/13.jpg)
13
DateiformateV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 14: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/14.jpg)
AnforderungenBilder abhängig von der Auflösung des Gerätes verwenden
Bilder abhängig von der Abmessung des Viewports ausspielen
unterschiedliche Bildausschnitte oder Motive abhängig von der Viewport-Größe nutzen
unterschiedliche Dateiformate, je nach Fähigkeit des Browsers laden
Kombination aller Punkte
14
![Page 15: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/15.jpg)
Hintergrund-Grafiken
15
![Page 16: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/16.jpg)
16
Status quo
![Page 17: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/17.jpg)
Hintergrund-Grafiken
17
![Page 18: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/18.jpg)
Hintergrund-Grafiken
18
![Page 19: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/19.jpg)
Hintergrund-Grafiken
19
![Page 20: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/20.jpg)
Hintergrund-Grafiken
20
![Page 21: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/21.jpg)
Hintergrund-GrafikenSteuerbar über CSS Media Queries
Device-Größe Viewport-Größe Pixel-Dichte
Verwendung unterschiedlicher Grafiken möglich
21Vie
wpo
rt
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 22: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/22.jpg)
Hintergrund-Grafiken
22
![Page 23: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/23.jpg)
Hintergrund-GrafikenSteuerbar über CSS Media Queries
Device-Größe Viewport-Größe Pixel-Dichte
Verwendung unterschiedlicher Grafiken möglich Nutzung verschiedener Dateitypen ist demnächst ebenfalls möglich
23Vie
wpo
rt
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 24: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/24.jpg)
24
!
![Page 25: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/25.jpg)
Bilder im Content
25
![Page 26: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/26.jpg)
26
Status quo
![Page 27: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/27.jpg)
Bilder im Content
27
![Page 28: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/28.jpg)
Bilder im Content
28
![Page 29: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/29.jpg)
29
Bilder im ContentVorteile
einfach zu Implementieren Nachteile
Für alle Geräte wird das gleiche Bild verwendet Retina-Displays werden standardmäßig nicht unterstützt „überflüssige“ Datenmenge für Smartphones
Vie
wpo
rt
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 30: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/30.jpg)
30
Retina.js
![Page 31: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/31.jpg)
31
Retina.jsNachteile
Für alle Geräte wird das gleiche Bild verwendet große Dateien für Smartphones Abhängigkeit von JavaScript
Ressourcen http://imulus.github.io/retinajs
Vie
wpo
rt
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 32: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/32.jpg)
32
Adaptive Images
![Page 33: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/33.jpg)
33
Adaptive ImagesNachteile
benötigt JavaScript zum Erkennen der Bildschirmgröße berücksichtigt nur die Bildschirmgröße lässt keine Ausspielung der Grafiken speziell für mehrspaltige Layouts abhängig der Spaltenbreiten zu
Ressourcen http://adaptive-images.com
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
Vie
wpo
rt
![Page 34: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/34.jpg)
34
Focal Point
![Page 35: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/35.jpg)
35
Focal PointNachteile
kein Einfluss auf die zu ladende Datei Ressourcen
http://designshack.net/articles/… http://goo.gl/qez0Yt http://www.cdnconnect.com/d… http://goo.gl/ciEmkJ
Vie
wpo
rt
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 36: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/36.jpg)
36
![Page 37: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/37.jpg)
37
Neue Elemente und Attribute
![Page 38: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/38.jpg)
38
Attribut: srcset
![Page 39: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/39.jpg)
39
Attribut: srcset
![Page 40: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/40.jpg)
40
Ausgabe abhängig vom Display
![Page 41: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/41.jpg)
41
Attribut: srcsetV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 42: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/42.jpg)
42
Ausgabe abhängig vom Viewport
![Page 43: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/43.jpg)
43
Attribut: srcset
![Page 44: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/44.jpg)
44
Attribut: srcset
![Page 45: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/45.jpg)
45
Attribut: srcsetV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 46: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/46.jpg)
46
Attribut: sizes
![Page 47: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/47.jpg)
47
Attribut: sizes
![Page 48: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/48.jpg)
48
Attribut: srcset/sizes
![Page 49: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/49.jpg)
49
Attribut: srcset/sizes
![Page 50: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/50.jpg)
50
Attribut: srcset/sizes
![Page 51: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/51.jpg)
51
Attribut: srcset/sizes
![Page 52: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/52.jpg)
52
Attribut: srcset/sizesV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 53: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/53.jpg)
53
Element: <picture>
![Page 54: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/54.jpg)
54
<picture>-Element
![Page 55: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/55.jpg)
55
Art Direction „Das Motiv verändern“
![Page 56: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/56.jpg)
56
<picture>-Element
![Page 57: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/57.jpg)
57
<picture>-Element
http://www.fotocommunity.de/pc/pc/display/24344628
![Page 58: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/58.jpg)
58
<picture>-ElementV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
inkl. IE-Support
![Page 59: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/59.jpg)
59
Verschiedene Dateiformate
![Page 60: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/60.jpg)
60
<picture>-ElementV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 61: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/61.jpg)
61
Kombination
![Page 62: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/62.jpg)
62
<picture>-ElementV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 63: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/63.jpg)
63
<picture>-ElementV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
![Page 64: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/64.jpg)
64
Browser-Support
![Page 65: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/65.jpg)
65
Browser-Support: srcset
caniuse.com/#feat=srcset
![Page 66: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/66.jpg)
66
Browser-Support: <picture>
caniuse.com/#feat=picture
![Page 67: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/67.jpg)
67
Picturefill
![Page 68: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/68.jpg)
PicturefillJavaScript-Polyfill für das <picture>-Element und die neuen Attribute
Entwickelt und betreut von der filament group (http://filamentgroup.com/) http://scottjehl.github.io/picturefill/
68
![Page 69: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/69.jpg)
69
Nutzen!!!
![Page 70: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/70.jpg)
Performance
70
![Page 71: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/71.jpg)
PerformanceDie neuen Möglichkeiten werden dafür sorgen die Performance steigern zu können
Weitere Hinweise zur Performance-Steigerung Verringerung der http-Requests Komprimierung und Kompression von geladenen Ressourcen Caching nutzen
71
![Page 72: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/72.jpg)
…und Contao?
72
![Page 73: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/73.jpg)
…und Contao?
73
![Page 74: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/74.jpg)
…und Contao?
74
![Page 75: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/75.jpg)
…und Contao?
75
![Page 76: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/76.jpg)
…und Contao?
76
![Page 77: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/77.jpg)
…und Contao?
77
![Page 78: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/78.jpg)
…und Contao?
78
![Page 79: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/79.jpg)
…und Contao?
79
![Page 80: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/80.jpg)
…und Contao?Ab Version 3.4.0
https://github.com/contao/core/issues/6932
80
![Page 81: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/81.jpg)
81
…nutzt die neuen Möglichkeiten!
…denkt an die Performance…
Macht euch mit der neuen Syntax bekannt…
![Page 82: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/82.jpg)
Ressourcenhttp://responsiveimages.org/
http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#the-source-element-when-used-with-the-picture-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#the-picture-element
http://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/
http://dev.opera.com/articles/responsive-images/
https://developers.google.com/speed/webp/
82
![Page 83: Die Sache mit den Bildern - contao.ninja€¦ · Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Nutzung](https://reader033.vdocuments.site/reader033/viewer/2022052801/5f1668c49975121b977290e4/html5/thumbnails/83.jpg)
83
DMA GmbHJanosch Oltmanns +49 231 [email protected]
www.dma.do/oltmanns
@dmadortmund@JanoschOltmanns