Transkripte
1. EINFÜHRUNG: Leute sagen, sind wichtig auf jeder Website für das Problem ist, wenn Sie ein Foto hochladen, das eine sehr große Dateigröße ist, das wird Ihre Website verlangsamen. Das ist schlecht für alle Besucher, aber es ist auch schlecht für Ihre SEO Score, Ihre Google-Suche Score. Wie halten wir die Dateigröße klein, halten
aber die Bildqualität hoch? Ich zeig es Ihnen hier. Hallo, ich bin John Wolfgang Nella. Ich bin jetzt seit 20 Jahren professioneller Designer und arbeite für einige große Kunden wie Fox TV hier in Australien. Die drei wichtigen Regeln für jedes Foto, das Sie eine Dateigröße, ein Verhältnis und Dateinamen hochladen. Jetzt, in dieser Klasse, werde ich Ihnen zeigen, wie Sie alle drei perfekt mit Photoshop oder mit dem vorinstallierten Fotoprogramm auf Ihrem Laptop erhalten. Okay, lasst uns anfangen.
2. Website-Geschwindigkeit/ideale Bildgröße: Bilder sind für jede einzelne Website sehr wichtig. Sie möchten, dass sie großartig aussehen, damit Ihre Website großartig aussieht. Das Problem ist, wenn Sie sie falsch hochladen, kann
es Ihre Website massiv verlangsamen. Hier sind wir in einer der Geschwindigkeitstest-Websites, GT-Metriken. Also kommen Sie hier rein und geben Sie Ihre URL ein. Das ist keine gute Punktzahl. Es gibt viele Dinge, die Ihre Websites verlangsamen können. Einige von ihnen benötigen etwas mehr technische Unterstützung, aber wir werden uns nur Bilder ansehen. Also auf dieser Seite, wenn wir hierher kommen, um zu strukturieren, können
wir ein paar Probleme in der Bildgröße sehen. Diese erste hier unten, richtig Größe Bilder. Wenn ich auf dieses hier klicke, sagt mir das jedes einzelne Bild, das
möglicherweise zu groß ist auf meiner Website hier drüben, oder Ihnen sagen, die Größe des Bildes und Overhead, es sagt Ihnen, die Größe es sein sollte, um Ihre -Webseite. Und noch eine Sache, die man sich hier ansehen muss. Hier, wo es heißt, Serve Bilder in Next-Gen-Formaten. Dies liegt daran, dass wir ein JPEG-Bild auf unserer Website verwenden, aber wir könnten eines dieser Bilder oder WebP-Bilder verwenden. Darüber werde ich später in dieser Klasse sprechen. Aber zunächst einmal, werfen wir einen Blick auf Bildgrößen und schauen, wie wir das verbessern können. Jedes Bild, das Sie auf eine Website hochladen, befindet sich in einem Container. Und dieser Container hat eine bestimmte Größe. Es hat eine Pixelbreite und eine Pixelhöhe. Diese oben sind ziemlich klein,
was bedeutet, dass das Bild, das ich hochgeladen habe, wahrscheinlich zu groß für den Container ist. Wie finden Sie heraus, wie groß es sein sollte? Nun, das ist sehr einfach. Klicken Sie einfach mit der rechten Maustaste auf ein Bild und gehen Sie zu Inspect. Wenn dieses Fenster angezeigt wird, klicken Sie hier, und bewegen Sie den Mauszeiger über das Element, das Sie überprüfen möchten. Die Zahlen unten, die wir zeigen Ihnen die Größe des Bildes sollte sein. die Chance, dass ich das zu groß für diesen Ort gemacht habe. Also lassen Sie uns unsere Bilder öffnen und beginnen, sie zu ändern.
3. Bildbearbeitung – Photoshop und mehr: Wir sind jetzt in Photoshop. Jedes Bild, das Sie hochladen, muss drei Regeln folgen. Nummer 1 ist das Verhältnis. Das ist wichtig, um jede Bildgröße auf Ihrer Website konsistent zu halten. Das bedeutet, dass die Dinge richtig ausgerichtet sind und es macht Ihre Website schön und sauber aussehen. Nummer zwei ist die Dateigröße. Wir wollen, dass die Bildqualität hoch ist, aber wir wollen, dass sie so klein wie möglich ist, denn dann ist unsere Website schneller. Und Nummer drei ist der endgültige Name. Wie Sie im Moment sehen können,
haben diese beiden Bilder nur eine Zufallszahl am Ende von ihnen, das wird niemandem bei der Suche auf Google helfen. Wenn Sie Keywords zu Ihrem Dateinamen hinzufügen
, hilft dies Ihrer Google-Suche. Fangen wir mit diesem kleineren an. Wenn wir uns die Website angeschaut
haben, können wir sehen, was das ideale Verhältnis für diese war. Es war 360 Pixel breit und 240 Pixel hoch. Also, das ist ein Verhältnis ist drei mal zwei. Um das Verhältnis auf einem Bild zu ändern, bewegen Sie einfach den Mauszeiger hier und klicken Sie auf das Zuschneidewerkzeug. Wie Sie hier oben sehen können, ist
das bereits auf vier mal drei gesetzt. Aber ich möchte das in drei mal zwei ändern. Um auf der gesamten Website konsistent zu bleiben. Ich mache alle Landschaftsbilder drei mal zwei Verhältnis. Also in diesem kleinen Fenster, das schwebt, wo Sie das Bild im Hintergrund bewegen können, um eine bessere Beschneidung
zu erhalten und doppelklicken. Da gehen wir. Jetzt hat das Bild ein Verhältnis von drei zu zwei. Jetzt werde ich diese exportieren und werfen einen Blick auf die Dateigröße und den Dateinamen. Also gehen Sie hier zu Datei und gehen Sie zu Exportieren. Und Exportieren als. Im Popup-Fenster sehen
Sie, dass das Format bereits ein JPEG ist. Wenn Sie etwas haben, das einen klaren Hintergrund benötigt, machen Sie das PNG. Aber für ein normales quadratisches Bild, Lassen Sie uns das als JPEG behalten. Hier unten sehen Sie, was die Bildgröße bereits ist. Die Breite beträgt 910 Pixel und die Höhe beträgt 607. Wir wollen, dass das 360 mal 240 ist. Also lasst uns einfach die Höhe auf 240 ändern. Wenn ich das mache, ändert es automatisch auch die Breite. Es hat sich hier ein einzelnes Pixel geändert. Mach dir deswegen keine Sorgen. Das wird keinen großen Unterschied machen. Es ist immer noch das richtige Verhältnis. Nun ist das nächste, was man sich ansehen muss, hier auf der linken Seite, diese Zahl hier, das ist die Dateigröße von 840 Kilobyte. Das ist nicht zu groß, aber es kann viel kleiner werden. Hier werden Sie die Qualität sehen, die es bei 100% ist. Spielen Sie in der Dropdown-Liste mit diesem kleinen Knopf herum und legen Sie die Qualität herunter. Hier, ich habe es auf 49 Prozent gesenkt. Und Sie können das als eine viel kleinere Dateigröße sehen. Ist das hoch genug Qualität? Klicken Sie hier unten und Sie können in das Bild zoomen, um zu sehen, wie es aussieht. Das sieht gut aus für mich. Aber wenn ich es etwas stärker machen will, ist
das nur ein bisschen oben. Okay, und in dieser Größe kommt jetzt mit 34 Kilobyte. Also versuchen, und halten Sie jedes Bild, das Sie eine niedrigere hochladen 100 Kilobyte. Das hier ist 34, also ist das in Ordnung. Klicken Sie auf Exportieren. Und in diesem Pop-up können Sie hier den Dateinamen ändern. Wie Sie oben sehen können, hat es immer noch den ursprünglichen Dateinamen. Aber ich möchte, dass dies Wörter enthält, nach denen Leute in Google
suchen, damit mein Bild angezeigt wird. Also werde ich es so nennen. Und dann speichern. Wenn Sie Photoshop nicht haben, verwenden Sie
einfach den vorinstallierten Foto-Editor auf Ihrem Laptop. Ich benutze einen Mac, also verwende ich hier nur Apple-Fotos. Ich werde nur das Bild auswählen, das ich bearbeiten möchte. Und in diesem Fenster bewegen Sie den Mauszeiger nach oben und wählen Sie Bearbeiten. Sie haben viele Optionen hier drin, aber lassen Sie uns Ernte wählen. Wir wollen immer noch, dass dies ein Drei-zu-Zwei-Verhältnis ist, und wir haben alle diese Optionen hier drüben auf der rechten Seite. Lassen Sie uns drei mal zwei wählen. Und klicken Sie auf Fertig. Und dann fahren Sie mit der Maus auf Datei exportieren und exportieren Sie ein Foto. Sie können die Fotoart ändern und wir wollen, dass JPEG sein. Qualität. Spielen Sie mit diesem herum, sehen Sie, was für Sie funktioniert. Ich werde hier Medium wählen, nur um zu sehen, was die Qualität ist. Jetzt meine Breite, ich möchte, dass das 360 Pixel sein. Und hier unten steht Dateiname, wählen Sie diesen und geben Sie ein, was Sie möchten, dass er gefangen werden soll. Und Export. Jetzt suchen Sie den Ordner. Und Sie werden sehen, dass es den Namen genommen hat, den wir ihm gegeben haben, aber es hat diesen Bindestrich und einen am Ende gesetzt. Also löschen Sie das einfach. Wie Sie die Dateigröße hier sehen können. Nun, sie sind ziemlich ähnlich, aber versuchen Sie es so niedrig wie möglich zu bekommen und spielen Sie einfach mit der Qualität, die
Sie sehen, was am besten für Sie funktioniert und die Art der Website, die Sie ausführen. Jetzt sind diese Bilder fertig. Laden wir sie alle auf WordPress hoch.
4. Zusätzliche Optimierung – -: Dies ist ein Dienst namens kurze Pixel. Was dies tut, ist es komprimiert alle Ihre Bilder auf eine IV oder kleinere Größe. Wenn Sie es einen schnellen kostenlosen Test geben möchten, kommen Sie
einfach hierher und geben Sie Ihre Website-URL ein. Und wenn ich diesen Service nutzen, um meine Bilder weiter zu komprimieren, und wir werden sogar die Website 44% schneller laufen lassen, wenn Sie nur eine sehr kleine Website haben, nun, klicken Sie hier, Details anzeigen. Auf diese Weise erfahren Sie, welche Bilder in der Größe geändert wurden. Sie können einfach die kleinere Version herunterladen und hochladen. Aber wenn Sie eine große Website mit vielen Bildern haben, müssen
Sie das Plug-in installieren und kurze Pixel haben zwei Plugins. Eine komprimiert die Größe der JPEGs, die Sie hochgeladen haben. Und Nummer zwei, das ist eine, die Ihnen hilft, die Webseite zu erstellen, eine Version Ihrer Bilder. Das sind nur Bilder im Web. Daher sind sie noch kleiner und machen Ihre Website noch schneller laufen. Also schauen wir uns das an. Kommen Sie in Ihr WordPress-Dashboard und gehen Sie zu Add Plugins, geben Sie in kurzen Pixel. Und Sie werden diese beiden oben sehen. Einer ist der Bildoptimierer, der Ihre JPEGs so klein wie möglich macht. Und das hier sind adaptive Bilder, die jedes Bild in die Webseitenversion verwandeln. Also lasst uns beide installieren. Und dann gehen Sie einfach durch den gesamten Setup-Prozess. Sie haben eine kostenlose Version, mit der Sie die Größe bis zu 100 Bilder kostenlos ändern können. Oder sie haben einige kostenpflichtige Versionen. Wenn Sie eine viel größere Website mit Tausenden von Bildern haben. Schauen Sie sich einfach den Abschnitt Über hier an. Wenn ich irgendwelche Angebote von dieser Firma
habe, werde ich dort einige Links einschließen. Wenn Sie alles eingerichtet haben, gehen Sie zum Bildoptimierer, Plug-in, füllen Sie alle Details und klicken Sie dann hier auf Speichern. Und hier können Sie sehen, dass es hundert,
zweihundertachtunddreißig meiner Bilder optimieren wird . Das liegt daran, dass ich eine ziemlich große Website hier habe, aber klicken Sie einfach darauf. Wenn das fertig ist, kommen Sie hier zu Einstellungen und wählen Sie diejenige, die kurze Pixel-AI-Prozess, die Sie durchlaufen. Wir stellen sicher, dass Ihre Website für diese Änderung an WebP-Bildern geeignet ist. Sie können ein paar Tests ausführen oder Sie können alles einrichten und nur sehen, ob es funktioniert und ob es nicht das Plugin abgeklebt ist. Wenn Sie hier auf diese Seite kommen, heißt
es Web PIE Support. Stellen Sie einfach sicher, dass es sich um alle Texte handelt und das wird jedes einzelne Bild ändern, hochgeladen Ihre Website in eine Webseitenversion. Dann kommen Sie auf Ihre Website und klicken Sie auf das kurze Pixel-Symbol oben. Und Sie werden sehen, wie CDN oben auf einigen Bildern kommen. Klicken Sie darauf. Und dann werden Sie sehen, was der Dienst getan hat. Es hat optimiert und skaliert Bild von einem 1000 Pixel auf 334. Das ist die richtige Größe, die es haben muss. Wie Sie sehen können, hat das die Größe und 32 KV auf 5,9 KB reduziert. Das ist also viel kleiner. Wenn Sie sich das ansehen, könnten Sie gehen, eigentlich ist das nicht die Qualität des Bildes, das ich will. Dann haben Sie hier eine Reihe von Optionen, um ein Bild wie dieses auszuschließen. Wenn Sie einfach auf Diese Bild-URL ausschließen klicken, bedeutet dies, dass das Bild nicht in diese Optimierung einbezogen wird. Aber das sieht gut aus für mich. Also lasst uns damit weitermachen. Und wenn wir hier nach unten scrollen, klicken Sie auf die anderen Bilder. Sie werden sehen, dass jedes Bild hier unten in der Größe geändert wurde. Daher sollten Sie eine viel schnellere Website haben. Dann kommen wir zurück zu den Duty-Metriken und wir testen die Geschwindigkeit der Website erneut. Und Sie können sehen, dass alles jetzt viel schneller läuft. Und das ist nur, weil jetzt viel weniger Platz von den Bildern auf unserer Seite eingenommen wird. Und wenn wir zurück auf die Website gehen, während die Qualität genauso hoch aussieht wie vorher, hat sich nichts geändert. Und wir haben eine viel schnellere Website. Und alle Websites sind auf eine andere Weise eingerichtet. Und es kann ein Fall der Verwendung beider Plug-Ins hier funktioniert nicht auf Ihrer Website, wenn das der Fall ist, Hier ist, was ich empfehle. Löscht den i1 und geht zum regulären kurzen Pixel. Dann kommen Sie zu dieser Seite, zu fortgeschritten, und unter wo es Bilder der nächsten Generation steht, klicken Sie auf dieses Feld. Dann ist die unten stehende, die besagt, dass die nächste Generation Versionen im Front-End liefern. Und du wirst hier ein paar Optionen haben. Zerstören Sie alle diese, um zu sehen, welche auf Ihrer Website
arbeiten und erhalten Sie die besten Ergebnisse. Probieren Sie es aus. Scrollen Sie hier nach unten
und speichern Sie es, und dann haben Sie die perfekte funktionierende schnelle Website.
5. Vielen Dank: Danke, dass Sie diese ganze Klasse gesehen haben. Wenn Sie Fragen zum Fotoupload haben, diese hier unten im Diskussionsbereich
hosten. Außerdem, während Sie dort sind, stellen Sie sicher, dass Sie auf meinen Namen klicken und überprüfen Sie mein Skillshare Profil. Hier werden Sie alle meine Klassen über den Aufbau einer Website sehen. Es gab einen perfekt für Anfänger, um
den Elementor Page Builder zu verwenden und einen anderen über den Aufbau Ihres eigenen Online-Portfolios. Aber beide müssen Sie kein einziges Bit Codierung kennen. Es dreht sich alles um kreatives Design. Vergewissern Sie sich auch, dass Sie mir folgen und Sie erhalten Benachrichtigungen jedes Mal, wenn ich eine brandneue Klasse hochlade. Okay, das ist alles. Haben Sie einen tollen Tag.
Jon Wolfgang Miller, Digital Graphic Designer
