Bilder für das Web optimieren

709 Aufrufe

Veröffentlicht am

In dieser Präsentation zeige ich dir wie du Bilder für das Internet optimieren kannst. Nicht nur um damit gefunden zu werden, sondern auch eine schnelle Performance sind heutzutage wichtig.

Veröffentlicht in: Internet
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
709
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Bilder für das Web optimieren

  1. 1. © 121WATT - André Goldmann Bilder für das Web optimieren Tools zur Optimierung & Checkliste
  2. 2. © 121WATT - André Goldmann Bilder automatisch optimieren 2 https://kraken.io/
  3. 3. © 121WATT - André Goldmann Bilder „manuell“ komprimieren 3 https://imageoptim.com/ (Mac)
 http://pnggauntlet.com/ (Windows, Mac & Linux)
  4. 4. © 121WATT - André Goldmann Bilder mit tinypng optimieren 4 https://tinypng.com/
  5. 5. © 121WATT - André Goldmann Bilder in andere Formate konvertieren 5 https://cloudconvert.com/jpg-to-webp
  6. 6. © 121WATT - André Goldmann Bilder für responsives Webdesign http://www.imgix.com/ http://adaptive-images.com/
  7. 7. © 121WATT - André Goldmann 7 Bilder: Checkliste: Optimierung für Bilder/Fotos
  8. 8. © 121WATT - André Goldmann 7 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken) Checkliste: Optimierung für Bilder/Fotos
  9. 9. © 121WATT - André Goldmann 7 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken) Bilddateinamen passend zum Keyword/Inhalt wählen Checkliste: Optimierung für Bilder/Fotos
  10. 10. © 121WATT - André Goldmann 7 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken) Bilddateinamen passend zum Keyword/Inhalt wählen Bildbeschreibung, Title- und Alt-Tag sind ausgefüllt Checkliste: Optimierung für Bilder/Fotos
  11. 11. © 121WATT - André Goldmann 7 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken) Bilddateinamen passend zum Keyword/Inhalt wählen Bildbeschreibung, Title- und Alt-Tag sind ausgefüllt Bilder nicht durch CSS- oder HTML-Angaben skalieren Checkliste: Optimierung für Bilder/Fotos
  12. 12. © 121WATT - André Goldmann 7 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken) Bilddateinamen passend zum Keyword/Inhalt wählen Bildbeschreibung, Title- und Alt-Tag sind ausgefüllt Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren, EXIF- & Meta-Tags entfernen (tinypng.com etc.) Checkliste: Optimierung für Bilder/Fotos
  13. 13. © 121WATT - André Goldmann 7 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken) Bilddateinamen passend zum Keyword/Inhalt wählen Bildbeschreibung, Title- und Alt-Tag sind ausgefüllt Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren, EXIF- & Meta-Tags entfernen (tinypng.com etc.) Icons als Font laden (http://fontawesome.io/, http://fontello.com/) Checkliste: Optimierung für Bilder/Fotos
  14. 14. © 121WATT - André Goldmann 7 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken) Bilddateinamen passend zum Keyword/Inhalt wählen Bildbeschreibung, Title- und Alt-Tag sind ausgefüllt Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren, EXIF- & Meta-Tags entfernen (tinypng.com etc.) Icons als Font laden (http://fontawesome.io/, http://fontello.com/) Image-Sprites verwenden (reduziert HTTP Requests) Checkliste: Optimierung für Bilder/Fotos
  15. 15. © 121WATT - André Goldmann 7 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken) Bilddateinamen passend zum Keyword/Inhalt wählen Bildbeschreibung, Title- und Alt-Tag sind ausgefüllt Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren, EXIF- & Meta-Tags entfernen (tinypng.com etc.) Icons als Font laden (http://fontawesome.io/, http://fontello.com/) Image-Sprites verwenden (reduziert HTTP Requests) Responsive Bilder nutzen (http://adaptive-images.com/ etc.) Checkliste: Optimierung für Bilder/Fotos
  16. 16. © 121WATT - André Goldmann 7 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken) Bilddateinamen passend zum Keyword/Inhalt wählen Bildbeschreibung, Title- und Alt-Tag sind ausgefüllt Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren, EXIF- & Meta-Tags entfernen (tinypng.com etc.) Icons als Font laden (http://fontawesome.io/, http://fontello.com/) Image-Sprites verwenden (reduziert HTTP Requests) Responsive Bilder nutzen (http://adaptive-images.com/ etc.) Einsatz vom HTML5 <picture>-Element überdenken Checkliste: Optimierung für Bilder/Fotos
  17. 17. © 121WATT - André Goldmann Fragen? 8 André Goldmann
 andre.goldmann@121watt.de
 @pixeldreher 121WATT
 Luise-Ullrich-Str. 20
 80636 München Tel.: 089 / 416 126 993 @121WATTT | info@121watt.de
 www.121watt.de 3fach „T“ ;)

×