Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Bilder einbinden
ist kein Thema,
oder?
Walter Ebert @wltrd
DrupalCamp Essen 24./25. Oktober 2015
Walter Ebert
@wltrd
walterebert.de
slideshare.net/walterebert
img
<img src="bild.jpg" alt="Alternativtext">
http://webaim.org/techniques/alttext/
img
<img src="bild.jpg"
alt="Alternativtext"
title="Beschreibungstext">
img
<img src="bild.jpg"
alt="Alternativtext"
title="Beschreibungstext">
https://www.paciellogroup.com/blog/2012/01/html5-a...
img
<img src="bild.jpg"
alt="Alternativtext"
longdesc="http://beispiel.de/bildbeschreibung">
img
<a href="http://beispiel.de/bildbeschreibung">
<img src="bild.jpg" alt="Alternativtext">
</a>
img
<img src="deko.jpg" alt="">
HTML
<div class="deko">...</div>
CSS
.deko {
background: url(deko.jpg) no-repeat left center;
}
img
<img src="bild.jpg"
width="300"
height="300">
Fluid
img {
max-width: 100%;
height: auto;
}
Bildformate
GIF
JPEG
PNG
Bildformate
GIF
JPEG
PNG
Gut für Logos / Grafiken.
Transparenz.
Maximal 256 Farben.
Animationen.
https://de.wikipedia.org/...
Bildformate
GIF
JPEG
PNG
Gut für Fotos.
Keine Transparenzen.
https://de.wikipedia.org/wiki/JPEG_File_Interchange_Format
Bildformate
GIF
JPEG
PNG Gut für Logos / Grafiken.
Transparenzstufen.
https://de.wikipedia.org/wiki/Portable_Network_Graph...
Bildformate
GIF
JPEG
PNG
SVG Vektorgrafiken.
Animationen.
Stylbar über CSS.
https://css-tricks.com/using-svg/
http://saras...
Bildformate
GIF
JPEG
PNG
SVG
WebP
JXR
JPEG2000
https://developers.google.com/speed/webp/https://developers.google.com/speed/webp/
http://caniuse.com/#feat=webphttp://caniuse.com/#feat=webp
WebP mit Fallback
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg">
</picture>
http://jpeg.org/
http://httparchive.org/interesting.php#imageformatshttp://httparchive.org/interesting.php#imageformats
http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Oct+1+2015http://httparchive.org/trends.php?s=All&mi...
http://httparchive.org/interesting.php#bytesperpagehttp://httparchive.org/interesting.php#bytesperpage
63%
https://github.com/mozilla/mozjpeghttps://github.com/mozilla/mozjpeg
http://jpeg.org/jpegxt/http://jpeg.org/jpegxt/
Bilder optimieren
ImageOptim (Mac)
https://imageoptim.com/https://imageoptim.com/
https://github.com/JamieMason/ImageOptim...
imagemin
NPM
https://www.npmjs.com/package/image-min
gulp-imagemin
https://github.com/sindresorhus/gulp-imagemin
grunt-con...
https://developers.google.com/speed/pagespeed/insights/https://developers.google.com/speed/pagespeed/insights/
http://caniuse.com/#feat=svg-imghttp://caniuse.com/#feat=svg-img
SVG mit Fallback
<img src="bild.png" srcset="bild.svg">
<img src="bild.png" srcset="bild.svgz">
http://caniuse.com/#feat=s...
Inline SVG
<!DOCTYPE html>
<html>
...
<svg version="1.1" width="300" height="200">
<rect width="75" height="50" rx="20" ry...
Barrierefreiheit
<svg version="1.1" width="300" height="200">
<title>Grünes Rechteck</title>
<rect width="75" height="50" ...
SVG optimieren
Scour
http://www.codedread.com/scour/
SVGO
https://github.com/svg/svgo
SVGOMG (online)
https://jakearchibal...
Lazyloading
<img data-src="bild.jpg"
alt=""
width="300"
height="300"
class="b-lazy">
http://developer.telerik.com/featured...
https://developers.google.com/speed/pagespeed/modulehttps://developers.google.com/speed/pagespeed/module
HTML5 figure
<figure>
<img src="/bild.jpg" alt="Alternativtext">
<figcaption>
Beschreibung darf HTML enthalten <a rel="lic...
HTML5 figure
<figure>
<img src="/vorne.jpg" alt="Ansicht von vorne">
<img src="/rechts.jpg" alt="Ansicht von rechts">
<img...
http://responsiveimages.org/http://responsiveimages.org/
HTML5 srcset
<img src="default.jpg"
srcset="default.jpg 1x, retina.jpg 2x">
<img src="S.jpg"
sizes="(max-width: 800px) 100...
HTML5 picture
<picture>
<source srcset="S.jpg" media="(max-width: 800px)">
<source srcset="L.jpg" media="(min-width: 1281p...
https://www.drupal.org/project/picturehttps://www.drupal.org/project/picture
Iconfonts
Funktioniert nicht mit Benutzer-definierten
Schriften (z.B. wegen Lesestörungen)
In iOS9 kann man Support für We...
Iconfonts
Funktioniert nicht mit Benutzer-definierten
Schriften (z.B. wegen Lesestörungen)
In iOS9 kann man Support für We...
SVG-Sprites
<svg xmlns="http://www.w3.org/2000/svg"
style="display: none;">
<symbol id="icon-1" viewBox="214.7 0 182.6 792...
http://www.grumpicon.com/http://www.grumpicon.com/
https://github.com/filamentgroup/grunticonhttps://github.com/filamentgr...
https://github.com/jkphl/svg-spritehttps://github.com/jkphl/svg-sprite
Animated GIF
https://www.washingtonpost.com/news/the-switch/wp/2015/08/06/tesla-unveils-
weird-new-car-charging-robo-snake/
Animated GIF
GIF 4,3 MB
MP4 161 kB
ffmpeg -i video.gif -c:v libx264 -an -movflags faststart video.mp4
https://www.washingt...
Video
<video controls autoplay loop>
<source src="video.mp4" type="video/mp4">
<object data="flvplayer.swf"
type="applicat...
Veraltete Techniken wegen HTTP2
• Spriting
• Inlining
http://chimera.labs.oreilly.com/books/1230000000545/ch12.html
HTTP2 Server Push
PHP
if ($_SERVER['SERVER_PROTOCOL'] === 'HTTP/2.0') {
header('Link: </buehne.jpg>'; rel=preload; as=imag...
http://caniuse.com/#feat=http2http://caniuse.com/#feat=http2
walter.ebert.engineering
@wltrd
walterebert.de
slideshare.net/walterebert
Nächste SlideShare
Wird geladen in …5
×

Bilder einbinden ist kein Thema, oder?

1.511 Aufrufe

Veröffentlicht am

Vortrag zum DrupalCamp Essen 24. Oktober 2015

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Bilder einbinden ist kein Thema, oder?

  1. 1. Bilder einbinden ist kein Thema, oder? Walter Ebert @wltrd DrupalCamp Essen 24./25. Oktober 2015
  2. 2. Walter Ebert @wltrd walterebert.de slideshare.net/walterebert
  3. 3. img <img src="bild.jpg" alt="Alternativtext"> http://webaim.org/techniques/alttext/
  4. 4. img <img src="bild.jpg" alt="Alternativtext" title="Beschreibungstext">
  5. 5. img <img src="bild.jpg" alt="Alternativtext" title="Beschreibungstext"> https://www.paciellogroup.com/blog/2012/01/html5-accessibility-chops-title- attribute-use-and-abuse/
  6. 6. img <img src="bild.jpg" alt="Alternativtext" longdesc="http://beispiel.de/bildbeschreibung">
  7. 7. img <a href="http://beispiel.de/bildbeschreibung"> <img src="bild.jpg" alt="Alternativtext"> </a>
  8. 8. img <img src="deko.jpg" alt="">
  9. 9. HTML <div class="deko">...</div> CSS .deko { background: url(deko.jpg) no-repeat left center; }
  10. 10. img <img src="bild.jpg" width="300" height="300">
  11. 11. Fluid img { max-width: 100%; height: auto; }
  12. 12. Bildformate GIF JPEG PNG
  13. 13. Bildformate GIF JPEG PNG Gut für Logos / Grafiken. Transparenz. Maximal 256 Farben. Animationen. https://de.wikipedia.org/wiki/Graphics_Interchange_Format
  14. 14. Bildformate GIF JPEG PNG Gut für Fotos. Keine Transparenzen. https://de.wikipedia.org/wiki/JPEG_File_Interchange_Format
  15. 15. Bildformate GIF JPEG PNG Gut für Logos / Grafiken. Transparenzstufen. https://de.wikipedia.org/wiki/Portable_Network_Graphics
  16. 16. Bildformate GIF JPEG PNG SVG Vektorgrafiken. Animationen. Stylbar über CSS. https://css-tricks.com/using-svg/ http://sarasoueidan.com/tags/svg/
  17. 17. Bildformate GIF JPEG PNG SVG WebP JXR JPEG2000
  18. 18. https://developers.google.com/speed/webp/https://developers.google.com/speed/webp/
  19. 19. http://caniuse.com/#feat=webphttp://caniuse.com/#feat=webp
  20. 20. WebP mit Fallback <picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg"> </picture>
  21. 21. http://jpeg.org/
  22. 22. http://httparchive.org/interesting.php#imageformatshttp://httparchive.org/interesting.php#imageformats
  23. 23. 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)
  24. 24. http://httparchive.org/interesting.php#bytesperpagehttp://httparchive.org/interesting.php#bytesperpage 63%
  25. 25. https://github.com/mozilla/mozjpeghttps://github.com/mozilla/mozjpeg
  26. 26. http://jpeg.org/jpegxt/http://jpeg.org/jpegxt/
  27. 27. Bilder optimieren ImageOptim (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/
  28. 28. imagemin NPM https://www.npmjs.com/package/image-min gulp-imagemin https://github.com/sindresorhus/gulp-imagemin grunt-contrib-imagemin https://github.com/gruntjs/grunt-contrib-imagemin
  29. 29. https://developers.google.com/speed/pagespeed/insights/https://developers.google.com/speed/pagespeed/insights/
  30. 30. http://caniuse.com/#feat=svg-imghttp://caniuse.com/#feat=svg-img
  31. 31. 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=srcset http://walterebert.com/playground/html5/img-svg/http://walterebert.com/playground/html5/img-svg/
  32. 32. 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>
  33. 33. 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/
  34. 34. SVG optimieren Scour http://www.codedread.com/scour/ SVGO https://github.com/svg/svgo SVGOMG (online) https://jakearchibald.github.io/svgomg/
  35. 35. 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-del ay-loading-of-images/
  36. 36. https://developers.google.com/speed/pagespeed/modulehttps://developers.google.com/speed/pagespeed/module
  37. 37. 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/
  38. 38. 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/
  39. 39. http://responsiveimages.org/http://responsiveimages.org/
  40. 40. 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/
  41. 41. 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/
  42. 42. https://www.drupal.org/project/picturehttps://www.drupal.org/project/picture
  43. 43. Iconfonts Funktioniert 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
  44. 44. Iconfonts Funktioniert 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
  45. 45. 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/
  46. 46. http://www.grumpicon.com/http://www.grumpicon.com/ https://github.com/filamentgroup/grunticonhttps://github.com/filamentgroup/grunticon
  47. 47. https://github.com/jkphl/svg-spritehttps://github.com/jkphl/svg-sprite
  48. 48. Animated GIF https://www.washingtonpost.com/news/the-switch/wp/2015/08/06/tesla-unveils- weird-new-car-charging-robo-snake/
  49. 49. 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/
  50. 50. 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=mpeg4 http://walterebert.com/blog/video-autoplay-on-mobile/
  51. 51. Veraltete Techniken wegen HTTP2 • Spriting • Inlining http://chimera.labs.oreilly.com/books/1230000000545/ch12.html
  52. 52. 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_PUSH https://w3c.github.io/preload/
  53. 53. http://caniuse.com/#feat=http2http://caniuse.com/#feat=http2
  54. 54. walter.ebert.engineering @wltrd walterebert.de slideshare.net/walterebert

×