Download - Bilder einbinden ist kein Thema, oder?
![Page 1: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/1.jpg)
Bilder einbinden ist kein Thema,
oder?Walter Ebert @wltrd
DrupalCamp Essen 24./25. Oktober 2015
![Page 2: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/2.jpg)
Walter Ebert
@wltrd
walterebert.de
slideshare.net/walterebert
![Page 3: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/3.jpg)
img
<img src="bild.jpg" alt="Alternativtext">
http://webaim.org/techniques/alttext/
![Page 4: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/4.jpg)
img
<img src="bild.jpg"
alt="Alternativtext"
title="Beschreibungstext">
![Page 5: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/5.jpg)
img
<img src="bild.jpg"
alt="Alternativtext"
title="Beschreibungstext">
https://www.paciellogroup.com/blog/2012/01/html5-accessibility-chops-title-attribute-use-and-abuse/
![Page 6: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/6.jpg)
img
<img src="bild.jpg"
alt="Alternativtext"
longdesc="http://beispiel.de/bildbeschreibung">
![Page 7: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/7.jpg)
img
<a href="http://beispiel.de/bildbeschreibung">
<img src="bild.jpg" alt="Alternativtext">
</a>
![Page 8: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/8.jpg)
img
<img src="deko.jpg" alt="">
![Page 9: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/9.jpg)
HTML<div class="deko">...</div>
CSS
.deko {
background: url(deko.jpg) no-repeat left center;
}
![Page 10: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/10.jpg)
img
<img src="bild.jpg"
width="300"
height="300">
![Page 11: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/11.jpg)
Fluid
img {
max-width: 100%;
height: auto;
}
![Page 12: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/12.jpg)
BildformateGIF
JPEG
PNG
![Page 13: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/13.jpg)
BildformateGIF
JPEG
PNG
Gut für Logos / Grafiken.Transparenz.Maximal 256 Farben.Animationen.
https://de.wikipedia.org/wiki/Graphics_Interchange_Format
![Page 14: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/14.jpg)
BildformateGIF
JPEG
PNG
Gut für Fotos.Keine Transparenzen.
https://de.wikipedia.org/wiki/JPEG_File_Interchange_Format
![Page 15: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/15.jpg)
BildformateGIF
JPEG
PNG Gut für Logos / Grafiken.Transparenzstufen.
https://de.wikipedia.org/wiki/Portable_Network_Graphics
![Page 16: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/16.jpg)
BildformateGIF
JPEG
PNG
SVG Vektorgrafiken.Animationen.Stylbar über CSS.
https://css-tricks.com/using-svg/http://sarasoueidan.com/tags/svg/
![Page 17: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/17.jpg)
BildformateGIF
JPEG
PNG
SVG
WebP
JXR
JPEG2000
![Page 18: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/18.jpg)
https://developers.google.com/speed/webp/https://developers.google.com/speed/webp/
![Page 20: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/20.jpg)
WebP mit Fallback
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg">
</picture>
![Page 22: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/22.jpg)
http://httparchive.org/interesting.php#imageformatshttp://httparchive.org/interesting.php#imageformats
![Page 23: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/23.jpg)
http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Oct+1+2015http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Oct+1+2015
702kB (2010) 1976kB (2015)
![Page 24: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/24.jpg)
http://httparchive.org/interesting.php#bytesperpagehttp://httparchive.org/interesting.php#bytesperpage
63%
![Page 25: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/25.jpg)
https://github.com/mozilla/mozjpeghttps://github.com/mozilla/mozjpeg
![Page 27: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/27.jpg)
Bilder optimierenImageOptim (Mac)https://imageoptim.com/https://imageoptim.com/
https://github.com/JamieMason/ImageOptim-CLIhttps://github.com/JamieMason/ImageOptim-CLI
FileOptimizer (Windows)FileOptimizer (Windows)http://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/http://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/
Trimage (Linux)Trimage (Linux)http://trimage.org/http://trimage.org/
![Page 28: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/28.jpg)
imageminNPMhttps://www.npmjs.com/package/image-min
gulp-imageminhttps://github.com/sindresorhus/gulp-imagemin
grunt-contrib-imageminhttps://github.com/gruntjs/grunt-contrib-imagemin
![Page 29: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/29.jpg)
https://developers.google.com/speed/pagespeed/insights/https://developers.google.com/speed/pagespeed/insights/
![Page 30: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/30.jpg)
http://caniuse.com/#feat=svg-imghttp://caniuse.com/#feat=svg-img
![Page 31: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/31.jpg)
SVG mit Fallback
<img src="bild.png" srcset="bild.svg">
<img src="bild.png" srcset="bild.svgz">
http://caniuse.com/#feat=srcsethttp://caniuse.com/#feat=srcsethttp://walterebert.com/playground/html5/img-svg/http://walterebert.com/playground/html5/img-svg/
![Page 32: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/32.jpg)
Inline SVG<!DOCTYPE html>
<html>
...<svg version="1.1" width="300" height="200">
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>
...
</html>
![Page 33: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/33.jpg)
Barrierefreiheit
<svg version="1.1" width="300" height="200">
<title>Grünes Rechteck</title>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>
http://www.sitepoint.com/tips-accessible-svg/
![Page 34: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/34.jpg)
SVG optimierenScourhttp://www.codedread.com/scour/
SVGOhttps://github.com/svg/svgo
SVGOMG (online) https://jakearchibald.github.io/svgomg/
![Page 35: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/35.jpg)
Lazyloading
<img data-src="bild.jpg"
alt=""
width="300"
height="300"
class="b-lazy">
http://developer.telerik.com/featured/lazy-loading-images-on-the-web/http://dinbror.dk/blazy/https://www.christianheilmann.com/2015/09/08/quick-trick-using-template-to-delay-loading-of-images/
![Page 36: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/36.jpg)
https://developers.google.com/speed/pagespeed/modulehttps://developers.google.com/speed/pagespeed/module
![Page 37: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/37.jpg)
HTML5 figure
<figure>
<img src="/bild.jpg" alt="Alternativtext">
<figcaption>
Beschreibung darf HTML enthalten <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
Creative Commons Namensnennung 4.0 International Lizenz</a>.
</figcaption>
</figure>
http://html5doctor.com/the-figure-figcaption-elements/
![Page 38: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/38.jpg)
HTML5 figure<figure>
<img src="/vorne.jpg" alt="Ansicht von vorne">
<img src="/rechts.jpg" alt="Ansicht von rechts">
<img src="/links.jpg" alt="Ansicht von links">
<figcaption>
Beschreibung darf HTML enthalten <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
Creative Commons Namensnennung 4.0 International Lizenz</a>.
</figcaption>
</figure>
http://html5doctor.com/the-figure-figcaption-elements/
![Page 39: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/39.jpg)
http://responsiveimages.org/http://responsiveimages.org/
![Page 40: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/40.jpg)
HTML5 srcset
<img src="default.jpg"
srcset="default.jpg 1x, retina.jpg 2x">
<img src="S.jpg"
sizes="(max-width: 800px) 100vw, 70vw"
srcset="S.jpg 480w, M.jpg 1280w, L.jpg 1920w">
http://blog.cloudfour.com/responsive-images-101-definitions/
![Page 41: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/41.jpg)
HTML5 picture
<picture>
<source srcset="S.jpg" media="(max-width: 800px)">
<source srcset="L.jpg" media="(min-width: 1281px)">
<img src="M.jpg" alt"">
</picture>
http://blog.cloudfour.com/responsive-images-101-definitions/
![Page 42: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/42.jpg)
https://www.drupal.org/project/picturehttps://www.drupal.org/project/picture
![Page 43: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/43.jpg)
IconfontsFunktioniert nicht mit Benutzer-definierten Schriften (z.B. wegen Lesestörungen)
In iOS9 kann man Support für Webfonts deaktivieren
Kein Support in Opera Mini (277M Benutzer)
Seren Davies: Death to icon fonts ->
https://www.youtube.com/watch?v=9xXBYcWgCHA
![Page 44: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/44.jpg)
IconfontsFunktioniert nicht mit Benutzer-definierten Schriften (z.B. wegen Lesestörungen)
In iOS9 kann man Support für Webfonts deaktivieren
Kein Support in Opera Mini (277M Benutzer)
Seren Davies: Death to icon fonts
https://www.youtube.com/watch?v=9xXBYcWgCHA
![Page 45: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/45.jpg)
SVG-Sprites<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="icon-1" viewBox="214.7 0 182.6 792"> <!-- ... --> </symbol> <symbol id="icon-2" viewBox="0 26 100 48"> <!-- ... --> </symbol></svg>
<svg class="icon"> <use xlink:href="#icon-1" /></svg>
https://css-tricks.com/svg-symbol-good-choice-icons/
![Page 46: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/46.jpg)
http://www.grumpicon.com/http://www.grumpicon.com/https://github.com/filamentgroup/grunticonhttps://github.com/filamentgroup/grunticon
![Page 47: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/47.jpg)
https://github.com/jkphl/svg-spritehttps://github.com/jkphl/svg-sprite
![Page 48: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/48.jpg)
Animated GIF
https://www.washingtonpost.com/news/the-switch/wp/2015/08/06/tesla-unveils-weird-new-car-charging-robo-snake/
![Page 49: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/49.jpg)
Animated GIF
GIF 4,3 MB
MP4 161 kB
ffmpeg -i video.gif -c:v libx264 -an -movflags faststart video.mp4
https://www.washingtonpost.com/news/the-switch/wp/2015/08/06/tesla-unveils-weird-new-car-charging-robo-snake/
![Page 50: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/50.jpg)
Video
<video controls autoplay loop>
<source src="video.mp4" type="video/mp4">
<object data="flvplayer.swf"
type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie">
<param name="flashvars" value="file=video.mp4">
</object>
</video>
http://caniuse.com/#feat=mpeg4http://walterebert.com/blog/video-autoplay-on-mobile/
![Page 51: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/51.jpg)
Veraltete Techniken wegen HTTP2
• Spriting
• Inlining
http://chimera.labs.oreilly.com/books/1230000000545/ch12.html
![Page 52: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/52.jpg)
HTTP2 Server Push
PHP
if ($_SERVER['SERVER_PROTOCOL'] === 'HTTP/2.0') {
header('Link: </buehne.jpg>'; rel=preload; as=image);
}
HTML
<link rel="preload" href="/buehne.jpg" as="image">
http://chimera.labs.oreilly.com/books/1230000000545/ch12.html#HTTP2_PUSHhttps://w3c.github.io/preload/
![Page 53: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/53.jpg)
http://caniuse.com/#feat=http2http://caniuse.com/#feat=http2
![Page 54: Bilder einbinden ist kein Thema, oder?](https://reader034.vdocuments.pub/reader034/viewer/2022042707/587a10451a28ab01268b790d/html5/thumbnails/54.jpg)
walter.ebert.engineering@wltrd
walterebert.de
slideshare.net/walterebert