Clicky

Herramientas de optimización de imagen y sugerencias para webmasters

Categoría: Internet (Tutoriales y trucos)
Visitas: 2003
optimización de imagen

Reduce realmente los tiempos de carga de tu página

La optimización adecuada imágenes es crucial para un sitio web rápido. Cada vez que analizas tu sitio a traves de una herramienta como PageSpeed Insights, siempre encontrarás sugerencias útiles para mejorar las imágenes.

Normalmente, esto implica compresión donde la imagen dice que tiene el mismo tamaño y calidad general, pero se comprimen algunas partes para convertirla en un archivo más pequeño.

Puedes hacer esto de muchas maneras diferentes y con muchas herramientas diferentes. Así que profundicemos en esta área de optimización para ver cómo puedes renovar las imágenes para reducir los tiempos de carga.

Exportar a los formatos correctos

Ya sea que trabajes con Sketch, Photoshop o Illustrator, siempre puedes exportar imágenes por diferentes tipos de archivos.

Los GIF animados generalmente necesitan permanecer como GIF. Pero hay otros tres tipos de archivos que debes considerar y saber cómo usarlos:

•  PNG: ideal para la transparencia y gráficos/ilustraciones sin problemas
•  JPEG: lo mejor para fotos complejas e imágenes más grandes
•  SVGs - gráficos vectoriales comprimidos para escalabilidad

No muchos diseñadores se dan cuenta de que los SVG pueden ser más pequeños que los PNG, según el proceso de exportación. Todo se reduce al programa que estás usando y al tipo de gráfico con el que estás trabajando.

Pero siempre mira las características de exportación e intenta encontrar un nivel que reduzca el tamaño de tu imagen sin perder calidad.

Por ejemplo, en Photoshop normalmente exportare archivos JPEG con una calidad del 65-70, y luego los ejecutare a traves de una herramienta de compresión de imágenes para reducir aún más el tamaño del archivo.

Entregar imágenes desde un CDN

No siempre se tiene que optimizar la imagen solo para aumentar la velocidad de la página. Otra opción es configurar un CDN para tus archivos estáticos.

Este acrónimo "CDN" significa Content Delivery Network, una serie de servidores ubicados en todo el mundo que pueden entregar los archivos un poco más rápido que tu servidor web principal.

Por lo general, esto reducirá los tiempos de carga de la página, pero depende drásticamente de cuántos servidores "nodos" forman parte de la CDN que elijas. Recientemente encontre esta publicación de comparación que revisa con precisión algunos de los mejores servicios de CDN disponibles.

Los sitios web más pequeños con un presupuesto más económico deberían buscar en BunnyCDN o BelugaCDN, ambas excelentes opciones con al menos un servidor en cada región importante.

Puede salirte con la tuya pagando literalmente $ 2- $ 4 por mes, incluso en un sitio con bastante tráfico. La clave es encontrar un CDN que puedas pagar y verificar los tiempos de carga para asegurarte de que realmente marque la diferencia.

Reducción de tamaños de imagen

La calidad de una imagen afecta al tamaño del archivo. Pero tambien puedes cambiar el tamaño total de tu imagen para mejorar el rendimiento.

Esto es especialmente cierto para los sitios que admiten imágenes @2x para optimizar en pantallas Retina. Recomiendo cargar la imagen @1x cuando la página se carga primero, luego la carga lenta en la alternativa @2x.

O incluso podrías hacer una comprobación de dispositivo para ver si el usuario está ejecutando una pantalla Retina e intercambiar imágenes de esa manera.

Tambien debes considerar las miniaturas en tu página, ya que pueden agotar el ancho de banda si son demasiado grandes. Lo mismo es cierto para sitios responsive que podrían funcionar con imágenes un poco más pequeñas.

Pero no hay reglas oficiales para los tamaños de imagen, así que juegua y mira que te queda mejor.

Mejores herramientas de optimización de imágenes

Si está buscando optimizar el tamaño de tus archivos, entonces querrás algunas herramientas de compresión de imágenes. La mayoría de estas son gratuitas y son, de lejos, mis elecciones favoritas para todos los tipos de imágenes.

Echa un vistazo a esta lista y si ves algo que te gusta, asegúrate de marcarlo para consultarlo en el futuro.

Compressor.io

compressor io

Tropece con Compressor.io hace un par de años y ha sido mi elemento básico para la compresión de imágenes.

Esta herramienta gratuita creada por Stephane Lyver permite a cualquiera subir imágenes desde su computadora y comprimirlas automáticamente a traves de la web. Todos los servicios se ejecutan en servidores remotos, por lo que no se está utilizando ninguna de las capacidades de procesamiento de tu computadora para manejar la compresión de imágenes.

Lo mejor de todo es que admite los cuatro archivos JPG/PNG/GIF/SVG para que puedas optimizar prácticamente todo para la web.

Tiny PNG

Tiny PNG

El acertadamente llamado TinyPNG permite cargar archivos PNG o JPEG directamente desde tu computadora y guardar las imágenes comprimidas resultantes.

Es capaz de un total de 20 imágenes a la vez, por lo que si estás tratando de optimizar cientos de fotos, puede tomar un tiempo. Es por eso que el equipo lanzó un plugin TinyPNG Photoshop por una tarifa de $ 50.

El complemento funciona tanto para Mac como para Windows, por lo que es una buena opción si prefieres comprimir tus fotos en Photoshop. Aunque no se puede superar el precio gratis del sitio web de TinyPNG, eso es un poco más lucrativo.

Nota: si estás ejecutando WordPress, tambien puedes probar el complemento gratuito TinyPNG.

Optimizilla

optimizilla

Aquí hay otra herramienta de optimización que es un poco más pequeña pero funciona de la misma manera.

Optimizilla mantiene el mismo límite de carga de 20 imágenes aunque parece cargar un poco más rápido que TinyPNG.

Tambien parece funcionar con la misma compresión con perdida ya que solo funciona con archivos PNG y JPEG. Pero es una buena alternativa a TinyPNG si deseas un recurso con menos tráfico.

EZGIF

EZGIF

La compresión de un gran GIF animado puede ser una de las tareas más molestas. EZGIF simplifica el proceso independientemente de tu destreza tecnica.

Simplemente carga el GIF animado y selecciona cuánto deseas comprimir la imagen (perderá calidad cuanto más se comprima).

Desde la página de edición tambien puedes optar por cambiar el tamaño de la imagen, recortar ciertas partes para hacerla más pequeña e incluso realizar otras ediciones de imágenes, como rotaciones. Este es realmente un gran editor de GIF en línea y sin duda es el mejor que he visto en mi vida.

Sin mencionar que admite un enorme límite de 30 MB en las cargas para que puedas trabajar para optimizar algunas imágenes bastante grandes.

WP SmushIt

WP SmushIt

Mencione anteriormente el plugin TinyPNG WordPress, pero es insignificante en comparación con WP SmushIt.

Este complemento gratuito funciona para comprimir todos los archivos de imagen cargados en WordPress y nos mostrará exactamente cuánto espacio está guardando con el complemento.

Eliminará automáticamente metadatos voluminosos y limpiará imágenes en servidores externos para que tu sitio se cargue rápido o incluso más rápido de lo normal.

WP SmushIt juega amigable con docenas de complementos de imagen de WordPress como galerías y carteras. Tendrás dificultades para encontrar otro complemento como este que ofrezca características y beneficios similares en la compresión de imágenes.

Riot

Riot

Una herramienta de escritorio que yo utilizo a diario es Riot. Con esta pequeña aplicación puedes optimizar las imágenes tanto en tamaño como en calidad con unas prestaciones muy significativas.

Además puedes elegir entre una optimización standard o progresiva. Puedes descargar Riot aquí.

Avanzando

No es necesario que prestes demasiada atención a la compresión de imágenes porque es algo con lo que siempre puedes trabajar a lo largo del tiempo.

Pero es una buena idea darse cuenta de que las imágenes ralentizarán tu página. Son activos muy grandes y parte de la ejecución de un sitio web. Lo mejor que puedes hacer es optimizarlas para que disminuyan el tiempo de carga total.

Espero que puedas utilizar estas herramientas en futuros proyectos y reducir realmente los tiempos de carga de tu página a milisegundos.