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



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




twitter.com/smashingmag/status/702469919817011200


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



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



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 ...



<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



3. BreitederGrafikdatei ja ja,srcset plus w-Wert

4. GewünschteDarstellungsbreite ja nein

DasAttribut sizes

DievierteAntwort

<img>,srcsetw und sizes


medium.jpg 800w, large.jpg 1600w,xlarge.jpg 3200w"

sizes="100vw">

sizesStandardwert istsizes="100vw" (viewportwidth)DefiniertdiegewünschteDarstellungsbreitedesBildesBieteteineBerechnungsgrundlagefürdenBrowserAndereEinheitenwie px sinderlaubt(abernicht%)



srcsetw+sizes =vierAntworten

Frage AutorderWebseite Browser



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



sizes kannMediaQueriesenthalten


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!



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



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



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>



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



1.Unterschiedliche Pixeldichte: <imgsrcset x>

Contao undPixeldichte

UnterschiedlichePixeldichte



2.Unterschiedliche Viewportbreite:<img>, srcset wund sizes

Contao undViewportbreite

Viewportbreite mit100vw



Viewportbreite mitMediaQuery

3.Unterschiedliches Bildmotiv: Wichtiger Teil

<picture>

Contao und»ArtDirection«



4a.Bildmotiv - andererAusschnitt

4b.Bildmotiv – MediaQueries

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

Documents