Mireu qualsevol pàgina web en línia avui mateix i veureu que comparteixen algunes coses en comú. Un d'aquests trets compartits són imatges. Les imatges correctes afegeixen tant a la presentació d'un lloc web. Algunes d'aquestes imatges, com el logotip d'una empresa, ajuden a marcar el lloc i connecten aquesta entitat digital a la vostra empresa física.
Per afegir una imatge, icona o gràfics a la vostra pàgina web, heu d'utilitzar l'etiqueta en el codi HTML d'una pàgina. Col·loqueu l'etiqueta IMG al vostre codi HTML on voleu que es mostri el gràfic. El navegador web que representa el codi de la pàgina substituirà aquesta etiqueta amb el gràfic adequat una vegada que es visualitzi la pàgina. Tornant a l'exemple del logotip de la nostra empresa, aquí és com podeu afegir aquesta imatge al vostre lloc:
Atributs d'imatges
Si observeu el codi HTML anterior, veureu que l'element inclou dos atributs. Cadascun d'ells es requereix per a la imatge.
El primer atribut és el "src". Això és, literalment, el fitxer d'imatge que voleu que es mostri a la pàgina. En el nostre exemple, fem servir un fitxer anomenat "logo.png". Aquest és el gràfic que el navegador web mostrarà quan es renderitzi el lloc.
També notaràs que abans d'aquest nom del fitxer, hem afegit alguna informació addicional, "/ images /". Aquesta és la ruta del fitxer. La barra inclinada inicial indica al servidor que examini l'arrel del directori. A continuació, buscarà una carpeta anomenada "imatges" i, finalment, l'arxiu anomenat "logo.png". L'ús d'una carpeta anomenada "imatges" per emmagatzemar tots els gràfics d'un lloc és una pràctica bastant habitual, però la vostra ruta d'accés al fitxer es canviaria a allò que sigui rellevant per al vostre lloc.
El segon atribut obligatori és el text "alt". Aquest és el "text alternatiu" que es mostra si la imatge no es pot carregar per alguna raó. Aquest text, que en el nostre exemple llegeix el "Logotip de l'empresa" es mostrarà si la imatge no es carrega. Per què passaria això? Diverses raons:
- Ruta del fitxer incorrecta
- Nom del fitxer o faltes ortogràfiques incorrectes
- Error de transmissió
- El fitxer s'ha eliminat del servidor
Aquestes són només algunes possibilitats per què la nostra imatge especificada pot faltar. En aquests casos, el nostre alt text es mostrarà en el seu lloc.
El programari de lectura de pantalla també utilitza el text alt per "llegir" la imatge a un visitant que té una visió alterada. Com que no poden veure la imatge com nosaltres, aquest text els permet saber què és la imatge. Per això, cal un text alt i per què ha d'indicar clarament què és la imatge!
Un malentès comú d'alt text és que està pensat per a motors de cerca. Això no és cert. Tot i que Google i altres motors de cerca llegeixen aquest text per determinar quina és la imatge (recordeu que tampoc no poden "veure" la vostra imatge), no hauria d'escriure text alt per apel·lar exclusivament als motors de cerca. Autor alt text clar que està destinat als humans. Si també podeu afegir paraules clau a l'etiqueta que apel·len als motors de cerca, això està bé, però assegureu-vos que el text alt utilitzi el seu propòsit principal indicant quina imatge és per a qui no pugui veure el fitxer gràfic.
Altres atributs
L'etiqueta IMG també té dos altres atributs que podeu veure en ús quan col·loqueu un gràfic a la vostra pàgina web: l'amplada i l'alçada. Per exemple, si utilitzeu un editor WYSIWYG com Dreamweaver, afegeix aquesta informació automàticament. Aquí teniu un exemple:
Els atributs WIDTH i HEIGHT informen al navegador la mida de la imatge. El navegador llavors sap exactament quant d'espai en el disseny assignar, i es pot passar al següent element de la pàgina mentre es descarrega la imatge. El problema amb l'ús d'aquesta informació en el vostre codi HTML és que no sempre voleu que la vostra imatge es mostri a aquesta mida exacta. Per exemple, si teniu un lloc web sensible amb canvis de mida basats en la pantalla dels visitants i la mida del dispositiu, també voleu que les vostres imatges siguin flexibles. Si indiqueu a la vostra mida HTML la mida fixa, us resultarà molt difícil substituir-vos per consultes mediàtiques CSS sensibles. Per aquest motiu, i per mantenir una separació d'estil (CSS) i estructura (HTML), es recomana que NO afegiu atributs d'amplada i alçada al vostre codi HTML.
Una nota: si deixeu aquestes instruccions de mida i no especifiqueu cap mida a CSS, el navegador mostrarà la imatge a la seva mida nativa per defecte de totes maneres.
Editat per Jeremy Girard