Ist es in einem HTML-Dokument eine schlechte Übung, Bilder mit den Tags height und width zu skalieren?

Question

Wenn ich ein Logobild habe und es auf einer anderen Seite verwenden möchte, auf der es kleiner sein soll, ist es mein Instinkt, ein neues Bild zu erstellen, das mit einem Grafikeditor skaliert wird. Ich höre jedoch, dass es für den Benutzer besser ist, wenn ich stattdessen auf das Originalbild referenziere und die Größe mit dem Browser ändere, indem ich die Höhe und Breite des Bild-Tags ändere.

Also frage ich die Menge, was ist die beste Praxis hier?

Vielen Dank für Ihre Zeit,

- Henry

Answer 1

Meine Standardantwort wäre "Größe in einer Grafikanwendung ändern", aber es hängt davon ab, wie Sie es verwenden.

Wenn Sie die Bildgrößenanpassung dem Browser überlassen, muss das Originalbild (in voller Größe) heruntergeladen werden, bevor der Browser es in einem kleineren Maßstab anzeigen kann. Dies bedeutet, dass Sie mehr Bandbreite verwenden und Ihre Webseite länger lädt. Wenn Sie jedoch hauptsächlich das größere Bild auf Ihrer Website verwenden, ist es schneller, dieses Bild immer zu verwenden, da der Browser es zwischenspeichern kann.

Wenn Sie sich Sorgen um die Bildqualität machen, erzielen Sie bessere Ergebnisse und hätten mehr Kontrolle über den Downsampling-Prozess, indem Sie eine dedizierte Grafikanwendung zur Größenänderung des Bildes verwenden.

Answer 2

Es ist in Ordnung Bilder mit CSS oder der Höhe und Breite-Tags zu ändern. Das einzige, worauf Sie achten sollten, ist, große Bilder klein zu halten, weil sie die Download-Größe natürlich nicht verringern.

Dies funktioniert am besten, wenn Sie Ihre Bilder effektiv zwischenspeichern, damit sie nicht ein zweites Mal heruntergeladen werden. Dann werden Sie einen spürbaren Nutzen daraus ziehen. Ich anhängen in der Regel nur die letzte Änderungszeit des Bildes auf die URL, zB:

<img src="/images/log.png?1233454568"> 

und legen Sie dann die Header-Gültig bis zu einem Jahr ab jetzt. Wenn sich das Bild ändert, ändert sich die mtime und es wird den Browser zwingen, es neu zu laden.

Dies wird für Bilder, Javascript und CSS-Dateien empfohlen.

Answer 3

Wenn der Browser die Größe des Bildes für Sie ändert, indem Sie height/width verwenden, können Sie mit einem Bild geringerer Qualität enden, das hängt vom Bildtyp ab (wie Foto vs. einfache Grafik). Probieren Sie es aus Browser. Die Größenänderung des Bildes in einem Grafikeditor ist jedoch die einzige Möglichkeit, um eine qualitativ hochwertige Größenänderung sicherzustellen.

Answer 4

Erstellen Sie das kleinere Bild in einem Grafik-Editor, aus mehreren Gründen:

1. Wenn Benutzer nicht bereits das größere Bild im Cache gespeichert, werden sie die größere Datei unnötig werden herunterzuladen.

2. Die Größenänderung des Bilds auf der Clientseite führt zu einer unvorhersehbaren Skalierungsqualität.

3. Do it in HTML ist sowieso unklug, für Darstellungsprobleme (wie Elementgrößen) sollte man es per CSS machen.