Responsive-Bildgröße-Rechner
Responsive-Bildgröße-Rechner
Geben Sie die maximale Breite ein, mit der Ihr Bild in CSS-Pixeln angezeigt wird (seine Layout-Größe, nicht die Dateigröße). Dies berechnet die tatsächlichen Pixelbreiten, die Sie für jede gängige Bildschirm-Pixeldichte exportieren müssen.
- Formel: Quellbreite = Anzeigebreite × Gerätepixelverhältnis, berechnet für die vier häufigsten Verhältnisse: 1x, 1.5x, 2x und 3x.
- Warum mehrere Größen wichtig sind: ein Bildschirm mit hoher Dichte ("Retina") packt mehr physische Pixel in denselben Raum, sodass ein 1x-Bild unscharf wirkt.
- 1x, 2x und 3x sind am wichtigsten: die meisten Geräte fallen in diese drei Dichtekategorien; 1.5x ist eine kleinere, aber immer noch relevante Kategorie für einige Android-Geräte.
Brauche ich alle vier Größen für jedes Bild?
Nicht unbedingt — 1x, 2x und 3x decken die überwiegende Mehrheit der Geräte ab; das Hinzufügen von 1.5x ist eine kleinere Optimierung, die manche Websites auslassen.
Wie verwende ich diese Breiten in HTML?
Listen Sie sie im srcset-Attribut eines img-Tags zusammen mit einem sizes-Attribut auf, das Ihr Layout beschreibt, und der Browser lädt automatisch die am besten passende Version.
Responsive-Bildgröße-Rechner
Geben Sie die maximale Breite ein, mit der Ihr Bild in CSS-Pixeln angezeigt wird (seine Layout-Größe, nicht die Dateigröße). Dies berechnet die tatsächlichen Pixelbreiten, die Sie für jede gängige Bildschirm-Pixeldichte exportieren müssen.
- Formel: Quellbreite = Anzeigebreite × Gerätepixelverhältnis, berechnet für die vier häufigsten Verhältnisse: 1x, 1.5x, 2x und 3x.
- Warum mehrere Größen wichtig sind: ein Bildschirm mit hoher Dichte ("Retina") packt mehr physische Pixel in denselben Raum, sodass ein 1x-Bild unscharf wirkt.
- 1x, 2x und 3x sind am wichtigsten: die meisten Geräte fallen in diese drei Dichtekategorien; 1.5x ist eine kleinere, aber immer noch relevante Kategorie für einige Android-Geräte.
Brauche ich alle vier Größen für jedes Bild?
Nicht unbedingt — 1x, 2x und 3x decken die überwiegende Mehrheit der Geräte ab; das Hinzufügen von 1.5x ist eine kleinere Optimierung, die manche Websites auslassen.
Wie verwende ich diese Breiten in HTML?
Listen Sie sie im srcset-Attribut eines img-Tags zusammen mit einem sizes-Attribut auf, das Ihr Layout beschreibt, und der Browser lädt automatisch die am besten passende Version.