Uso da etiqueta IMG HTML para imaxes e obxectos
A etiqueta IMG HTML regula a inserción de imaxes e outros obxectos gráficos estáticos dentro dunha páxina web. Esta etiqueta común admite varios atributos obrigatorios e opcionais que engaden riqueza á súa capacidade para deseñar un sitio web atractivo e centrado en imaxes.
Un exemplo dunha etiqueta IMG HTML completa é así:
Atributos de etiquetado IMG obrigatorios
SRC. O único atributo que precisa para mostrar unha imaxe nunha páxina web é o atributo SRC. Este atributo identifica o nome e a localización do ficheiro de imaxe que se mostrará.
ALT. Para escribir XHTML e HTML4 válidos, tamén se require o atributo ALT. Este atributo úsase para proporcionar navegadores non visuais con texto que describe a imaxe. Os navegadores mostran o texto alternativo de diferentes xeitos. Algúns o mostran como un pop-up cando pór o rato sobre a imaxe, outros o mostran nas propiedades cando fai clic co botón dereito sobre a imaxe e algúns non a mostran.
Use o texto alt para dar detalles adicionais sobre a imaxe que non son relevantes ou importantes para o texto da páxina web. Pero lembre que en lectores de pantalla e outros navegadores só de texto, o texto lerase en liña co resto do texto da páxina. Para evitar a confusión, utilice texto alt descriptivo que diga (por exemplo), "Sobre o deseño web e HTML" no canto de só "logotipo".
En HTML5, o atributo ALT non sempre é necesario, porque pode usar un título para engadir máis descricións. Tamén pode usar o atributo ARIA-DESCRIBEDBY para indicar unha ID que contén unha descrición completa.
O texto de texto tamén non é necesario se a imaxe é puramente decorativa, como un gráfico na parte superior dunha páxina web ou íconos. Pero se non está seguro, inclúa texto alt por se só.
Atributos IMG recomendados
ANCHO e ALTURA . Debes poñer o costume de usar sempre os atributos WIDTH e HEIGHT. E sempre debes usar o tamaño real e non redimensionar as túas imaxes co navegador.
Estes atributos aceleran a representación da páxina porque o navegador pode asignar espazo no deseño para a imaxe e, a continuación, continuar descargando o resto do contido, en lugar de esperar a descargar toda a imaxe.
Outros atributos IMG útiles
TÍTULO . O atributo é un atributo global que se pode aplicar a calquera elemento HTML . Ademais, o atributo TITLE permítelle engadir información adicional sobre a imaxe.
A maioría dos navegadores admiten o atributo TITLE, pero o fan de diferentes xeitos. Algúns mostran o texto como un pop-up mentres que outros o mostran nas pantallas de información cando o usuario fai clic dereito na imaxe. Podes usar o atributo TITLE para escribir información adicional sobre a imaxe, pero non contas con que esta información estea oculta ou visible. Debería definitivamente non usar isto para ocultar palabras clave para os motores de busca. Esta práctica agora é penalizada pola maioría dos buscadores.
USEMAP e ISMAP . Estes dous atributos sitúan as imaxes da imaxe do lado do cliente () e do lado do servidor (ISMAP).
LONGDESC . O atributo admite URL para unha descrición máis longa da imaxe. Esta función fai que as túas imaxes sexan máis accesibles.
Atributos IMG obsoletos e obsoletos
Varios atributos agora están obsoletos en HTML5 ou están desaprovechados en HTML4. Para o mellor HTML, debes atopar outras solucións no canto de utilizar estes atributos.
FRONTERA . O atributo define o ancho en píxeles de calquera bordo ao redor da imaxe. Quedou obsoleto a favor de CSS en HTML4 e está obsoleto en HTML5.
ALIGN . Este atributo permítelle colocar unha imaxe dentro do texto e facer que o texto flúa ao redor. Pode alinear unha imaxe á dereita ou á esquerda. Foi obsoleto en favor da propiedade CSS de flutuante en HTML4 e está obsoleta en HTML5.
HSPACE e VSPACE . O HSPACE Os atributos de VSPACE engaden o espazo en branco horizontal (HSPACE) e vertical (VSPACE). O espazo branco engádese aos dous lados do gráfico (arriba e abaixo ou á esquerda e á dereita), polo que se só necesita espazo dun lado, debería usar CSS. Estes atributos foron obsoletos en HTML4 a favor da propiedade CSS de marxe, e son obsoletos en HTML5.
LOWSRC . O atributo LOWSRC proporciona unha imaxe alternativa cando a súa fonte de imaxes é tan grande que descarga moi lentamente. Por exemplo, pode ter unha imaxe que é de 500KB que quere que se amose na súa páxina web, pero a 500KB tardaría moito en descargarse. Entón, crea unha copia moito máis pequena da imaxe, quizais en branco e negro ou extremadamente optimizada, e coloque isto no atributo LOWSRC. A imaxe máis pequena descargará e mostrará primeiro e, despois, cando apareza a imaxe máis grande, substituirá a fonte de baixo consumo.
O atributo LOWSRC engadiuse a Netscape Navigator 2.0 á etiqueta IMG. Foi parte do nivel 1 do DOM pero foi eliminado do nivel DOM 2. O soporte do navegador foi incompleto para este atributo, aínda que moitos sitios afirman que é compatible con todos os navegadores modernos. Non está desaprobado en HTML4 ou obsoleto en HTML5 porque nunca foi parte oficial de ningunha das especificacións.
Evite utilizar este atributo e, no seu lugar, optimiza as túas imaxes para que poidan cargar rapidamente. A velocidade da carga da páxina é unha parte crítica do bo deseño web e as imaxes grandes lentas baixan enormemente, mesmo se usa o atributo LOWSRC.