Bei der Erstellung von Websites werden oft zahlreiche relevante Bilder hinzugefügt, um das Unternehmensimage zu verbessern und Nutzern die Möglichkeit zu geben, das Unternehmen und seine Produkte kennenzulernen. Wenn Bilder jedoch falsch verwendet werden (z.B. zu viele oder zu große Bilder), verbrauchen sie mehr Systemressourcen beim Laden, was die Ladezeit der gesamten Seite verlängert. Daher ist die Bildoptimierung äußerst wichtig.
(1) Für lokale Bilder
Da Bilder, die auf Webseiten platziert werden, direkt in das Programm eingebunden werden, führt eine zu große Bildgröße zu einem größeren Paketvolumen und längeren Ladezeiten. Zudem verlängert sich die Renderzeit. Daher sollten Entwickler die Bildgröße so weit wie möglich komprimieren.
Entwickler können Bilder mit folgenden Methoden optimieren:
•Für Bilder, die kein transparentes Format benötigen, wird empfohlen, JPEG anstelle von PNG zu verwenden.
•Verwenden Sie das WebP-Bildformat sowohl auf PCs als auch auf mobilen Geräten. WebP-Bilder zeigen bei verlustbehafteter Komprimierung kaum sichtbare Qualitätseinbußen, reduzieren jedoch die Dateigröße deutlich. (Hinweis: WebP ist ein von Google im Jahr 2010 eingeführtes neues Bildformat, das in der Komprimierung dem JPEG-Format überlegen ist. Bei gleicher Qualität sind WebP-Bilder etwa 40 % kleiner als JPEG-Bilder. Die Verwendung von WebP auf Websites kann die Ladegeschwindigkeit erheblich verbessern.)
(2) Wie aktiviert man das WebP-Bildformat auf einer Website?
1) Schritte zur Aktivierung von WebP: http://help.eyingbao.com/products/webp.html
2) Was tun, wenn einzelne Bilder nach der Aktivierung von WebP unscharf sind? In den Bildeigenschaften kann die Bildqualität angepasst werden. Beachten Sie jedoch, dass eine höhere Qualität zu größeren Dateien und langsameren Ladezeiten führt.
Schritte: http://help.eyingbao.com/products/wangzhanshangtupianbuqingxizenmechuli.html
Hinweise:
•Stellen Sie sicher, dass die Webseite keine überflüssigen oder ungenutzten Bildressourcen enthält.
•Achten Sie auf Bilder, die standardmäßig geladen werden, aber möglicherweise nie angezeigt werden, wie z.B. „Slideshow-Bilder“, „Akkordeons“ und „Bildergalerien“.
•Um die Renderzeit wichtiger Bilder zu verkürzen, verwendet das EasyStore-System verzögertes Laden für weniger wichtige Bilder.
(3) CDN-Beschleunigung für Bilder
Im EasyStore-Website-System werden alle Bilder außer Icons auf einem CDN bereitgestellt. Für solche Netzwerkbilder ist keine weitere Komprimierung erforderlich.
(4) Lazy Loading für Bilder
Die Image-Komponente der EasyStore-Website-Plattform bietet standardmäßig Lazy-Loading-Technologie:
Entwicklertools wie „Network“ können verwendet werden, um Ladezeiten und Dateigrößen von Bildern zu überprüfen. Die Schritte sind wie folgt:
(1) Alle Browser haben einen Entwicklermodus. Am Beispiel von Chrome: Öffnen Sie die Seite und drücken Sie Strg+Umschalt+I oder klicken Sie mit der rechten Maustaste auf „Untersuchen“, um in den Entwicklermodus zu gelangen. Klicken Sie dann auf das „Network“-Tab.
(2) Klicken Sie auf „Img“ und dann auf „Size“, um Bilder nach ihrer Größe zu sortieren. Optimieren Sie vor allem Bilder über 50 KB mit Bildbearbeitungstools.
Laden Sie die optimierten Bilder einfach erneut hoch und veröffentlichen Sie sie. Alternativ können Sie die WebP-Funktion direkt im Website-Backend aktivieren.
Das sind die wichtigsten Methoden, um die Ladegeschwindigkeit von Webseiten durch Bildoptimierung zu verbessern. Wenn Ihre Website ebenfalls Probleme mit zu großen Bildern hat, wenden Sie diese Optimierungsmethoden an!
Verwandte Artikel



Verwandte Produkte