peter müller responsive bilder im html - contao › files › conference › 2016 › papers ›...

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