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.
Mit neuen kostenlosen Adobe Werkzeug „Adobe Creative Cloud Express“ kann extrem einfach und simpel Grafiken erstellen. In diesem Video zeige ich dir wie man es macht.
Kurzzusammenfassung der Typographischen Fachbegriffe mit deren Definitionen und Anschauungsbildern.
Größendefinition
Die individuelle Schriftgröße, wird durch 4 Linien definiert. Die Grundlinie (Schriftlinie) ist eine imaginäre Linie auf der die Schrift steht. Da drunter ist die P-Linie, der Raum zwischen Grundlinie und p-Linie wird Unterlänge bezeichnet. Die Unterlänge ist der Raum für den unteren Teil der Kleinbuchstaben (Minuskel). Über der Grundlinie ist die x-Linie, diese definiert die Mittellänge. Die Mittellänge definiert die Höhe von Minuskel ohne Oberlänge und Unterlänge. Mittellänge kann auch x-Höhe genannt werden. Über der x-Linie ist die H-Linie, diese Linie definiert die Vesalhöhe, sprich die oberste Kante bei Großbuchstaben (Majuskel), mit der Ausnahme von Ä, Ö und Ü.
Bonus-Linie: Die oberste Linie heißt k-Linie, diese definiert die Höhe bei der Schriftgruppe 2 (Französische Renaissance-Antiqua).
Hilfestellungen rund um das Thema Mediengestalter Digtal / Print. In diesen Tutorials vermittle ich dir eine Kombination aus Theorie und Praxis. Es soll als Begleithilfe für deine Ausbildung dienen.
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.
Die Gestaltungsgesetze kommen aus der Psychologie. Die Wahrnehmung wurde 1920 genauer erforscht und aus den Studien sind 7 Gesetze entwickelt worden. Die Gesetze definieren die optische Wahrnehmung und welche Reize sie auslösen. Genauer gesagt, wie nimmt unser Gehirn Strukturen wahr und interpretiert diese. Die Gesetze definieren das wahrnehmen von Formen, Größen und Farben. Dabei versucht das Gehirn immer die Grundformen zu identifizieren. Des weiteren versucht das Gehirn, ein Hintergrund und ein Vordergrund zu definieren.
Das Gesetz sagt aus, dass das Gehirn Formen, immer auf die Geometrische-Grundformen (Kreis, Dreieck, Viereck) reduziert bzw. dies versucht. Das Gehirn versucht zu simplifizieren um die Form besser zu analysieren. Merksatz: Das Gehirn versucht immer, die größtmögliche Einfachheit in Formen herzustellen.
Links: Das Gehirn nimmt 2 überlagerte Quadrate wahr und nicht mehrere Dreiecke mit einem 8-Eck.
Rechts: Das Gehirn nimmt ein Dreieck wahr.
Gesetz der Nähe
Objekte mit einem geringeren Abstand, werden als Zusammengehörig wahrgenommen. Ein wichtiges Gesetz, da beim layouten, durch unterschiedliche Abstände, Objekte gruppiert werden können. Merksatz: Nahe beieinander liegende Objekte werden als Gruppe wahrgenommen.
Die 3×6 Kreise werden als zusammengehörig wahrgenommen und die einzelne Reihe daneben als etwas eigenständiges.
Gesetz der Gleichheit
Auch als Gesetz der Ähnlichkeit bekannt. Es sagt aus, dass Objekte mit der gleichen Form, Farbe und Größe als Gruppe wahrgenommen werden. Merksatz: Gleiche Objekte werden als zusammengehörig wahrgenommen.
Die Orangen Kreise werden als Einheit angesehen, sowie die blauen.
Gesetz der Geschlossenheit
Wenn Objekte unterschiedlich sind, aber z.B. mit einem Rahmen umschlossen sind, werden diese Objekte als Gruppe wahrgenommen. Durch Rahmen oder Hintergrund versucht unser Gehirn eine Beziehung zwischen den Objekten herzustellen. Merksatz: Geschlossene Flächen werden als Ganzes wahrgenommen.
Obwohl die Objekte unterschiedliche Farbe/Form haben, werden Sie als Gruppe wahrgenommen.
Gesetz der Erfahrung
Das Gehirn vergleicht unbekannte Formen mit bereits bekannten Formen bzw. Bildern. Dadurch kann das Gehirn anhand einer Kontur erahnen, was das Objekt darstellt. Dies ist ein wichtiges stilistisches Mittel, damit lassen sich Konventionen brechen und eine Botschaft kann mit Änderung oder Wechsel verknüpft werden. Merksatz: Das Gehirn merkt sich Formen und kann Formen vervollständigen.
Obwohl nur der Schatten zu sehen ist, wird hier das E erkannt.
Gesetz der Konstanz
Es werden Objekte immer in Relation zu ihrer Umgebung wahrgenommen. Es entsteht eine Beziehung zu den Umliegenden Objekten bzw. Hintergrund. Dabei können die Umliegenden Objekte die Farbe, Form und Größe beeinflussen. Merksatz: Die Wahrnehmung von Objekten interagiert mit der Umgebung.
Beide Sterne in der Mitte sind gleich groß, aber die Sterne wirken unterschiedlich, durch ihre Umgebung.
Gesetz der Objekt-Grund-Beziehung
Ein Objekt muss sich immer vom Hintergrund abheben, sonst ist es schwer es wahrzunehmen. Als Nebeneffekt davon kann ein 2tes Objekt entstehen, das Negativ vom Objekt. Merksatz: Es entsteht bei einem Objekt immer ein negativ Objekt, diese können sich gegenseitig beeinflussen.
Man kann dies als Mauerwerk wahrnehmen, das zeigt, dass die Rechtecke in Relation zum Hintergrund stehen.
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.
![Adobe Cloud Express – Instagram Post erstellen [VIDEO]](https://boolie.org/wp-content/uploads/2021/12/teaser_blog.jpg)
