Immagine HTML vs. CSS

[picca]

Savle a tutti. Avrei una domanda. all'apparenza semplice, ma in realta mi stà causando dubbi!
Secondo voi, è meglio usare il tag [img][/img] nel codice html, oppure definire tramite la funzione: background-image:url(../images/xxx.png); nel foglio CSS ?

Esempio: ho un DIV nel quale ci voglio mettere un'immagine. Meglio usare <img> nell'HTML o definire il background-image nel CSS ? I motori di ricerca come la vedono la cosa?

Grazie mille. Daniela.

[luca1962]

Sono 2 tag differenti.

[img][/img]

e' per un'immagine "in primo piano"

mentre

<background-image:url ... >

e' il codice di un'immagine di sfondo.

[picca]

Forse mi sono espressa male. Intendevo, devo mettere un'immagine in un div. Quindi sia se la metto con img="" sia che la metto con background-image il risultato è identico. Vorrei sapere i motori di ricerca cosa preferiscono? Com'è più giusto fare ? Grazie.

ps. Cioè è meglio disturbare i CSS oppure fare in HTML. Naturalmente tale DIV resterà vuoto, quindi non avrei la necessità di utilizzare background-image per poi metterci qualcosa "sopra"

[figlio89]

Originariamente inviato da picca
Forse mi sono espressa male. Intendevo, devo mettere un'immagine in un div. Quindi sia se la metto con img="" sia che la metto con background-image il risultato è identico. Vorrei sapere i motori di ricerca cosa preferiscono? Com'è più giusto fare ? Grazie.

ps. Cioè è meglio disturbare i CSS oppure fare in HTML. Naturalmente tale DIV resterà vuoto, quindi non avrei la necessità di utilizzare background-image per poi metterci qualcosa "sopra"

Premetto che dipende un po' dall'utilizzo che fai dell'immagine, ovvero quante volte la usi però tra i 2 metodi vedo 2 possibili conseguenze.

Soluzione CSS:

Probabilmente riesci a guadagnare qualcosina sul tempo di caricamento (soprattutto se l'immagine è ripetuta tante volte e ti crei degli sprite). Il tempo di caricamento è stato introdotto da Google come fattore per il posizionamento.

Soluzione Tag Img:

C'è la possibilità di inserire l'Alt Text che rende il sito più accessibile e dà ai motori di ricerca qualche info in più riguardo l'immagine. A questo proposito ricorda ci chiamare l'immagine in maniera pertinente (ad es se parli di una palla rossa chiama l'immagine palla-rossa.gif non gif1.gif)

Spero sia d'aiuto

[picca]

Grazie! Molto gentile. Diciamo che non cambia di molto. Però, punto per i CSS dato che mi hai detto che la velocità di caricamento interessa a Google. Sinceramente, per quanto riguarda l'accessibilità... è un problema/ino che non mi interessa molto. Grazie ancora per la chirissima risposta.

[figlio89]

Personalmente se dovessi sceglierlo deciderei di mettere un tag IMG nel caso in cui mi interessasse posizionare l'immagine su Google Images (Il motore di ricerca per immagini di Google).

Invece trovo più pratico l'utilizzo dei CSS se devo posizionare la pagina singola (Soprattutto se utilizzo diverse immagini, utilizzando gli sprite CSS si riesce a diminuire il loro peso e di conseguenza migliorare la velocità di apertura pagina)

[Myaku]

la domanda che ti dovresti porre è: qual'è il significato semantico dell'immagine?
se l'immagine è un vero e proprio contenuto (al pari del testo), allora è più corretto utilizzare il tag img
se l'immagine è solo decorativa / è parte del layout ma non ha rilevanza come contenuto, allora andrebbe gestita da css.

[Nick60]

Concordo pienamente con Myaku:

Se l'immagine appartiene al layout della pagina, va nel css, se è parte del contenuto della pagina va nell'html.

Immagina ad esempio di creare una pagina che contiene un album di fotografie.

Se la pagina contiene immagini che fanno parte del layout le metti nel css, ma ovviamente le foto dell'album sono parte del contenuto della pagina e le metterai nell'HTML.

[picca]

Grazie ancora a tutti. Dopo i vostri suggerimenti ho capito cosa usare... Cioè CSS! :-)