Wie den Tag gerettet hat – Umgang mit großen Bildern im Browser

const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); // img.src = URL.createObjectURL(file); // Use this if you're working with uploaded files img.src = filesroot + data.file_path; // Our existing file path img.onload = function() { // Resize canvas to desired size (for preview) canvas.width = 80 * (img.width / img.height); // Adjust scaling as needed canvas.height = 80; // Draw the image onto the canvas, resizing it in the process ctx.drawImage(img, 0, 0, canvas.width, canvas.height); file_div.innerHTML = ''; // Prepared <div> in UI to display the thumbnail file_div.appendChild(canvas); };

Die Ergebnisse

Die Verbesserung war sofort und dramatisch! Der Browser verarbeitete nicht nur die 28 großen Bilder ohne Probleme, wir haben ihn auch noch weiter gesteigert, indem wir 120-MB-Bilder mit den Maßen 28.000 x 17.000 Pixel geladen haben, und es funktionierte immer noch so, als ob es so wäre war ein kleines Symbol.

Wo ist der Unterschied?

Mit der Funktion Element, die Zeichnung liegt vollständig in den Händen der GPU, und diese Chips sind buchstäblich für diese Aufgabe gemacht.

• Versucht immer noch, 28.000 * 17.000 = 476.000.000 Pixel zu rendern.
• Diese zeichnet nur 80 * 80 = 6.400 Pixel.

Durch die Größenänderung des Bildes innerhalb der Auf eine kleine Vorschaugröße reduzieren wir die Datenmenge, die der Browser verarbeiten muss, drastisch – senden Sie Hunderte Millionen Pixel an die GPU und erhalten Sie Tausende zurück, ein tolles Angebot, oder?

Nächste Schritte

Angesichts dieses Erfolgs denken wir jetzt darüber nach, mit in anderen Teilen unserer Anwendung, insbesondere in Admin-Bildschirmen, auf denen etwa 250 Bilder gleichzeitig angezeigt werden. Obwohl die Größe dieser Bilder bereits korrekt ist, sind wir gespannt, ob die Verwendung von kann eine noch bessere Leistung bieten.

Wir führen Tests und Benchmarking durch, um etwaige Leistungssteigerungen zu messen. Ich werde unsere Erkenntnisse auf jeden Fall in einem zukünftigen Artikel teilen.

Wichtige Vorbehalte

Bei der Verwendung von Da dies für unseren speziellen Anwendungsfall Wunder gewirkt hat, muss ich beachten, dass Sie nicht verwenden sollten. zum Anzeigen von Bildern auf öffentlich zugänglichen Teilen von Websites. Hier ist der Grund:

• Barrierefreiheit: Elemente sind für Bildschirmlesegeräte lesbar und helfen sehbehinderten Benutzern.
• SEO: Suchmaschinen indizieren Bilder von Tags, die die Sichtbarkeit Ihrer Website verbessern können. (Auf die gleiche Weise „indizieren“ auch KI-Trainings-Scraper die Bilder. Nun, was können Sie tun ...)
• mit kann verwendet werden, um die Pixeldichte automatisch zu erkennen und größere oder kleinere Bilder für eine perfekte Passform anzuzeigen – kippen. Ich habe einen Artikel darüber geschrieben, wie Sie Ihr .
erstellen

Bei öffentlichen Websites ist es am besten, die Größe der Bilder auf der Serverseite richtig zu ändern, bevor sie den Benutzern bereitgestellt werden. Wenn Sie daran interessiert sind, wie Sie die Größenänderung und Optimierung von Bildern automatisieren können, habe ich einen Artikel zu diesem Thema geschrieben, der für Sie möglicherweise nützlich sein könnte.

Abschluss

Ich liebe Optimierung! Auch wenn wir jeden Tag auf lokale Hochleistungshardware umsteigen, können wir durch Optimierung – auch wenn „es gut ist, aber besser sein kann“ – solche Probleme verhindern Anfang.

Dieser Ansatz ist kein Standard. Und ich halte nicht viel von Standards. Sie werden oft als strenge Regeln behandelt, sind aber lediglich Richtlinien. Diese Lösung passt. Wir haben keine Kunden mit alten Geräten ohne solide Unterstützung. Auch wenn wir jetzt mehr Code verwalten müssen und mehrere Möglichkeiten zum Anzeigen von Bildern haben, passt es perfekt, und das ist es, worauf es ankommt!

Haben Sie ähnliche Erfahrungen? Wie bist du damit umgegangen? Teilen Sie gerne Ihre Erfahrungen mit oder stellen Sie Fragen in den Kommentaren unten!