Ein besser reagierendes Bild mit 1x1 px PNG?

Question

Ich liebe die Art und Weise img Tags arbeiten in responsive Design. Es wird proportional skaliert und erweitert das div, das es enthält. Das Problem ist, dass das Bild die gleiche Pixelanzahl in jeder Größe hat, was für mobile Geräte schrecklich ist.

Ich dachte an eine Möglichkeit, ein 1x1-Pixel-PNG-Bild mit einem Breiten- und Höhenattribut im Markup zu verwenden, um den Anteil zu definieren. Auf diese Weise skaliert Ihr div auf der Grundlage des PNG proportional und Sie können die Hintergründe mit Medienabfragen austauschen. Und Sie können es mehrmals auf Ihrer Seite mit nur einer HTTP-Anfrage verwenden.

Gibt es Probleme mit dieser Methode zum Angreifen von Responsive Images?

.container { 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    
 
    background-repeat: no-repeat; 
 
    border: 1px solid blue; 
 
    background-image: url(large.png) 
 
} 
 

 
@media screen and (max-width: 968px) { 
 
    .container { 
 
    background-image: url(small.png) 
 
    } 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="container"> 
 
    <img src="1x1.png" width="5" height="1"> 
 
</div>

Answer 1

Wenn Ihr Ziel ist HTTP-Anforderungen zu minimieren, HTML5 stellt das <picture> Element bereit:

4.8.2 The picture element

Das picture Element ist ein Behälter, der Autoren mehrere Quellen seiner enthaltenen img Element bietet, damit Steuerelement deklarativ oder Hinweise an den Benutzeragenten geben, über die Bildressource Verwendung basierend auf dem Bildschirm Pixeldichte , Ansichtsfenstergröße, Bildformat, und andere Faktoren.

Mit diesem Element, das Sie der Browser das entsprechende Bild zu wählen, basierend auf einer Medienabfrage erlauben kann:

<picture> 
    <source srcset="large.png" media="(min-width: 1000px)"> 
    <source srcset="standard.png" media="(min-width: 600px) and (max-width: 999px)"> 
    <source srcset="small.png" media="(max-width: 599px)"> 
    <img src="standard.png" alt="accessibility text here"><!-- graceful degradation --> 
</picture> 

Es genügt zu bemerken, dass dieses Element noch nicht über Universal-Browser-Unterstützung: http://caniuse.com/#search=picture

hier ist eine polyfill falls erforderlich: https://scottjehl.github.io/picturefill/

Referenzen:

• The <picture> element ~ MDN
• Better Responsive Images With the picture Element ~ envatotuts +
• Built-in Browser Support for Responsive Images ~ HTML5 Rocks

Answer 2

Ja, es gibt ein Problem mit Zugänglichkeit. Bilder in HTML sind gemein zu sein ... Nun, bedeutungsvoll. Sie setzen also unschöne Bilder in HTML und sinnvolle Bilder in CSS, wo sie für einen Bildschirmleser absolut keine Bedeutung haben (zum Beispiel).

Außerdem planen Sie, große Bilder zu laden, Retina-Displays auf Geräten zu handhaben, die sie nicht brauchen, und nur "Größe ändern"?

Sie bessere Möglichkeiten haben mobile Geräte pixel Größe zu handhaben, wie srcset: https://developer.mozilla.org/en/docs/Web/HTML/Element/Img#Example_3_Using_the_srcset_attribute

Oder das Bildelement: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

http://caniuse.com/#feat=srcset http://caniuse.com/#feat=picture