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.

1. © 121WATT - André Goldmann
Bilder für das Web optimieren
Tools zur Optimierung & Checkliste

2. © 121WATT - André Goldmann
Bilder automatisch optimieren
2
https://kraken.io/

3. © 121WATT - André Goldmann
Bilder „manuell“ komprimieren
3
https://imageoptim.com/ (Mac)
http://pnggauntlet.com/ (Windows, Mac & Linux)

4. © 121WATT - André Goldmann
Bilder mit tinypng optimieren
4
https://tinypng.com/

5. © 121WATT - André Goldmann
Bilder in andere Formate konvertieren
5
https://cloudconvert.com/jpg-to-webp

6. © 121WATT - André Goldmann
Bilder für responsives Webdesign
http://www.imgix.com/
http://adaptive-images.com/

7. © 121WATT - André Goldmann
7
Bilder:
Checkliste: Optimierung für Bilder/Fotos

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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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“ ;)