Las imágenes en una página web resultan muy aclaratorias, divertidas y en realidad aportan una pausa refrescante entre tanta letra. En la batalla de mantener la atención de la audiencia, ¡el uso de imágenes resulta esencial para la victoria! Ejem, bueno, que con imágenes las páginas se verán mejor…
El inesperado regreso del Rinocepato ilustra nuestro punto a la perfección
Dependiendo de la seriedad (o por el contrario, la poca seriedad) de los contenidos de tu página web, no está de más que ya que tienes a tu disposición los elementos importantes, pues los sazones un poco con una imagen o dos.
Hay que entender algunos aspectos técnicos sobre las imágenes, pero nada que no podamos explicar.
Primero el tamaño y el peso. Una imagen tiene dimensiones en pantalla, estas dependen del número de pixeles que la compongan (cada pixel es un “puntito” en la pantalla) tanto en alto como en ancho. Suele convenir utilizarlas en tamaños adecuados, es decir, que dependiendo de para que las vayamos a usar, las pongamos en nuestras páginas web en el tamaño que corresponde. Esto se puede realizar de varias maneras, por un lado, hay programas de edición de fotos y gráficos que podemos utilizar para hacerlas más pequeñas, o bien, los programas que utilicemos para crear nuestras web pueden contar ya con un sistema que las recorte o haga más pequeñas según sea el caso. Para los efectos de lo que estamos haciendo, queremos imágenes que estén ya en el tamaño adecuado.
Rápido, sin hacer click ¿Cuánta gente va en este viaje?
En el caso del peso, una imagen, dependiendo del uso que vayamos a darle, podrá estar más o menos “comprimida” y por ello tendrá un menor o mayor peso, respectivamente. El peso se refiere a los bytes (KB son Kilobytes y MB son Megabytes) y pues el Internet transportará más rápidamente una imagen con menor peso. A veces el peso se corresponde con el número de colores de la imagen, otras con las dimensiones de la misma y otras más con el formato (ya te cuento de que va eso). Como regla general, si la imagen pasa de los 200KB puede tardarse bastante en bajarse por internet y mientras más imágenes incluyas en tus páginas, más se tardará en cargar.
Vamos, como ir en submarino… O en avión, clase turista.
Si la imagen la utilizarás como un fondo o parte de un diseño, puedes comprimirla (cada formato de imagen tiene sus propias convenciones de compresión, ya lo veremos más adelante). Si se trata de las fotos de algún evento que se incluirán en una nota, puedes poner una imagen más pequeña (normalmente llamada “thumnail”) que haga de vista previa enlazada a la imagen de tamaño real de tal manera que esta última se cargue sólo al hacer click en ella.
Por último, las imágenes pueden venir en una serie de formatos de archivo. Los que verás con más regularidad por el internet son:
Las imágenes pueden venir, principalmente, en tres tipos de archivo:
¿Serías capáz de distinguir la diferencia entre tres imágenes iguales, una para cada formato?
La primera es un JPG, la segunda un PNG y la tercera un GIF.
Parecen iguales, pero no lo son. La diferencia radica en lo antes expuesto.
Por lo general, es mejor elegir el formato de una imagen dependiendo del uso que le vayamos a dar: Si necesitas transparencias suaves, utiliza un PNG; si no, puedes utilizar indistintamente el formato JPG o el PNG, sólo ten en cuenta que los JPG tienen menor peso que los PNG pero los PNG tienen mayor claridad. Deja los GIF para animaciones, iconos con pocos colores y transparencias que no requieran suavizado.
Pero, ¿cómo se inserta una imagen en HTML? ¡Utilizando la etiqueta IMG!
<img title=”Nyan_Cat” src=”carpeta/imagen2.gif” alt=”” width=”100″ height=”100″ />
Para ser más precisos, técnicamente no insertamos una imagen, sino que creamos un contenedor que enlazamos a la imagen, esta se proyectará dentro del mismo. Si especificamos las dimensiones del contenedor, la imagen se ajustará a ellas, si no, el contenedor se ajustará a las dimensiones de la imagen.
¿Deben estar las imágenes en una carpeta? Pues siempre viene bien ser ordenado con los recursos, de esa manera sabremos más fácilmente donde tenemos todo.
Busca al gato de Schrödinger, edición extrema.
Por convención, se suelen guardar las imágenes del diseño de tu página en un área diferente a donde guardas las imágenes del contenido de la misma.
Pero veamos los atributos que tiene la etiqueta:
Será relativa cuando la imagen resida en tu mismo sitio web. Atendiendo a la escritura que utilizamos en el ejemplo, la imagen se encontraría dentro de una carpeta llamada “carpeta”. La misma dirección, en formato absoluto sería, por ejemplo, así: https://www.squidjam.com/carpeta/imagen2.gif
Esta segunda notación es la que permite cargar imágenes desde otros sitios en la Internet, por que explícitamente le dices al navegador que la imagen se encuentra en otro sitio.
Vamos, como la princesa en los juegos de Mario
Razón por la que ahora nos conviene entender lo más importante de una imagen… La licencia de uso.
Verás, pueda que no te parezca mucho tomar una imagen de alguien más y utilizarla en tu página web, pero lo cierto es que esa imagen pertenece a otra persona. Si no son tus dibujos o tus fotografías, pues a menos que cuentes con un permiso explícito para usar esa imagen pues no deberías hacerlo.
No vas a la casa de tu vecino, tomas sus cucharas y bebes sopa con ellas sin que se de cuenta ¿O SI?
¡No! Desde ya te digo, las imágenes que aparecen en Google no están allí más que para tu uso personal, sin fines comerciales o de lucro. Es decir, puedes verlas, admirarlas, coleccionarlas en tu disco duro y mostrárselas a tus amigos, pero no desplegarlas en tu página web.
No al menos que la imagen tenga una licencia específica que lo permita. Hay muchas imágenes en Internet que son compartidas precisamente para que las utilices en tus contenidos. Algunas son de pago, otras no, algunas te permiten su uso comercial y modificación, otras sólo una de esas, y otras más no te dejan siquiera utilizarlas en sitios con anuncios o que sirvan para vender productos o servicios.
No es lo mismo que la vecina venga y te pida prestadas unas piezas de vajilla por que tiene visitas, que el bar de la esquina entre en tu casa, las tome sin tu permiso, las utilice y luego las deje en tu puerta, sin lavar, con una nota que dice que las laves por que las va a volver a necesitar en unos minutos.
No está bien tampoco que utilices imágenes que estan en otros servidores, aún si la licencia lo permite, enlazándolas directamente desde dichos servidores, por que incrementas sus costos de mantenimiento y te expones a que reemplacen la imagen que pusistes por una que te acuse de “leeching” o “sanguijuelismo”, que es el nombre que tiene esta práctica. ¡No seamos sanguijuelas!
¡No asustes al osito!
Ahora bien, si el caso es que la imagen viene de un servicio de imágenes (como flickr) y tiene un código para que tú uses sus servicios… ¡Adelante! El código se encargará de presentar la imagen, enlazar al original y dar los créditos necesarios al creador de la misma.
Por lo general conviene más ilustrar tus contenidos con imágenes que sean de uso irrestricto, estén en el dominio público o mejor aún, que tú mismo hayas creado, y con el precio de una cámara actualmente y la diversidad de programas disponibles gratuitos en Internet para editar tus imágenes o crear gráficos, pues no da buena imagen usar las imágenes de otros.
Ahora, con ustedes, las tablas.
¡Oh! Aparentemente no están listas aún… ¡Hm!
…
¡Ah, sí! ¡Hola! Bueno, ¿Porqué no dejamos las tablas para la siguiente entrega? Estate atento, para la próxima estarán listas y podremos investigarlas con más detenimiento, para luego dedicarnos de lleno a entender las capas. ¡Hasta la próxima!
Aprende, Desarrollo, Featured, HTML, Tutorial
