Webdesign-Tutorial: Bilder-Optimierung für das WWW GIF / JPG
Der größte Daten-Teil einer html-Seite sind normalerweise die Bilder. Der einfachste Weg, Ihre Homepage schneller zu machen, ist die Bilder für das WWW perfekt zu optimieren. Dieses ff-webdesigner-Tutorial zeigt Ihnen,wie.
Das passende Grafikformat Der Hauptgrund für zu langsame Homepages ist häufig die Wahl des falschen Grafikformats. Es gibt im Webdesign zwei Haupt-Grafikformate: JPG (oder JPEG) und GIF. Jedes Bild einer Homepage sollte im passenden Format aufbereitet werden.
Das GIF-Format GIFs werden für Grafiken bis maximal 256 Farben verwendet. Große einheitliche Farbflächen sind ein Indikator für das Verwenden von GIFs. Reduzieren Sie die Farbzahl so weit wie möglich. Sie variiert je nach Grafik normalerweise zwischen 4 und 64 Farben. Die Wahl der passenden Farbzahl ist das wichtigste Kriterium für möglichst geringe Dateigrößen. Die meisten GIFs kommen ohne das die resultierende Datei vergrößernde Dithering aus. Experimentieren Sie auch mit der Lossy-Einstellung. Dabei können Artefakte auftreten, Daten werden unwiderruflich vernichtet. Trotzdem kann die Lossy-Einstellung durchaus sinnvoll genutzt werde, wenn sehr große GIFs mit vielen Farben verwendet werden.
Das Format JPG JPGs verwendet man im Normalfall für Fotos und sehr farbige Grafiken. Ein guter Durchschnittswert für das Speichern von gut für das Web optimierten JPG-Fotos ist eine Qualität von 40%. Beachten Sie, dass JPG kein verlustfreies Kompressionsverfahren ist. Ihre Bilder werden von Speicherung zu Speicherung schlechter. Eine Möglichkeit, die Dateigröße von JPG-Bildern elegant zu reduzieren ist der Einsatz von Unschärfe. Verwenden Sie die Unschärfe in Ihrem Grafikbearbeitungsprogramm entweder bei der Ausgabe des JPGs oder als Filter. Mit einem ringförmigen Unschärfefilter lassen sich bestimmte Bereiche gezielt verunschärfen!
Beispiele Bilderoptimierung für das www mit JPG und GIF:
JPG, Qualität 50% – 8,11kB |
GIF, 128 Farben – 13,7kB |
GIF, 8 Farben – 5,11kB |
JPG, Qualität 50% – 2,03kB |
JPG, Qualität 0% – 1,18kB |
GIF, 2 Farben – 0,62 kB |
Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sollten Sie noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial haben, schreiben Sie uns! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.
- Webdesign-Angebot BRI : Bildrecherche im Internet
Unser Preis: 90 €104,40 € incl. MwSt.Für wen? Sie suchen professionelle und lizenzfreie Digitalfotografien zur Nutzung auf Ihrer Homepage.
-
Auftrag erteilenSie haben ein genaue Vorstellung, welche Bilder Sie suchen, finden aber keine copyrightfreien? Wir finden diese Bilder für Sie!
- Teilen Sie uns mit, welche Bilder Sie suchen (maximal 10)
- Wir finden diese Bilder zur legalen Nutzung auf Ihrer Homepage.
- Alle Bilder werden in einer Auflösung von ca. 1000/750 (auf Wunsch auch hochauflösend für Prospekte) zugemailt. Die Bilder sind größtenteils von professionellen Fotografen, nicht älter als 2 Jahre und zur Verwendung auf Ihrer Homepage freigegeben.
- Gegen Aufpreis kaufen wir die von Ihnen gewünschten Bilder in professionellen kostenpflichten Bilder-Börsen.
Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]
- Webdesign-Angebot HPK : Komplette Homepage-Erstellung mit Layout, 10 Seiten
Unser Preis: 900 € 1.044,00 € incl. MwSt.Für wen? Sie wünschen eine kleine Homepage inclusive aller dafür nötigen Webdesign-Leistungen.
-
Auftrag erteilenKomplettangebot aus den unter WDEpro, WEAund HUTaufgeführten Leistungen plus Suchmaschinenanmeldung plus Emailkonfiguration – Sparen Sie bis zu 450 € gegenüber den Einzelpaketen!
- Installation eines guten Redaktionssystems wie z.B. WordPress auf Ihrem Server. Grudlegende Konfiguration
- Erstellen eines einfachen semantisch korrekten individuellen Templates / Layouts in HTML
- Erstellen und formatieren von Seiten incl. Impressum und Kontakt
- Bis zu 5 Stunden Layouterstellung und Änderung nach Ihren Wünschen
- Individuelles überzeugendes Layout mit Ihrem Firmenlogo
- Semantisch korrekte und benutzerfreundliche Navigation als Grundlage für gute SEO ihrer Webseite
- Einbau bis zu vier vom Auftraggeber zu liefernde Bilder pro Seite
- Saubere Suchmaschinenoptimierung auf relevante Keywords
- Layouttest in alle gängigen aktuellen Browsern + alter Versionen Internet Explorer
- Anmeldung bei den wichtigsten Suchmaschinen
- Einrichtung aller Email-Adressen
Bei mehr als 3h Layouterstellung fallen Mehrkosten an, über die Sie rechtzeitig vorab informiert werden. Mehrkosten werden zum aktuell gültigen Stundensatz für Webdesign berechnet.
Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]
Ich würde auf jeden Fall Photoshop empfehlen. Nutze das Programm seit vielen Jahren – top Ergebnisse!
Hallo Frank,
du könntest den Artikel mal auffrischen und das Format webp hinzufügen.
Viele Grüße
Tim