Auswirkung fehlender Image Tags bei Responsive Design?

[derjanni]

Hallo liebe Freunde,

mit einem nie dagewesenen Entwicklungsaufwand programmiere ich gerade meine gesamte Website um und passe jeden Artikel an, da die Website Responsive werden soll. Dabei werden die Bilder, die in mannigfaltigen Größen bei mir vorliegen, durch CSS skaliert und befinden sich als Hintergrund in einem DIV und nicht mehr, wie vorher, in einem IMG tag.

Code: Alles auswählen

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
​

Meine Frage: Welche Auswirkung hat das auf mein Ranking für die Web-Suche sowie die Bilder-Suche bei Google?

Danke und viele Grüße,

Jan

[gurken]

ist für mich auch neu, habs bei ein paar Seiten von mir mal getestet und die Hintergrundgrafiken wurden nicht in der Bildsuche angezeigt.

Sauberer wäre das Bild in ein <div class="bla"><img> zu packen und das div dann über css formatieren, weiter über die Mediaquerries es für alle Größen anzupassen.

[derjanni]

ist für mich auch neu, habs bei ein paar Seiten von mir mal getestet und die Hintergrundgrafiken wurden nicht in der Bildsuche angezeigt.

Sauberer wäre das Bild in ein <div class="bla"><img> zu packen und das div dann über css formatieren, weiter über die Mediaquerries es für alle Größen anzupassen.

Danke für den Tipp gurken! So werde ich es machen Div-Tag mit IMG-Tag innen drin und overflow-y:hidden

[luti]

Div-Tag mit IMG-Tag innen drin und overflow-y:hidden

Ich würde da eher mit min-width und max-width bzw. width:100% arbeiten. Meiner Meinung nach kann ein Bild auf mobilen Endgeräten ruhig etwas größer dargestellt werden als es eigentlich ist. -> Sprich, ideal wäre es, bei großen Bildern eine zweite Version in geringerer Größe zu erstellen und diese dann in der mobilen Variante anzuzeigen.