SlideShare a Scribd company logo
1 of 17
© 121WATT - André Goldmann
Bilder für das Web optimieren
Tools zur Optimierung & Checkliste
© 121WATT - André Goldmann
Bilder automatisch optimieren
2
https://kraken.io/
© 121WATT - André Goldmann
Bilder „manuell“ komprimieren
3
https://imageoptim.com/ (Mac)

http://pnggauntlet.com/ (Windows, Mac & Linux)
© 121WATT - André Goldmann
Bilder mit tinypng optimieren
4
https://tinypng.com/
© 121WATT - André Goldmann
Bilder in andere Formate konvertieren
5
https://cloudconvert.com/jpg-to-webp
© 121WATT - André Goldmann
Bilder für responsives Webdesign
http://www.imgix.com/
http://adaptive-images.com/
© 121WATT - André Goldmann
7
Bilder:
Checkliste: Optimierung für Bilder/Fotos
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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“ ;)

More Related Content

Viewers also liked

MAIstro and the State of Iowa Legislative Services Agency
MAIstro and the State of Iowa Legislative Services AgencyMAIstro and the State of Iowa Legislative Services Agency
MAIstro and the State of Iowa Legislative Services AgencyAccess Innovations, Inc.
 
Marken-Suchbegriffe finden & nutzen
Marken-Suchbegriffe finden & nutzenMarken-Suchbegriffe finden & nutzen
Marken-Suchbegriffe finden & nutzenAndré Goldmann
 
Ebi may 2015 overview sg b
Ebi may 2015 overview sg bEbi may 2015 overview sg b
Ebi may 2015 overview sg bfrankjoh
 
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...André Goldmann
 
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen WebsiteMobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen WebsiteAndré Goldmann
 
TEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkTEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkVolker Hirsch
 

Viewers also liked (11)

Affiliate marketing power point templates
Affiliate marketing power point templatesAffiliate marketing power point templates
Affiliate marketing power point templates
 
MAIstro and the State of Iowa Legislative Services Agency
MAIstro and the State of Iowa Legislative Services AgencyMAIstro and the State of Iowa Legislative Services Agency
MAIstro and the State of Iowa Legislative Services Agency
 
Ayla's Facebook
Ayla's FacebookAyla's Facebook
Ayla's Facebook
 
VILLA VERDE
VILLA VERDEVILLA VERDE
VILLA VERDE
 
Marken-Suchbegriffe finden & nutzen
Marken-Suchbegriffe finden & nutzenMarken-Suchbegriffe finden & nutzen
Marken-Suchbegriffe finden & nutzen
 
Blue Wedding Flowers
Blue Wedding FlowersBlue Wedding Flowers
Blue Wedding Flowers
 
Ebi may 2015 overview sg b
Ebi may 2015 overview sg bEbi may 2015 overview sg b
Ebi may 2015 overview sg b
 
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
 
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen WebsiteMobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
 
Wireless Charging
Wireless ChargingWireless Charging
Wireless Charging
 
TEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkTEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of Work
 

More from André Goldmann

SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...André Goldmann
 
User-Experience-Optimierung durch User Centricity
User-Experience-Optimierung durch User CentricityUser-Experience-Optimierung durch User Centricity
User-Experience-Optimierung durch User CentricityAndré Goldmann
 
Fehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensierenFehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensierenAndré Goldmann
 
Planung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher LandingpagesPlanung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher LandingpagesAndré Goldmann
 
Website-Optimierung mit Google Optimize
Website-Optimierung mit Google OptimizeWebsite-Optimierung mit Google Optimize
Website-Optimierung mit Google OptimizeAndré Goldmann
 
SEO Campixx 2019: Dank Audits, Website-Probleme aufdecken und beseitigen
SEO Campixx 2019: Dank Audits, Website-Probleme aufdecken und beseitigenSEO Campixx 2019: Dank Audits, Website-Probleme aufdecken und beseitigen
SEO Campixx 2019: Dank Audits, Website-Probleme aufdecken und beseitigenAndré Goldmann
 
Website-Optimierung mit Google Analytics
Website-Optimierung mit Google AnalyticsWebsite-Optimierung mit Google Analytics
Website-Optimierung mit Google AnalyticsAndré Goldmann
 
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-SpiderEffizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-SpiderAndré Goldmann
 
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigenProphylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigenAndré Goldmann
 
Die Macht des Nutzerkontexts über Ihre Website-Ziele
Die Macht des Nutzerkontexts über Ihre Website-ZieleDie Macht des Nutzerkontexts über Ihre Website-Ziele
Die Macht des Nutzerkontexts über Ihre Website-ZieleAndré Goldmann
 

More from André Goldmann (10)

SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
 
User-Experience-Optimierung durch User Centricity
User-Experience-Optimierung durch User CentricityUser-Experience-Optimierung durch User Centricity
User-Experience-Optimierung durch User Centricity
 
Fehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensierenFehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensieren
 
Planung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher LandingpagesPlanung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher Landingpages
 
Website-Optimierung mit Google Optimize
Website-Optimierung mit Google OptimizeWebsite-Optimierung mit Google Optimize
Website-Optimierung mit Google Optimize
 
SEO Campixx 2019: Dank Audits, Website-Probleme aufdecken und beseitigen
SEO Campixx 2019: Dank Audits, Website-Probleme aufdecken und beseitigenSEO Campixx 2019: Dank Audits, Website-Probleme aufdecken und beseitigen
SEO Campixx 2019: Dank Audits, Website-Probleme aufdecken und beseitigen
 
Website-Optimierung mit Google Analytics
Website-Optimierung mit Google AnalyticsWebsite-Optimierung mit Google Analytics
Website-Optimierung mit Google Analytics
 
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-SpiderEffizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
 
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigenProphylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
 
Die Macht des Nutzerkontexts über Ihre Website-Ziele
Die Macht des Nutzerkontexts über Ihre Website-ZieleDie Macht des Nutzerkontexts über Ihre Website-Ziele
Die Macht des Nutzerkontexts über Ihre Website-Ziele
 

Bilder für das Web optimieren

  • 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“ ;)