High Performance Images
0 likes5,962 views
The document discusses various image formats (GIF, PNG, JPEG), optimization tools, responsive image techniques (srcset, picture), lazy loading, icon fonts versus SVG sprites, and video optimization. It provides information on each topic and examples of how to implement the different techniques for optimizing images and other assets for faster page loads.
High Performance Images
- 4. GPRS EDGE UMTS HSDPA LTE 1 10 100 1000 10000 100000 http://commons.wikimedia.org/wiki/File:MobileBitRate-logScale.svg
- 8. Bildformate GIF PNG JPEG Gut für Logos / Grafiken Transparenz Maximal 256 Farben Animationen https://de.wikipedia.org/wiki/Graphics_Interchange_Format
- 9. Bildformate GIF PNG JPEG Gut für Logos / Grafiken Transparenz Maximal 256 Farben Animationen Optimieren: Gifsicle https://de.wikipedia.org/wiki/Graphics_Interchange_Format
- 10. Bildformate GIF PNG JPEG Gut für Logos / Grafiken Transparenzstufen PNG8 = 256 Farben (± 21% kleiner als GIF) Komprimierung einstellbar 1 – 9 (gzip) https://de.wikipedia.org/wiki/Portable_Network_Graphics http://www.phpied.com/give-png-a-chance/
- 11. Bildformate GIF PNG JPEG Gut für Logos / Grafiken Transparenzstufen PNG8 = 256 Farben (± 21% kleiner als GIF) Komprimierung einstellbar 1 – 9 (gzip) Optimieren: pngcrush, optipng, advpng, pngout, pngquant, zopflipng https://de.wikipedia.org/wiki/Portable_Network_Graphics http://www.phpied.com/give-png-a-chance/
- 12. Bildformate GIF PNG JPEG Gut für Fotos Keine Transparenzen Bildqualität einstellbar 1% - 100% https://de.wikipedia.org/wiki/JPEG_File_Interchange_Format
- 13. Bildformate GIF PNG JPEG Gut für Fotos Keine Transparenzen Bildqualität einstellbar 1% - 100% Optimieren: jpegoptim, jpegtran, mozjpeg https://de.wikipedia.org/wiki/JPEG_File_Interchange_Format
- 16. 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/
- 17. Inline SVG <!DOCTYPE html> <html> ... <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> ... </html>
- 20. WebP mit Fallback <picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg"> </picture>
- 21. JPEG-XR, JPEG-2000, WebP + JPEG <picture> <source srcset="image.jxr" type="image/vnd.ms-photo"> <source srcset="image.jp2" type="image/jp2"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture> Safari IE Chrome
- 27. Desktop-Werkzeuge 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. Nicht Verlustfreie Optimierung ImageAlpha (Mac) https://pngmini.com/https://pngmini.com/ Imagemin App (Mac, Windows, Linux)Imagemin App (Mac, Windows, Linux) https://github.com/imagemin/imagemin-apphttps://github.com/imagemin/imagemin-app JPEGmini (Mac, Windows)JPEGmini (Mac, Windows) http://www.jpegmini.com/http://www.jpegmini.com/ cjpeg-dssimcjpeg-dssim https://github.com/technopagan/cjpeg-dssimhttps://github.com/technopagan/cjpeg-dssim
- 31. jpegtran 742K jpegtran -copy none -optimize 708K jpegtran -copy none -optimize -progressive mozjpeg 704K jpegtran -copy none 697K jpegtran -copy none -fastcrush Original JPEG 853K 2592 x 1456 pixel
- 32. 5,6M PNG 1,5M FLIF 318K WebP 284K BPG Original JPEG 853K 2592 x 1456 pixel
- 33. 697K JPEG quality 85 588K JPEG quality 75 327K JPEG quality 50 319K cjpeg-dssim 5,6M PNG 1,5M FLIF 318K WebP 284K BPG Original JPEG 853K 2592 x 1456 pixel
- 34. 225K JPEG 1024 x 575 96K JPEG 640 x 360 40K JPEG 320 x 180 5,6M PNG 1,5M FLIF 318K WebP 284K BPG 697K JPEG q 85 588K JPEG q 75 327K JPEG q 50 319K cjpeg-dssim Original JPEG 853K 2592 x 1456 pixel
- 35. In 2012 waren 86% der responsive Webseiten in der Mobil-Ansicht genau so schwer wie in der Desktop-Ansicht http://www.guypo.com/performance-implications-of-responsive-design-book-contribution/
- 37. HTML5 srcset <img src="default.jpg" srcset="default.jpg 1x, retina.jpg 2x"> http://blog.cloudfour.com/responsive-images-101-definitions/
- 38. 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 400w, M.jpg 800w, L.jpg 1600w"> http://blog.cloudfour.com/responsive-images-101-definitions/
- 39. HTML5 picture <picture> <source srcset="S.jpg" media="(max-width: 600px)"> <source srcset="L.jpg" media="(min-width: 1200px)"> <img src="M.jpg" alt""> </picture> http://blog.cloudfour.com/responsive-images-101-definitions/
- 40. Responsive Image Webdienste Cloudinary http://cloudinary.com/ Responsive Image Breakpoints Generator http://www.responsivebreakpoints.com/ imgix https://www.imgix.com/ Resize.ly https://resize.ly/ ReSRC.it https://www.resrc.it/
- 42. Lazy-loading <img src="bild.jpg" alt="" lazyload>
- 43. Lazy-loading <img src="bild.jpg" alt="" lazyload> Ab IE 11 https://msdn.microsoft.com/en-us/library/dn369270%28v=vs.85%29.aspx
- 44. Lazy-loading mit JavaScript <script src="lazysizes.min.js" async></script> <!-- non-responsive: --> <img data-src="image.jpg" class="lazyload"> <!-- responsive example --> <img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload"> https://github.com/aFarkas/lazysizes
- 45. Low Quality Image Placeholders (LQIP) <script src="lazysizes.min.js" async></script> <img src="lqip-src.jpg" data-src="image.jpg" class="lazyload" alt=""> http://www.guypo.com/introducing-lqip-low-quality-image-placeholders/
- 47. Lazy-loading mit <template> <ul class="cardlist"> <li class="card"><img src="a-push-please.jpg" alt=""></li> <li class="card"><img src="baby-hippo-nom.jpg" alt=""></li> <template> <li class="card"><img src="baby-rhino.jpg" alt=""></li> <li class="card"><img src="derpy-hedgehog.jpg" alt=""></li> </template> </ul> https://www.christianheilmann.com/2015/09/08/quick-trick-using-template-to-delay-loading-of-images/ http://caniuse.com/#feat=template
- 48. Lazy-loading mit <template> <script> window.addEventListener('load', function(ev) { if ('content' in document.createElement('template')) { var t = document.querySelector('template'), list = t.parentNode, contents = t.innerHTML; list.removeChild(t); list.innerHTML += contents; } }); </script> https://www.christianheilmann.com/2015/09/08/quick-trick-using-template-to-delay-loading-of-images/ http://caniuse.com/#feat=template
- 49. 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)
- 50. 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/
- 55. Animated GIF GIF = 4,3 MB WebP = 3,3 MB MP4 = 143 kB ffmpeg -i video.gif -c:v libx264 -an -movflags faststart -pix_fmt yuv420p -s 544x292 video.mp4
- 56. Video <video controls autoplay muted loop> <source src="video.mp4" type="video/mp4"> <img src="fallback.jpg" alt="Video Screenshot"> </video> http://caniuse.com/#feat=mpeg4 http://walterebert.com/blog/video-autoplay-on-mobile/ http://walterebert.com/blog/removing-audio-from-video-with-ffmpeg/
- 57. Veraltete Techniken wegen HTTP2 • Spriting • Inlining http://chimera.labs.oreilly.com/books/1230000000545/ch12.html