Ist die CSS-Größenänderung von Bildern immer noch eine schlechte Idee?

Es wurde immer darauf geachtet, dass die Verwendung von Breiten- / Höhenattributen für Bilder, die nicht dem tatsächlichen Originalbild entsprechen, eine schlechte Idee ist. Dies kann pixelige Bilder oder Downloadgrößen bedeuten, die größer als erforderlich sind.

Aber ist das immer noch ein Problem? Ich würde nicht empfehlen, Fotos zu vergrößern, aber das Verkleinern sollte kein Problem sein, vorausgesetzt, es unterscheidet sich nicht zu sehr vom Original und ist maßstabsgetreu.

Zum Beispiel habe ich ein Foto mit einer Größe von 600 x 400 und klebe eine Breite von 400 Pixel darauf. Die meisten modernen Browser verkleinern das Bild und es sieht so aus, als ob das Rendern immer noch anständig ist.

Wie sehen alle das?

Sorgen Sie sich nicht um die Skalierung (die meisten Browser lassen skalierte Bilder meiner Erfahrung nach gut aussehen), sondern um die Größe der Nutzdaten, die Sie an den Endbenutzer gesendet haben.

Sicher, Sie könnten argumentieren, dass Sie nur eine winzige Menge an Bandbreite an beiden Enden für die zusätzlichen Pixel verschwenden, die Sie senden, ohne die Absicht zu verwenden, aber es gibt auch Zeitkosten.

Für jedes Bild, das Sie in einer Größe senden, die über der erforderlichen Größe liegt, fügen Sie dem Laden der Seite für Ihren Benutzer eine kleine Verzögerung hinzu. Bei Websites mit nur wenigen Bildern ist dies kein Problem. Bei Websites mit einer großen Anzahl unterstützender Elemente wird jedoch eine spürbare Verzögerung hinzugefügt, und die Verzögerung kostet Sie Geld .

Auch in Bezug auf die winzigen Bandbreitenkosten, wenn der Datenverkehr Ihrer Site steigt, steigen auch die winzigen Bandbreitenkosten.

Sparen Sie also Ihrem Unternehmen Geld und verbringen Sie die 30 Sekunden, die Sie benötigen, um die Größe des Bildes selbst zu ändern! :) :)

Führen Sie wie immer Ihr Benchmarking durch, aber wenn die App nicht wirklich beliebt / geschäftskritisch ist, würde ich mir keine Sorgen über eine Verkleinerung von 600 auf 400 machen, wenn Sie die Breite häufig ändern müssen. Wenn es sich um eine einmalige convert -geometry 400x photo1.jpg photo2.jpgApp handelt, aber wenn es sich um eine App handelt, die Sie schnell durchlaufen, gibt es wahrscheinlich wichtigere Dinge, über die Sie sich Sorgen machen müssen, selbst im Bereich der Leistung. zB Latenz; Zum Beispiel vorbeugendes Laden von Bildern.

Die Bildgröße kann auf Mobilgeräten wichtig sein, bei denen große Bildgrößen den Triple-Whammy-Effekt haben, dass sie langsam geladen werden (mobiles Breitband), das Rendern länger dauert (Hardware niedrigerer Qualität) und - nach dem Rendern - bei hoher Auflösung nicht vollständig sichtbar sind wie auch immer.

Möglicherweise möchten Sie auch reaktionsschnelle Bilder untersuchen. Es gibt eine Menge Arbeit, die die Leute geleistet haben, zum Beispiel das automatische Verkleinern und anschließende Zwischenspeichern von Bildern auf dem Server ist ein guter Ansatz, wenn dies häufig vorkommt.

Das Problem ist die Nutzlast, die der Browser in jeder Größe wiedergibt (insbesondere kleinere Größen, über die Sie sprechen).

Für eine Site mit hohem Volumen sind sogar einzelne Bytes von Bedeutung. Sie möchten keine unerwünschten Daten senden.

Apropos schlechte Idee, es ist nicht wirklich eine schlechte Idee, die Breite / Höhe um einige Pixel anzupassen oder kann 10 oder 20 Pixel betragen. Aber es ist eine sehr schlechte Idee, wenn Sie ein großes Bild auf ein Miniaturbild verkleinern :)