Bilder für E-Mail und das Internet optimieren

1. Willkommen beim Kurs: Hi, ich bin Vanessa Bias. Ich besitze und betreibe Bias Creative Company, ein Ein-Personen-Full-Service-Designstudio, das bald in Los Angeles, Kalifornien, ansässig sein wird. In dieser Klasse behandeln wir verschiedene Methoden zur Optimierung Ihrer Fotos und Grafiken für das Web damit Sie Website- oder E-Mail-Designs schneller laden können, ohne dabei zu viel Qualität einzubüßen. Lasst uns loslegen. 2. Warum optimieren: Wenn du wie ich bist, lebst du in einer Metropolregion, in unbegrenztes Highspeed-Internet für die meisten unserer Gemeinschaft Realität ist. Es gibt jedoch viele Orte auf der Welt, an denen nur eine Internetverbindung ein Luxus ist. Selbst in den Vereinigten Staaten gibt es einige Gemeinden, in denen Hochgeschwindigkeits-Internet ungewöhnlich ist. Als Webdesigner liegt es in Ihrer Verantwortung, eine gute Erfahrung für Ihre Benutzer zu gewährleisten , und dazu gehört auch die ständig wachsende globale Zielgruppe, die auf Ihrer Website auftreten kann. Rasieren Sie ein paar Sekunden aus der Ladezeit Ihrer Webseite könnte den Unterschied in der Erfahrung Ihres Besuchers und auf Ihrer Absprungrate ausmachen . 3. Die Seitenladezeit deiner Website durchschauende die Zeit der Seite der Website: Für Ihr Klassenprojekt verwenden wir ein kostenloses Seitengewichtswerkzeug von imgix. Dies zeigt uns die schwersten Bilder auf Ihrer Website und sagt Ihnen, was Sie tun können, um zu optimieren. Also, um loszulegen, werden wir nur die URL hier für die Website eingeben. Das ist meine Website. Sie können Ihre eigenen verwenden und es wird zu optimieren oder zu analysieren im Hintergrund eher, es dauert nur weniger als eine Minute. Also für den Desktop-Seite Gewichtsbericht, können Sie tatsächlich sehen, dass das Seitengewicht von meiner Website oder der Homepage zumindest ziemlich leicht ist. Allerdings gibt es ein Einsparpotenzial von 91 Prozent. Wenn Sie nach unten scrollen, können Sie sehen, wo es sich gerade befindet und wo es so weit wie Kilobyte sein könnte. Sie würden auch den Unterschied in der Gewichtung des Codes auf der Seite im Vergleich zur Gewichtung der Bilder auf der Seite sehen . Das schlechteste Bild auf meiner Website ist das Heldenbild oben auf der Seite. Es sieht so aus, als ob wir es tatsächlich kleiner ändern können , um den Container zu passen, und wir können das Ausgabeformat ändern. Wenn Sie nach unten scrollen, können Sie tatsächlich drei Bilder sehen , die nach Bildgewichtseinsparungen sortiert sind. Verwenden Sie also dieses Tool, um Ihre Website zu scannen und dann mit mir zu folgen, wie ich einige der Bilder auf meiner eigenen Website in den nächsten paar Videos optimieren. 4. PNGs optimieren: Um zu beginnen, werden wir das Heldenbild optimieren, das der größte Schuldige für das Seitengewicht während des Bildscans war . Hier hinten habe ich Adobe Photoshop geöffnet. Es ist die ursprüngliche PSD, die ich verwenden, um dieses Bild zu bauen. Wir werden sagen, für das Web und auf einem Mac ist es Shift, Command, Option S, dann wird es gehen, um Ihre sicherere Web-Fenster öffnen. Wenn Sie etwas über die verschiedenen Bildformate wissen, werden Sie wissen, wie, wenn es ein Foto ist, Sie werden ein PNG-24 oder JPEG verwenden wollen. Wenn es in seiner Farbpalette sehr begrenzt ist, sollten Sie ein GIF oder ein PNG verwenden. Ich werde mit PNG-8 gehen, weil dies tatsächlich nicht so viele Farben darin hat. Wir sind auf den Standard 256 Farben. Ich werde auf „Speichern“ klicken und wir werden es speichern. Sie können hier das Bild sehen, das bei etwa 43 Kilobyte gespeichert wurde. Wenn wir zu tinypng.com gehen, ist dies tatsächlich ein großartiges Werkzeug, um Ihre JPEGs und Ihre PNGs zu optimieren. Wir werden das Bild einfach hier hineinziehen. Wie Sie sehen können, ging es von 42,6 Kilobyte auf 35,2 Kilobyte. Eine andere Sache zu beachten ist, dass die Dateigröße des Bildes tatsächlich die richtige Größe hat, die benötigt wird. Der Original-Scan zeigte, dass das Bild etwa 2.000 Pixel betrug, und wir brauchten kein so großes Bild. 5. Die statische GIFs optimieren: Ok. Jetzt werde ich optimieren. Es war kein Bild, das als eines der schwersten Bilder auf der Seite aufgenommen wurde. Aber ich denke, dies wird ein großartiges Beispiel sein, um eine gute Verwendung für GIFs zu zeigen , wie auch immer Sie es nennen möchten. Ich werde dieses Bild hier optimieren. Es gibt ein schwarz-weißes Logo. Dieses Bild wird jetzt tatsächlich als JPEG gespeichert, das ich hier in Photoshop geöffnet habe. Ich speichere für das Web. Sie können tatsächlich sehen, ob es sich um ein JPEG mit einer Qualität von 100 Prozent handelt, es sind etwa 34,96 Kilobyte. Was ich verwenden werde, werde ich es als GIF speichern. Sie können hier mit den Farben spielen, 256 Farben erhalten Sie 22 Kilobyte, was kleiner ist, aber wir brauchen keine 256 Farben für ein Bild, das nur zwei Farben ist. Was ich tun werde, ist, dass ich das auf 100 runterbringen werde. Sie können sogar das Zoomen sehen, die Qualität ist immer noch gut. Es gibt einen Grund, warum Sie nicht zwei Farben machen wollen. Das liegt daran, dass es einige dieser Schärfe verringern wird und Sie beginnen, diese gezackten Bitmap-Linien zu bekommen. Ich denke, 100 ist ziemlich gut. Oder brechen Sie es auseinander, bringen Sie es auf 75, und das ist immer noch ziemlich gut. Dies ist jetzt mit 18,85 Kilobyte, und das ist etwa die Hälfte der ursprünglichen Bildgröße. 6. JPEGs optimieren: Jetzt werde ich Ihnen zeigen, wie Sie ein JPEG optimieren können. Dieses Bild wird hier als JPEG gespeichert, und es sollte eigentlich daran liegen, dass es Fotografien in hochkomplexen Bildern enthält . Hier sind eine Menge Farben los. Sie möchten es also als JPEG oder PNG 24 behalten. Aber mal sehen, was ein JPEG gerade macht. Wenn wir sichere freie Abkürzung verwenden, kann sehen, es geht zurück auf das Original oder das letzte gespeicherte Format, das ein Geschenk ist, und es sieht nicht wirklich gut aus. Sie sehen einen großen Teil der Pixilation hier, weil es versucht, ein Foto mit sehr begrenzten Farben zu erstellen. Wir werden es in ein JPEG ändern. Gerade jetzt bei maximaler Qualität ist 122,8 Kilobyte. Es gibt diesen Button hier, wo er optimiert ist. Sie können sehen, dass es ungefähr fünf Kilobyte abkaut, um das abchecken zu lassen. Was wir tun werden, ist, dass wir einige dieser Farben ein wenig nach unten stoßen können. Wenn Sie sie nebeneinander sehen möchten, klicken Sie auf zwei nach oben. Sie können das Originalbild im Vergleich zu sehen, wie Sie die Einstellungen auf der Seite hier ändern, sehen Sie, ob es den ganzen Weg nach unten geht, Sie können all das Artefakt-Ding sehen, das los ist, all diese Pixilation. Das wollen wir nicht. Wir werden gerade von Null beginnen, langsam die Qualität erhöhen, bis es zu einem Punkt kommt, dass wir mit, wie es aussieht in Ordnung sind. Ich will nicht sagen, dass 65 Prozent im Moment gut für mich sind. Das Original ist 469 Kilobyte in der Originalgröße, gespeichert auf 48,62 als optimiertes JPEG. Sie können winzige PNG auf JPEGs verwenden. Als es mit dem Sparen fertig war, hat es etwa 51 Kilobyte gespart. Wir werden das einfach nehmen und ziehen, und wie Sie sehen können, ging es und wie Sie sehen können von 50 Kilobyte auf 44 Kilobyte, spart 14 Prozent. Wir sehen, was es heruntergeladen hat. Sie können sehen, es gibt ein wenig mehr Artefakte, als es ursprünglich gab, es ist einer der Gründe, warum ich winzige PNG für PNG verwende, oder PNG 24 ist, wenn Sie so speichern können, anstatt als JPEG zu speichern, aber immer noch kleiner, als es ursprünglich war. 7. Was ist eine WEBP?: Etwas anderes, das gerade jetzt interessant zu teilen ist, ist ein neues Bildformat, das umläuft namens WebP. Dies wird als PNGs überlegen angesehen, da die Dateigröße etwa 26 Prozent kleiner und 25-34 Prozent kleiner als JPEGs ist. Das einzige Problem mit WebPS im Moment ist, dass es nicht vollständig kompatibel mit den meisten gängigen Browsern ist . Wie Sie sehen können, ist es voll kompatibel mit Chrome, voll kompatibel mit Chrome für Android, UC Browser für Android, Opera Mini und Samsung Internet, aber es ist nicht kompatibel mit Safari, Firefox, Internet Explorer oder Rand Hoffentlich gewinnt dieses neue Bildformat an Traktion und wird leicht verfügbar und jeder kann es benutzen, aber im Moment ist es nicht voll funktionsfähig für alle Benutzer. 8. Abschlussprojekt: Jetzt, da Sie die Grundlagen für die Optimierung Ihrer Bilder für das Web haben, ist es an der Zeit, an Ihrem Projekt zu arbeiten. Verwenden Sie zunächst die Seite [unhörbar], um die Bereiche Ihrer Webseite zur Verbesserung zu überprüfen. Sie einen Screenshot Ihrer Ergebnisse, um Ihrem Projekt hinzuzufügen. Verwenden Sie dann das, was Sie gelernt haben, um Ihre Bilder zu optimieren. Notieren Sie sich vor und nach der Bildgröße, und notieren Sie sich etwas anderes, das Sie möglicherweise geändert haben, wie das Bilddateiformat. Als nächstes laden Sie alle Ihre Bilder erneut auf Ihre Website hoch und ersetzen Sie die Originaldateien. Schließlich führen Sie das Tool zum Gewichten der Seite erneut aus, um zu sehen, wie viel sich Ihre Website-Geschwindigkeit verbessert hat, oder es könnte alles, was Sie übersehen haben. Machen Sie einen Screenshot, um die Vorher- und Nachher-Verbesserungen Ihrer Webseiten zu präsentieren. Ich werde mein Projekt als Beispiel veröffentlichen. Ich hoffe, Sie haben diese Klasse genossen, die die Grundlagen der Optimierung Ihrer Grafiken und Fotos für das Web abdeckt .