Xitrus está alojado en:
Las imágenes, algo tan simple como las imágenes, pueden hacer que una web sea visualmente muy atractiva o que sea muy lenta, por lo que tenemos que tener presente su tamaño y como usarlas.
Para tener una web optimizada tenemos que usar de forma adecuada las imágenes y ver cuando debemos de usar según qué tipo o formato y también su tamaño, y sin olvidar al dispositivo al que esté dirigido (como tablets o smartphones).
Las imágenes de nuestra web o blog, como primera premisa, deben de estar siempre en el tamaño que se van a usar y no tener imágenes enormes que después se verán pequeñas, sino queremos aumentar el peso de la web.
Otro factor a tener en cuenta es el del dispositivo para el que está destinada, no podemos usar grandes imágenes con gran peso si va a ser un Smartphone el que finalmente verá nuestra web.
En una web rara vez se necesitan imágenes en su resolución original (pongamos que es una foto de nuestro móvil con 5MP y ocupa 2mb), por lo que nunca debemos de permitir añadir imágenes de ese tamaño, lo primero es disminuir sus dimensiones.
Una vez tengamos una imagen de las dimensiones adecuadas debemos de adaptar el tamaño de archivo, mediante el uso de distintos formatos de imagen y la compresión adecuada.
En la web nos encontramos principalmente para mostrar imágenes estáticas el formato JPG y PNG (que tiene el formato de 8bits y el de 24bits), los tres tienen propósitos distintos y nos pueden hacer ahorrar mucho peso de nuestra web si lo usamos correctamente y aprovechamos sus ventajas.
Tenemos que tener también en cuenta la capacidad de compresión de estos formatos, ya que algunos de ellos nos pueden reducir el peso de una imagen hasta 10 veces sin perder demasiada calidad.
La mayoría de los grandes editores fotográficos permiten establecer características más avanzadas de compresión, como es Photoshop o GIMP, por lo que no nos llevará mucho adaptarlas a nuestras necesidades.
Este formato es el ideal para mostrar fotografías o texturas, ya que es el que permite comprimir mejor este tipo de imágenes.
La compresión en este formato deteriora ligeramente la imagen (según la cantidad de compresión) y genera unas marcas borrosas llamadas artefactos de compresión que aparecen cuando queremos reducir mucho una imagen.
La cantidad de compresión de una imagen JPG admite 100 niveles, siendo el 100 el más alto y de mayor tamaño, pero con una compresión de 40 podemos reducir muy significativamente el tamaño de una imagen y seguirá teniendo una calidad aceptable.
El formato PNG tiene la peculiaridad de admitir transparencias, siendo la versión de 24bits la más indicada para incluir en una web imágenes transparentes si no queremos perder calidad.
Por otro lado tenemos la versión de 8bits que admite un cierto número de colores (hasta 255), lo que la convierte en la opción perfecta para imágenes en blanco y negro o con pocos colores, como por ejemplo imágenes sin texturas ni degradados, como logotipos planos.
Esta imagen y la siguiente tienen aproximadamente 8kb de tamaño, y como vemos cumple con el requisito perfecto para que ocupe poco en formato PNG (8bits), y por el contrario se necesita comprimir muchísimo para reducir su tamaño en JPG.
Si la imagen tuviese muchos colores distintos, texturas y degradados al usar el formato PNG de 8bits se perderían muchísimos colores, esta es la gran diferencia.
Cuando usamos imágenes en dispositivos móviles tenemos que tener especial cuidado, ya que tienen una conexión más lenta y no tienen la misma capacidad que un PC para renderizar grandes imágenes (y mucho menos ampliar o reducir imágenes grandes). También si, normalmente se suelen adaptar las imágenes haciéndolas progresivamente más pequeñas, por lo que no es necesario que tengan gran tamaño (aquí podéis saber más sobre adaptar imágenes en un Responsive Design).
Cuando hacemos una web para móviles tenemos que ser conscientes que es mejor usar un menor número de fotografías innecesarias (como imágenes de fondo que no se verán o elementos que quedan ocultos). Para evitar esto podemos usar @media queries, que nos permiten mostrar o no ciertas imágenes (como las de fondo) según el tamaño del dispositivo.
Otra opción es tener imágenes distintas con distinto tamaño y mediante JavaScript o algún plug-in servir una u otra según el tamaño del dispositivo. Un par de opciones para este método son: RWD Images y Adaptative Images.
Estos son varios consejos para optimizar correctamente las imágenes de nuestra web según la situación, pero debemos de tener como premisa que siempre tienen que tener las dimensiones adecuadas (nunca más de la cuenta) y el tamaño más pequeño en el que no perdamos calidad.
Bueno, y en el tema del Responsive Design es todo un mundo, pero es muy importante tener presente que un móvil no tiene la velocidad de un PC, por lo que hay que adecuar las imágenes de alguna forma, solo hay que encontrar la adecuadas.
Xitrus está alojado en:
