BildbearbeitungWebdesign

Bilder fürs Web kinderleicht mit Photoshop optimieren

Warum man Bilder fürs Web optimieren sollte

Jeder möchte, dass seine Website sehr schnell lädt, damit die Wartezeit für den Besucher so kurz wie möglich gehalten wird. Um eine kurze Ladezeit zu haben, ist es unter anderem sehr wichtig Bilder auf seine Website einzubinden, die nicht größer sind als nötig. So spart man sich viele Kilobyte bei der Dateigröße ein und macht damit nicht nur die Website-Besucher, sondern auch Google glücklich.

Die Performance ist nämlich eine der über 200 Ranking Faktoren, die für die Platzierung von Webseiten bei den Google Suchergebnissen herangezogen wird. Insbesondere sind Smartphone-Nutzer mit einer langsamen Internetverbindung oder begrenztem Datenvolumen sehr dankbar, wenn eure Website keine Fotos lädt, die schlimmstenfalls mehrere Megabyte groß sind.

Ich nutze hier die Photoshop Version CC 2015, jedoch lassen sich die gezeigten Einstellungen auch auf viele andere Bildbearbeitungsprogramme übertragen.

Exportfunktion: Für Web speichern

Zum Exportieren des Bildes gehst du in Photoshop zu:

Datei > Exportieren > Für Web speichern

photoshop-fuer-web-speichern

Die richtigen Einstellungen vornehmen

Die Exportfunktion fürs Web bietet uns nun einige Einstellungen. Die wichtigsten sind nachfolgend aufgelistet:

  • Dateiformat: Für das Foto in unserem Beispiel ist JPEG das richtige Dateiformat. Bei Bildern, die transparente Bereiche enthalten sollen, muss PNG ausgewählt werden. Die Dateigröße von PNG Bildern ist in der Regel größer als die von JPEG Bildern.
  • Qualität: Meistens reicht es völlig aus die Qualität auf 60 für das JPEG Format zu setzen. Hier hat man eine kleinere Dateigröße bei einer immer noch sehr guten Bildqualität. Man erkennt den Unterschied zur Qualität auf 100 mit dem bloßen Auge gar nicht.
  • Progressiv: Wenn man einen Haken bei Progressiv setzt, wird das Bild in mehreren Durchgängen heruntergeladen. Das bedeutet, dass man bei einer schlechten Internetverbindung erst ein unscharfes Bild sieht, bevor das Bild komplett in der besten Qualität und Auflösung angezeigt wird.
  • In sRGB konvertieren: Hier setzen wir ebenfalls einen Haken, weil das der Farbraum ist, der für die Darstellung von Bildern im Netz optimal ist.
  • Metadaten: Hier kann man die Einstellung „Ohne“ auswählen, da man unnötige Bildinformationen (z.B. Infos über die verwendete Kamera) für Bilder auf Webseiten in der Regel nicht benötigt.
  • Bildgröße: Die Breite und Höhe eines Bildes sollte nur so groß wie nötig gewählt werden. Es bringt uns nichts ein Bild in 4000 x 2000 Pixel hochzuladen, wenn es nur in einer Größe von 600 x 300 Pixel auf der Webseite angezeigt wird. Wie man die richtige Bildgröße bzw. Auflösung herausfindet zeige ich im Video oben.

Durch diese Maßnahmen verkleinert man die Dateigröße eines Bildes um ein Vielfaches! In diesem Beispiel von 14,7 MB auf 57 KB.

fotos-web-optimieren-photoshop

Bilddatei richtig benennen

Beim Abspeichern des Bildes muss man einen Dateinamen vergeben. Dieser sollte keine Sonderzeichen, Umlaute und Großbuchstaben enthalten. Außerdem sollten die Wörter durch einen Bindestrich getrennt werden und nicht durch ein Leerzeichen. Ein Beispiel für die korrekte Benennung eines Bildes wäre:

gruener-garten.jpg

Mit TinyPNG Bilder noch besser komprimieren

Nachdem wir das optimierte Foto aus Photoshop exportiert haben, können wir es teilweise noch weiter verkleinern, indem wir das kostenlose Tool TinyPNG nutzen. Einfach die JPEG oder PNG Datei auf die Webseite von TinyPNG ziehen und die Komprimierung startet automatisch.

Dieses coole Tool gibt es übrigens auch als WordPress Plugin. Das  TinyPNG Plugin komprimiert jedes Bild automatisch, dass du auf deine WordPress Website hochlädst.

fotos-web-optimieren-photoshop

Wenn dir dieser Beitrag weitergeholfen hat, dann schreibe es gerne unten in die Kommentare und folge uns auch auf YouTube und Instagram für mehr hilfreichen Content. Dankeschön! 🙂

Digitales High Five, dein Fortypixel Team.

Du benötigst eine neue WordPress Website oder die aktuelle Seite sollte überarbeitet werden? Wir sind dein kompetenter Ansprechpartner für Webdesign aus Kiel und freuen uns auf deine Projektanfrage 🙂 .

WordPress SVG Upload – SVG für Mediathek erlauben

Ähnliche Beiträge

9 Kommentare. Hinterlasse eine Antwort

  • https://www.clipartsfree.de
    19. Juli 2019 15:27

    Folgende Beobachtung: Hatte auf einer Unterseite beim ertsen Google Speedtest 88 Punkte/% gehabt. Nachdem ich Größe von allen Bildern um knapp 50% reduziert habe (das war maximal mögliche Komprimierung mit einer vertretbaren Qualität) zeigt Google Speedtest nach wie vor 88 Punkte/%. ((

    Fazit: Die Größe von Grafiken soll mindestens die empfohlene durch Google Speedtest haben, nur dann zählt das. Ansonsten Teilpunkte g. e. nicht ((

    Antworten
  • Statt mehrerer (kleiner) Bilder zu laden, gibt es die Moglichkeit, diese in einem gro?en Bild abzuspeichern. Und dann per CSS immer nur einen, den passenden, Ausschnitt dieses Bildes einzublenden. Das spart insofern Ladezeit, weil nur ein einziges (sicherlich gro?eres) Bild geladen werden muss und nicht mehrere (kleinere). Dadurch werden aber die Abfragen an den Server reduziert. Icons (z.B. der sozialen Netzwerke) oder Landerflaggen sind beliebte Beispiele und Einsatzgebiete fur die CSS-Sprites.

    Antworten
  • Wenn Sie Ihr Bild zugeschnitten haben, konnen Sie Ihr Foto einzeln herunterladen und auch auf sozialen Plattformen wie Facebook oder Twitter mit nur einem Klick teilen.

    Antworten
  • Do you mind if I quote a few of your posts as long as I provide credit and sources back to your blog?

    My blog site is in the exact same area of interest as yours and my visitors would truly
    benefit from a lot of the information you provide here. Please let me know if this alright with you.
    Regards!

    Feel free to visit my web site: cloud hosting

    Antworten
  • Kaylarafloge
    24. August 2021 4:24

    Я думаю, что Вы не правы. Пишите мне в PM, обсудим.


    Я извиняюсь, но, по-моему, Вы не правы. Я уверен. Могу это доказать. Пишите мне в PM. интересные факты об, забавные факты обо всем а также [url=https://www.realbrest.by/interesnye-obzory/vsego-po-nemnogu/novosti-ot-polzovatelei/sovremennye-vozmozhnosti-posutochnoi-arendy-kvartir-v-minske.html]тут[/url] интересные статьи и факты

    Antworten
  • hi

    Antworten
  • I every time emailed this blog post page to all my contacts, since if like to read
    it next my links will too.

    Have a look at my blog – himawari-movie.com

    Antworten
  • Jasonf#randon[a..z]x
    19. September 2021 2:42

    Best custom-written essays at Paper Help. From $10 per page!

    http://videospin.store commercial analysis essay
    http://videospin.store research project proposal outline
    http://videospin.store mock business plan
    http://videospin.store help with writing a business plan
    http://videospin.store sales forecast for business plan

    Antworten
  • We can do your homework for you. Just ask!

    http://studdit.store a research proposal on any topic
    http://studdit.store related course work
    http://studdit.store middle school homework help
    http://studdit.store diagnostic essay examples
    http://studdit.store how to write a paper for school

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Menü