Hola, hoy vamos a
hablar de imágenes. Existen muchas etiquetas en HTML, y la
mayoría de ellas se explican por sí mismas. Pero la etiqueta img es
la que queremos explorar, para estar seguros de que estás
usándola con el mejor de los propósitos. En este punto, has escuchado
hablar de muchas etiquetas distintas. Pero img es una de la que
necesitas comprender cuáles son sus
distintos atributos. Existen muchos archivos
distintos que soporta HTML. Los más comunes son: JPEG, GIF y PNG,
que vas a ver a menudo. También están
SVG y BMP. Existen opciones
adicionales. EL asunto más importante es que
no importa qué tipo de archivo uses, deberás incluir las diferentes
extensiones de archivo. Que son .jpg, .gif, .png. Algo adicional para comprender es
que cuando alguien mira en tu página, cada una de las imágenes que has
puesto en tu página debe ser descargada, y el tamaño puede ser
realmente un problema. Si esperas que la mayoría de las
personas que verán tu página sea desde un teléfono móvil, deberías pensar en usar tamaños de archivos
pequeños, porque cada una de las imágenes requiere una solicitud HTTP con el fin
de ser descargadas en el navegador. Cuando pensamos en el tamaño de la
imagen, la mayoría de las personas piensan, lo grandes que van a
aparecer en la pantalla. Pero en la ciencia de la computación,
hablamos más del tamaño en píxeles. Por defecto, el navegador abrirá tu imagen en
el tamaño exacto en la que fue guardada. Y es realmente raro
que el tamaño sea el óptimo. Probablemente has ido a
un sitio al que has llegado y la imagen era muy pequeña y no
eres capaz de hacerla más grande. O quizás, lo que me parece aún más molesto, es
cuando la imagen ocupa toda la pantalla y te ves obligado a desplazarte
tratando de verla entera. Voy a mostrarte dos soluciones rápidas
para cambiar el tamaño de la imagen. La primera es cambiar el archivo real,
y la segunda es utilizar la anchura y la altura en la etiqueta img. Si vas a usar un editor
para cambiar el archivo, lo que debes entender es que los editores
cambian las imágenes de forma permanente. Esto solo funciona en lo
que llamo archivos locales. Solo puedes cambiar las imágenes
que tienes en tu computadora. Si estás utilizando una imagen que
has encontrado en otro sitio en la web y estás enlazado con ella, no puedes
cambiar su tamaño permanentemente. Si estás usando un Mac, hay un software incorporado llamado
Preview que nos permite cambiar el tamaño. Y si estas usando Windows, hay un
programa incorporado llamado Paint. Cualquiera de los dos te da la opción
de
cambiar el tamaño de las imágenes. Sin embargo, como una nota
al margen, ninguna es la mejor opción si quieres entrar en
diferentes gráficos de imagen. Lo que la mayoría de nosotros
tiende a hacer es usar los atributos. Una de las cosas
de las que hablo y todos hablan es la importancia de
mantener el estilo y el contenido separados. Y trato de animar a la gente a no
poner ningún atributo de estilo en su código. Sin embargo, la etiqueta img
tiende a ser una excepción, ya que incluye tanto
anchura como altura. Vamos a seguir
y recorrer, y te mostraré una imagen del
sitio cuando hayamos terminado. La primera opción sería simplemente
usar el tamaño de imagen predeterminado. Tengo mi etiqueta img y tengo
los dos atributos requeridos. src, que es donde se encuentra
la imagen, y el texto alternativo. La siguiente opción sería
colocar el ancho en pixels, en este caso le he agregado el atributo
width y le he dado un valor en el código. Así se le llama cuando le has dado un
tamaño que quieres que siempre sea así. y lo configuré
en 500 pixels Puedes notar que sólo he establecido
la anchura y no puse la altura. Está bien. El navegador automáticamente calculará
cuánto debe ajustar la altura para que se mantenga proporcional
a la anchura. La siguiente opción es
usar el ancho y el alto. Tú haces esto si quieres asegurarte
de que tu imagen encaja dentro de una caja de
un tamaño exacto Esto es agradable
como tamaño, pero no siempre aparece como esperas que
aparezca, veremos eso en apenas un segundo. La última opción, que puede ser
tu mejor opción, es usar porcentajes. En este caso, si lo notas,
tengo width = 50%. Lo que esto significa es, toma la
imagen del tamaño que va a tener, y redúcela en un 50%. A medida que avancemos en la programación
y el CSS, entenderás que es el 50% de lo que debería ser, no significa
necesariamente el tamaño de la imagen original. Depende de si está dentro
de un contenedor. Aquí he tenido cada una de las opciones,
el valor por defecto, el ancho, el alto, y el porcentaje. Vamos a seguir y echar
un vistazo a cómo aparece. Se puede ver que estas son
las cuatro opciones que tengo mostrar mi imagen. En la parte superior, tengo el
tamaño de la imagen por defecto. Esta resultó ser tan grande
como era cuando la tomé. Un tamaño abajo, puedes ver que esta es la que
he codificado el ancho de la imagen. configuré el
ancho a 500 pixels. La casa todavía se ve perfectamente
bien, y todo es proporcional. La tercera opción es
la imagen sesgada. Esta es en la que codifiqué
tanto la altura como el ancho, no puse mucha atención en cómo
iban a actuar de forma proporcional. Al hacer esto se puede ver
que está un poco aplastada, no es la imagen
con mejor aspecto. Esta última es la que establecí
proporcionalmente, puedes ver que es aproximadamente la mitad
del tamaño de la ventana del navegador. Lo que quiero que veas ahora es lo que
sucede cuando cambio el tamaño de la ventana. Según vengo aquí, se puede ver que
las primeras tres imágenes permanecen exactamente del mismo tamaño,
pero la inferior crecerá o se reducirá. Y es lo mismo si la hago más
pequeña y vuelvo a cargar la página. Pensar en cosas diferentes en esta
línea es cómo deseas que la página se vea cuando la gente esté viéndola en una
pantalla grande, o en una pantalla de móvil. Es algo en lo
que debes pensar. Lo último que quiero señalar,
de lo que voy a hablar en un segundo, es que esta pequeña
imagen que desafortunadamente, es muy difícil de ver y no es una
buena manera para mí de quitarla. Pero quiero hablarte sobre la adición
de imágenes en la barra de título. Si quieres poner un favicono
en el título de tu página web, es un poco diferente de
usar una imagen normal. En su lugar, este código debe ir en la
sección head del código, no en el cuerpo. Lo que haces es incluir un enlace diciendo que
es un tipo de enlace de icono. Estamos usando
una imagen PNG. Y a continuación, pones el
enlace a la imagen en sí. Como en una nota al margen, no
puedes utilizar JPEGs o GIFs para logos. Debe ser una imagen de
icono especial o una .png. Finalmente, hablemos
del texto alternativo, el atributo que debes
agregar a todas tus imágenes. ¿Cuál es el propósito de esto,
y por qué lo necesitamos? Lo que hace es proporcionar una alternativa
textual al contenido no textual. Cada vez que tengas una
imagen, debes asegurarte que las personas que no puedan ver la
imagen puedan entender su contenido. Podría ser leído por
los lectores de pantalla. A veces se muestra en lugar de
las imágenes, si se rompe el archivo, todavía se ve una pequeña nota diciendo
lo que se supone que deben estar viendo. Por último, también proporciona significado
semántico para los motores de búsqueda. Si pones un buen texto
alternativo en tu página, va a ayudar a los motores de búsqueda a
darse cuenta de cuál es el contenido de tu página. ¿Cómo crear un buen
texto alternativo? Hay cuatro cosas que
debes buscar de inmediato. Debes ser extremadamente
preciso. Debes ser breve. No debemos
ser redundantes. Y no debemos incluir títulos
como imagen de o gráfico de. Lo primero, que
sea preciso. Bastante auto-explicativo. Solo pon cosas que definan específicamente
la imagen que estás viendo. Ser sucinto significa
que no sea largo. Se supone que debe dar una idea
rápida de lo que trata la imagen. Cuando hablamos de no ser
redundantes, lo que estamos diciendo es, no incluir texto alternativo que
ya esté en el contenido de la página. Si tienes la imagen, y en
un párrafo debajo de ella, la describes en detalle, no pongas el
mismo contenido en el texto alternativo. Y, por último, la de
no incluir imagen de, gráfico de, lo que vuelve
a que seas sucinto. De vez en cuando está bien
dejar el texto alternativo vacío. Si tienes imágenes que son sólo
decorativas, logotipos, cosas en esa línea, puedes seguir y poner
alt seguido de comillas. Pero es muy importante que
no te saltes el atributo alt. El problema con hacer eso,
es que no dejas que la gente sepa si piensas o no
en la accesibilidad. No saben si falta el texto alternativo
porque no es informativo ya que sencillamente
se te olvidó ponerlo. Vamos a revisar algunas de las cosas
que sabemos de las imágenes. Una, las extensiones de los
archivos son muy importantes. Necesitas estar seguro de que
coincida el formato del archivo. El nombre del archivo de
tu imagen es algo que tiene que ser corto y descriptivo,
para evitar los errores tipográficos. Y finalmente las rutas de
los archivos, o esa cosa larga que se pone en la fuente de donde
tienes las imágenes / fotos / extensión. Debes cerciorarte de
escribirlo correctamente. Si puedes hacer estas tres
cosas, eso te pone más fácil usar correctamente img. Y por ahora seguimos y
damos estilo como altura y ancho en el propio
código HTML. A pesar de que a menudo hablo de separar
el contenido del estilo, es una práctica muy común juntarlos
cuando usamos img.