Bilder Tutorial wie man seine Produktfotos für sein Onlineshop extrem klein bekommt, um die Seitengeschwindigkeit zu optimieren. In diesem Beispiel habe ich aus einem Produktfoto mit einer Größe von 118 kb auf 29 kb reduziert.
steuer die zu testende Seite an
teste die Bilder mit speedtest
Gebe die URL vom Webshop bei Pagespeed Insights ein und klappe den Reiter Bilder auf. Dort siehst du, welcher Bilder optimiert werden müssen.
öffne das Bild in Photoshop
Öffne das Bild in Photoshop und speicher es als jpg.
extrem reduziertes Bild in Photoshop anzeigen
Drehe jetzt den Regel der Qualität auf 0 und gehe Schritt für Schritt die Qualität hoch, bis es gut aussieht.
Die Dateigröße eines RAW-Bildes kann mathematisch berechnet werden. Um die Größe zu berechnen, muss man die Breite (in Pixel) mal die Höhe (in Pixel) mal die Farbtiefe (in Bit). Des weiteren erkläre ich noch die Berechnung, in Zentimeter sowie Inch.
Die Pixelanzahl zu berechnen ist einfach, wenn man die Höhe und Breite hat. Dann muss man nur die Höhe mal die Breite rechnen.
Pixelfläche berechnen – Beispiel
Wir haben eine Breite von 1920 Pixel und eine Höhe von 1080 Pixel.
1920 Pixel * 1080 Pixel = 2.073.600 Pixel
Das Bild hat also insgesamt 2.073.600 Pixel.
Farbtiefe im Bild
Die Farbtiefe wird in Bit angegeben, die Farbtiefe sagt aus, wie viele Farben pro Pixel angezeigt werden können. Dabei haben die verschiedenen Farbmodi, unterschiedlich viele Kanäle. zB. hat der Farbmodus RGB 3 Kanäle (R = Rot, G = Grün, B = Blau). Ein Kanal hat ein Byte, also 8 Bit.
Farbtiefe des Farbmodus
Farbmodus
Kanäle
Bit
Farben
Graustufen
1
1 x 8 = 8
2^8 = 256
RGB
3
3 x 8 = 24
2^24 = 16,8 Mio.
CMYK
4
4 x 8 = 32
2^32 = 4,3 Mrd.
Dateigröße berechnen
Bei dem oberen Beispiel hatte unser Bild eine Auflösung von 1920×1080 Pixel und das wiederum sind 2.073.600 Pixel. Wenn dies ein RGB Bild ist, muss man jetzt die Pixelanzahl mal die Bit rechnen. Merksatz: ein Kanal ist 8 Bit groß – RGB hat 3 Kanäle, sprich 24 Bit pro Pixel.
Bildgröße in Bit berechnen – RGB Beispiel
Das Bild hat 2.073.600 Pixel und ein Pixel ist 24 Bit groß.
2.073.600 Pixel * 24 Bit = 49.766.400 Bit Das Bild ist also 49.766.400 Bit groß.
Bit in Megabyte umrechnen
Da man sich unter 49.766.400 Bit nicht so viel Vorstellen kann, rechnen wir das jetzt in MB (MegaByte) um.
Zuerst muss in Byte gerechnet werden. Ein Byte sind 8 Bit, sprich wir müssen unsere Bitanzahl durch 8 rechnen.
49.766.400 Bit / 8 = 6.220.800 Byte
Immer noch recht schwer sich unter 6.220.800 Byte, etwas vorzustellen. Deswegen rechnen wir jetzt in KiloByte und dann in MegaByte um.
6.220.800 Byte / 1000 = 6.220,8 KiloByte
6.220,8 KiloByte / 1000 = 6,2208 MegaByte
(Auf 2 Stellen nach dem Komma runden) Das Bild ist 6,22 MB groß.
Antwortsatz
Das 1920 Pixel mal 1080 Pixel große RGB RAW-Bild ist 6,22 MB groß.
Pixelanzahl berechnen
Es ist eine Bildschirmgröße in cm gegeben und jetzt willst du die Bildgröße für diesen Bildschirm berechnen. Dazu brauchst du noch die DPI (Dots per Inch). Bilder für Digitale Zwecke werden immer mit 72 DPI gespeichert und Bilder, die zum ausdrucken geplant sind, werden in einer Dichte von 300 DPI gespeichert.
Pixelanzahl von einem Monitor berechnen
Wir haben ein Monitor mit der Breite von 52,7 cm und der Höhe von 29,64 cm und eine DPI von 72.
Zuerst muss Zentimeter in Inch umgerechnet werden. Einmal für die Höhe und die Breite. Ein Zentimeter sind 2,54 Inch.
(52,7 cm / 2,54) * 72 DPI = 1.494 Pixel
(29,64 cm / 2,54) * 72 DPI = 841 Pixel
(Das Ergebnis wird immer aufgerundet, da es keine halben Pixel gibt) Der Monitor hat eine Auflösung von 1494 Pixel mal 841 Pixel.
Bildgröße von einem A3 Blatt berechnen
Ein A3 Blatt hat 297 mm x 420 mm und da es gedruckt werden soll, muss mit 300 DPI gerechnet werden. Des weiteren soll das Bild in Farbe (also CMYK) gedruckt werden.
Pixel von A3 berechnen
297 mm = 29,7 cm
420 mm = 42 cm
(29,7 cm / 2,54) * 300 DPI = 3.508 Pixel
(42 cm / 2,54) * 300 DPI = 4.961 Pixel
3.508 Pixel * 4.961 Pixel = 17.403.188 Pixel
Speicherplatz von A3 berechnen
17.403.188 Pixel * 32 Bit = 556.902.016 Bit
556.902.016 Bit / 8 = 69.612.752 Byte
69.612.752 Byte / 1000 = 69.612,752 KB
69.612,752 KB / 1000 = 69,612752 MB
gerundet: 69,61 MegaByte
Antwort: Ein DIN A3 Blatt ist 69,61 MB, im RAW Format, groß.
Bildgrößen-Rechner
Berechne wie groß ein RAW Bild sein wird. Es wird dir auch ein Rechenweg angezeigt.
Bilder und Grafiken optimieren deinen Blog und werten dein Blog auf. In diesem Beitrag stelle ich Plattformen vor, auf denen kostenfreie Stockbilder bezogen werden können. Ich übernehme keine Haftung für die Lizenzhinweise der Stockbilder-Plattformen!
pixabay
Alle auf www.pixabay.com zur Verfügung gestellten Bilder und Videos („Inhalte“) dürfen frei verwendet werden und können sowohl für kommerzielle wie auch nicht-kommerzielle Zwecke eingesetzt werden. Es ist dabei weder notwendig um Erlaubnis zu fragen, noch die Quelle zu nennen – wobei wir freiwillige Angaben zu schätzen wissen.
picjumbo
Auf https://picjumbo.com/ veröffentlichten Bilder sind kommerziell und privat Nutzbar, es benötigt kein Quell verweis oder Erlaubnis von picjumbo oder dem Photographen der Bilder.
unsplash
Alle veröffentlichten Bilder auf www.unsplash.com/ sind kostenfrei nutzbar. Die Bilder sind kommerziell und privat frei verwendbar. Die Nutzung benötigt keine Erlaubnis vom Photographen oder Unsplash, die Quelle muss nicht genannt werden.
pexels
Die Bilder auf www.pexels.com/ sind für die private und kommerzielle Nutzung freigegeben. Es dürfen die Bilder modifiziert, kopiert und nach belieben verteilt werden. Des weiteren benötigt es keine Erlaubnis oder ein Verweis der Quelle der Bilder.
Verkauf und Weiterverteilung der Bilder, allein oder mit anderen Bildern
deathtothestockphoto
Alle veröffentlichten Bilder auf http://deathtothestockphoto.com/ sind kostenfrei nutzbar. Die Bilder sind kommerziell und privat frei verwendbar. Die Nutzung benötigt keine Erlaubnis vom Photographen oder deathtothestockphoto, die Quelle muss nicht genannt werden.
