peter müller responsive bilder im html - contao › files › conference › 2016 › papers ›...
TRANSCRIPT
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 1
Responsive BilderimHTMLundContao
PeterMüller pmueller.de19. Mai 2016um 11.30 Uhr
�
PeterMüller
pmueller.de
Responsive BilderimHTML
I. Die Einführung
II. Die Anwendungsfälle• Unterschiedliche Pixeldichte• Unterschiedliche Viewportbreite • Unterschiedliche Bildmotive
III. Kurzes Fazit
IV. Responsive Bilder in Contao
No OneSaidItWould BeEasy...
I.DieEinführung
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 2
ResponsiveBilderbis2014
¨ VordemHochladenn Bildgrößeoptimierenn Grafikdateikomprimieren(JPEGmini&Co)
¨ FlexibilisierungimCSSimg {
max-width: 100%; height: auto;
}
¨ »Onesizefitsall«- allebekommendieselbeGrafikresponsiveimages.org
NeuesHTML:<img> wirderweitert
1.<img>plusneueAttribute:<img src=" " alt=" " srcset=" " sizes=" ">
2.<img>plusneueElementeundneueAttribute:<picture>
<source srcset=" " media=" " sizes=" " ...><img src=" " alt=" ">
</picture>
twitter.com/malarkey/status/458336077934522368
Responsive BilderimHTML
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 3
twitter.com/smashingmag/status/702469919817011200
Responsive BilderimHTML
aka»use cases»
II.DieAnwendungsfälle
VierAnwendungsfälle
1. UnterschiedlichePixeldichte2. UnterschiedlicheViewport-Breite
3. UnterschiedlicheBildmotive
4. UnterschiedlicheDateiformate
<img srcset>
<picture>
Der X-Faktor:<img> und srcset x
1.Unterschiedliche Pixeldichte
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 4
EinPixelisteinPixelisteinPixel...
¨ TraditionelleBildschirmen EinPixelimCSSisteinPixelaufdemBildschirmn 1CSS-Pixel=1Geräte-Pixel(devicepixel)
¨ HochauflösendeBildschirmen EinPixelimCSSentsprichtx PixelaufdemBildschirmn 1CSS-Pixel=x Geräte-Pixeln Diesesx-VerhältnisheißtDevicePixelRatio(DPR)
<img> unddiePixeldichte:srcsetx
<img src="small.jpg" alt="" width="" height="" srcset="medium.jpg 2x, large.jpg 3x">
srcsetdefinierteinenSatzvonGrafikdateien
x-WertgibtdieDevice-Pixel-Ratio an1x =DPR12x =DPR2etc.
Fazit:<img> und srcsetx
¨ Relativeinfachzuverstehen
¨ ScharfeGrafikenaufallenBildschirmen¨ Nichtresponsiv
¨ Gutz.B.fürLogos
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 5
Tausche xgegen w:<img>, srcset w und sizes
2.UnterschiedlicheViewportbreite
DerBrowserstelltsichvierFragen
1. WiehochistdiePixeldichtedesBildschirms?
2. WiebreitistderViewport?
3. WiebreitistdieGrafikdateiinPixel?
4. WiebreitsolldieGrafikdargestelltwerden?
DerBrowsernurzweiAntworten
Frage Autor Browser
1. PixeldichtedesBildschirms nein ja
2. BreitedesViewports nein ja
3. BreitederGrafikdatei ja nein
4. GewünschteDarstellungsbreite ja nein
...diedritte Antwort lautet srcset wwiewidth
VierFragenund ...
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 6
<img> unddieViewportbreite:srcsetw
<img src="small.jpg" alt="" srcset="small.jpg 400w,
medium.jpg 800w, large.jpg 1600w,xlarge.jpg 3200w">
srcsetdefinierteinenSatzvonGrafikdateien
w wiewidthgibtdieBreitederGrafikdateiinPixelan
srcsetw istdiedritteAntwort
Frage Autor Browser
1. PixeldichtedesBildschirms nein ja
2. BreitedesViewports nein ja
3. BreitederGrafikdatei ja ja,srcset plus w-Wert
4. GewünschteDarstellungsbreite ja nein
DasAttribut sizes
DievierteAntwort
<img>,srcsetw und sizes
<img src="small.jpg" alt="" srcset="small.jpg 400w,
medium.jpg 800w, large.jpg 1600w,xlarge.jpg 3200w"
sizes="100vw">
sizesStandardwert istsizes="100vw" (viewportwidth)DefiniertdiegewünschteDarstellungsbreitedesBildesBieteteineBerechnungsgrundlagefürdenBrowserAndereEinheitenwie px sinderlaubt(abernicht%)
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 7
srcsetw+sizes =vierAntworten
Frage AutorderWebseite Browser
1. PixeldichtedesBildschirms nein ja
2. BreitedesViewports nein ja
3. BreitederGrafikdatei ja ja,srcset plus w-Wert
4. GewünschteDarstellungsbreite ja ja,sizes
DiePixeldichtedesBildschirmswirdautomatischberücksichtigt!
bradfrost.com/blog/post/responsive-images/
sizes kannMediaQueries enthalten
DieZugabe
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 8
sizes kannMediaQueriesenthalten
<img src="small.jpg" alt="" srcset="small.jpg 400w,
medium.jpg 800w, large.jpg 1600w,xlarge.jpg 3200w"
sizes="(min-width:600px) 50vw, 100vw">
sizesGrafikenimViewportab600pxBreitenur50vwAnsonsten100vwNurMediaFeatureswie (min-width:600px)50vw erlaubtKeineMedientypenwie@mediascreen
Fazit:Unterschiedliche Viewportbreite
¨ <img>,srcsetw undsizesn DieselbeGrafikinunterschiedlichenVersionenn BerücksichtigtwerdenViewportbreiteundPixeldichten AutorgibtInfos,aberderBrowserentscheidet.n VergleichsweisewenigArbeitfürdenAutoren.n Browserunterstützungistziemlichgut.n ReichtinvielenFällenvölligaus.
»Art direction« mit<picture>, <source>, media undsrcset
3.Unterschiedliche Bildmotive
DieSyntaxvon <picture> - Beispiel
<picture><source media="(min-width:600px)" srcset="medium.jpg">
<source srcset="ausschnitt.jpg">
<img src="small.jpg" alt="Foto - Altstadt von Porto">
</picture>
¨ MediaQueries in<sourcemedia="">n <source> wirdvonobennachuntenabgearbeitet.n DieerstepassendeMediaQuerywirdgenommen.n Reihenfolgeder<source>-Elementeistalsowichtig!
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 9
ab 600px: komplettes Bild bis 600px: Ausschnitt Beispiel:<picture> inkl.Pixeldichte
<picture><source media="(min-width:600px)"
srcset="medium.jpg 1x, large.jpg 2x">
<source srcset="small-crop.jpg 1x, medium-crop.jpg 2x">
<img src="small.jpg" alt="Foto - Altstadt von Porto">
</picture>
UnterschiedlicheBildmotivemit<picture>
¨ DerAutor...n ...istRegisseur(»artdirector«)n Erbestimmtundentscheidet.n DerBrowserhatkeinenSpielraum.
¨ Pixeldichtewirdnichtautomatischberücksichtigt¨ <picture> istimVergleichzu<imgsrcset>
n wenigerflexibeln VielmehrArbeitfürdenAutoren
Die QualderWahl:<imgsrcset> oder <picture>
III.KurzesFazit
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 10
twitter.com/smashingmag/status/702469919817011200
Responsive BilderimHTML Überblick
¨ <img>,srcsetw undsizesn DerAutorliefertInfos,derBrowserentscheidet.n FürPixeldichteundunterschiedlicheViewportbreiten SehrflexibleLösungundoftausreichend
¨ <picture>&Con DerAutorentscheidet,derBrowserführtaus.n Für»artdirection«undunterschiedlicheDateiformaten JemehrWünsche,destoaufwändigerdieUmsetzung
<imgsrcset>80%
<picture>20%
Paretohilft
Nachhilfe füralte Browser
Picturefill
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 11
Optional:Picturefill füralteBrowser
¨ ResponsiveGrafiken mit srcsetw oderpicturen Browser, diees verstehen, bekommen optimale Grafiken.n Browser, diees nicht verstehen, bekommen <img src="">.
¨ Progressive Enhancement – soistdasWeb:n Jeder Browser bekommt mit <imgsrc=""> einBild.n Moderne Browser bekommen das optimale Bild.
¨ Nachhilfe perPicturefill istoptional!n InContaoaufWunsch integriertn Infound Download:scottjehl.github.io/picturefill/ twitter.com/smashingmag/status/702469930348900352
Optional:Picturefill füralteBrowser
Fazit:Responsive BilderimHTML
¨ VerschiedeneEinsatzmöglichkeitenn <img> undsrcsetx z.B.fürLogosn <img>,srcsetwundsizes =Pixeldichte/Viewportbreiten <picture> undCofür»artdirection«n Optional:Picturefill alsNachhilfefüralteBrowser
¨ Content-Management-Systemen solltenRedakteurenbeimHandlinghelfenn WordPress:srcsetw undsizes – abV4.4imCoren Contao:ResponsiveBilderseitV3.4imCore
Alldasund nochmehr in...
<werbung>
</werbung>
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 12
VonMartin Auswöger und Yannick Witschi
IV.Responsive BilderinContao
rocksolidthemes.com/de/contao/blog/responsive-images-picture-contao
Systemeinstellungen und Dateiverwaltung
Vorbereitungen inContao
Vorbereitungen inContao
¨ System– Einstellungen checkenn DateienundBilder – MaximaleGD-Bildbreiten Datei-Uploads– MaximaleBildbreite
¨ Dateiverwaltungn großeBilderhochladenn ContaoerzeugtkleinereVersionenautomatischn BeiFotosdenWichtigenTeildefinieren
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 13
1.Unterschiedliche Pixeldichte: <imgsrcset x>
Contao undPixeldichte
UnterschiedlichePixeldichte
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 14
2.Unterschiedliche Viewportbreite:<img>, srcset wund sizes
Contao undViewportbreite
Viewportbreite mit100vw
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 15
Viewportbreite mitMediaQuery
3.Unterschiedliches Bildmotiv: Wichtiger Teil
<picture>
Contao und»ArtDirection«
HTMLundCSS- Erweiterungen April2016
PeterMüller--- pmueller.de 16
4a.Bildmotiv - andererAusschnitt
4b.Bildmotiv – MediaQueries