Clase 7 | OPTIMIZAR IMÁGENES | FUENTES | HTML +CSS

En la teórica vimos:  

 

El atributo href especifica la URL  relativa/absoluta de la página a la que va el vínculo. Si el atributo href no está presente, la etiqueta <a> no es un hipervínculo.

 

<a href="index.html"> Inicio</a>

  • Colocación de imagen en html:
    etiqueta <img src=” “>.  especifica la URL de una imagen que se va a mostrar.
<img src="img/logo.png>" alt="Cat Ocampo">

 

  • Optimización de imágen para web: gif, jpg, png.

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 la optimización de 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.

 

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 > 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 online, servicios en línea que permiten emplear algunos trucos con buenos resultados.

 

También en la Teórica vimos: