Ejemplo teórica:
- Colocación de imagen en html: etiqueta
. especifica la URL de una imagen que se va a mostrar. <img>
- Optimización de imágen para web: gif, jpg, png y svg.
Para que la página web/ app no tenga un peso excesivo y se cargue en poco tiempo, es necesario reducir el peso de las imágenes, o sea, optimizarlas para su uso en la web.
A pesar del mejoramiento en el ancho de banda y las mejoras en los procesadores, aun sigue siendo recomendable que las páginas web/app tengan un peso reducido para evitar que tengan problemas o demoren en cargar.
Una de las dificultades mayores frente a la que se enfrentan los diseñadores web es en la utilización de imágenes. El empleo de imágenes, tanto para el diseño de la página como para que forme parte del contenido, es indispensable. Teniendo en cuenta esto, la única opción es optimizar las imágenes.
Para que el diseño tenga la vista que su creador ha planificado, es necesario que el largo y ancho de las imágenes no se modifique, por lo que la única opción con que se cuenta es con la reducción de la calidad.
La reducción de la calidad de una imagen, no necesariamente afectará su vista en la página web o app. Esto se debe a que generalmente las imágenes obtenidas de una cámara, un escáner u otro medio, tienen una resolución óptima para su impresión o revelado, que es muy superior al mínimo necesario para que se vea bien en el monitor de un ordenador.
¿Qué se modifica en una imagen para su optimización?
Las imágenes a ser utilizadas en el diseño de una página web o app, puede ser modificada en varios parámetros a los efectos de reducir su peso. El parámetro más empleado para modificar el peso de una imagen es la resolución, cuya medida es en ppp (pixeles por pulgada cuadrada).
Una cámara digital obtiene resoluciones de unas 300 ppp, y una impresión de buena calidad (aunque pueden obtenerse impresiones de mayor calidad) es de 200 ppp.
Estas resoluciones no son necesarias en una imagen que va a ser mostrada en una página web o app, ya que una resolución de 72 ppp es lo que se recomienda para su uso en este medio, debido a que la gran mayoría de los monitores no tienen resoluciones superiores.
Otro parámetro modificable es el color. Una imagen de alta calidad (denominado color verdadero, ya que se acerca a la capacidad del ojo humano en la detección de colores) tiene una profundidad de color de 32 bits por pixel, de los cuales 24 bits son para el color (casi 17.000.000 de colores) y 8 bits son destinados a las transparencias.
Reduciendo la escala de profundidad del color a 16 bits (color de alta densidad), se obtiene también una reducción del peso de la imagen. Para imágenes que emplean pocos colores, pueden utilizarse escalas menores, como 256 colores o menos.
El formato JPG es apropiado para guardar imágenes fotográficas o con degradados. Este formato admite millones de colores (24 bits) y mantiene el modo de color en RGB de la imagen original. Al guardar en JPG se debe elegir una calidad de compresión. Conviene comprimir lo más posible, mientras la calidad de la imagen sea aceptable. En photoshop tenemos la opción de exportar para web.
El formato PNG es la más usada para iconos o marcas. Su mayor ventaja: la transparencia. La transparencia de PNG logra una calidad de imagen mucho mayor y simplificando el maquetado, permitiendo independizar las imágenes de sus fondos. El PNG tiene dos opciones: PNG8 (con paleta de color reducida hasta 256 colores) y el PNG24 ideal para transparencias.
El formato GIF va más allá, ya que cada imagen guarda su propia escala de colores, lo que reduce notoriamente la cantidad de información (y por consiguiente el peso) que contiene un archivo de imagen. Comprime mejor las imágenes con plenos de color originados en dibujos vectoriales. Este formato reduce la paleta a 256 colores como máximo. Al guardar una imagen como gif, es importante decidir la cantidad de colores porque de esto depende el peso del archivo: cuanto menos colores, más liviano. Las imágenes gif además pueden ser transparentes y animadas.
Al momento de exportar las imágenes transparentes necesitan un tratamiento especial: los bordes de la imagen deben ser suavizados hacia el color sobre el que irá colocado en el HTML, de lo contrario la imagen resultará con bordes duros (serruchados). Para ello se utiliza la opción mate que permite seleccionar el color similar al fondo.
El formato SVG (Scalable Vector Graphics) es un formato vectorial y escalable para web con la ventaja que eso significa para hacer un sitio adaptable. Es un formato abierto, estándar y basado en XML.
El archivo SVG se puede guardar directamente desde Illustrator y el resultado, es un archivo que se puede ver en el navegador, pero que también se puede abrir en programas de editor de código. Esto le da infinitas posibilidades de uso para web, especialmente combinado con el lenguaje javascript.
¿Cómo optimizar una imagen?
Hay varias formas de optimizar una imagen para su empleo en páginas web o app.
Algunos programas de edición de imágenes tienen plug-ins para la optimización y otros tienen esas funcionalidades incorporadas.
– Adobe Photoshop:
Presenta herramientas que permiten definir algunos parámetros de calidad para optimizar las imágenes, tanto reduciendo su calidad para su utilización en la web, como para aumentarla para su uso en impresiones. En Photoshop, una de las opciones que tiene es la herramienta para guardar imágenes optimizadas para web (archivo >exportar> guardar para web).
– GIMP
No posee funciones que permitan definir la calidad de las imágenes tratadas, pero en el guardado permite la modificación de algunos de ellos (según el formato) para reducir su tamaño.
Otra opción es la utilización de herramientas específicas, tanto programas como herramientas on-line, servicios en línea que permiten emplear algunos trucos con buenos resultados.
También en la Teórica vimos:
- Unidades de medida: rem y porcentaje:
- Tamaño dispositivo: https://getbootstrap.com/docs/4.5/layout/overview/
Unidades de medida en CSS
Las medidas en CSS se emplean para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de fuente del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida.
CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.
Nos referimos a píxeles (px) como una de las unidades absolutas, porque siempre tienen el mismo tamaño, independientemente de cualquier otra medida. No es una unidad escalable: no guarda relación con la medida de fuente de su contenedor o del contenedor root.
Por otro lado disponemos de unidades relativas, que lo son respecto al tamaño de fuente, font-size o a la ventana actual (viewport). Entre las que utilizaremos las unidades de medida rem y porcentaje (%)
Porcentajes
La unidad de medida porcentual es la que se usa por defecto en los elementos HTML en donde de manera predeterminada cada elemento de bloque usa un ancho del 100%, es por eso que cuando achicamos la ventana del navegador con una página que no tenga estilos, la página se adapta, ya que siempre usará el ancho total visible.
Pero nosotros podemos utilizar los porcentajes de una manera más avanzada tratando de generar layouts mas complejos (esquema de distribución de los elementos dentro un diseño).
Supongamos, por ejemplo, que hay un div que contiene todos los elementos de la página y, según el diseño, este elemento debiera medir 1200 pixeles. En lugar de usar esa medida en pixeles, es conveniente usar una medida en porcentajes, en donde el máximo ancho del elemento sean esos 1200px:
- CSS
.container {
margin: 0 auto;
width: 90%;
max-width: 1200px;
}
Con estas 3 propiedades de CSS conseguimos que a) El elemento se centre en la página,b) tenga un ancho del 90% de la ventana y c) su ancho nunca sea superior a 1200 pixeles.
El uso de los porcentajes también lo podemos llevar a elementos interiores del layout, en donde, por ejemplo, podemos asignar a la columna principal de contenido y a la barra lateral unas medidas de ancho del 70% y el 30% respectivamente, haciendo que sean completamente adaptables al tamaño de su elemento contenedor.
Rem
La unidad rem viene de Root EM, que es igual al font-size del elemento root, que en HTML sería el elemento . Es una medida relativa no a su elemento padre, sino al contenedor principal html.
Esto significa que si el elemento HTML tiene un tamaño de fuente de 16px (como es por defecto), entonces 1rem, sería igual a 16px, y si queremos aplicar un tamaño basado en rem a cualquier elemento de la página, no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que 1 rem siempre será igual a 16 pixeles a no ser que se modifique el elemento raíz.
Usar rem nos permite cierta estructura para poder definir ciertas partes del layout, pero al mismo tiempo nos entrega cierta escalabilidad para respetar las configuraciones de cada usuario.
VIEWPORT
El viewport del navegador es el área de la ventana en donde el contenido web está visible.
VH Y VW
Las medidas vh y vw son medidas relativas de acuerdo al viewport. Vh hace referencia a la centésima parte de la altura del viewport y vw a la centésima parte del ancho del viewport.