Una página en un sitio web no solo es texto, también son imágenes y las imágenes son muy importantes, pero son las que más espacio ocupan en nuestro plan de hosting. 

Es imposible no tener imágenes.

¿Te imaginas un site sin imágenes?

Así que si no nos ocupamos de optimizar las imágenes para tu sitio web, será una mala experiencia para el usuario porque además hará más lenta la carga de la página.

Aquí tienes 4 formas para optimizar las imágenes en tu sitio web.

1. Reduce el tamaño del archivo antes de cargarlo

Un tamaño de archivo de imagen se ve afectado principalmente por sus dimensiones, calidad y formato de archivo. Modificándolos, podrás reducir significativamente el tamaño de tus imágenes.

Dimensiones

Lo primero que debe hacer es asegurarse de que la imagen que vas a utilizar se ajuste al tamaño de la página.

No deseas cargar una imagen más pequeña de la que necesita porque se pixelará cuando se amplíe. Y no deseas cargar una imagen mucho más grande porque podrías estar ahorrando en peso si reduces sus dimensiones.

Las fotos profesionales generalmente tienen un ancho de alrededor de 5000 px. En términos de la web, eso es enorme.

El tamaño de pantalla más grande comúnmente utilizado en este momento es de 1920 píxeles de ancho, mientras que 1366 x 768 es el más común.

Si planeas usar una imagen de ancho completo,  algo entre 1400 y 1600 px de ancho será un buen equilibrio entre mantenerlo grande y hacerlo más ligero al mismo tiempo.

Solo reduciendo las dimensiones de tu imagen, ya reducirá su peso.

Calidad

Después de ajustar las dimensiones de la imagen, debes reducir su calidad para que sea aún más clara.

Antes de que te asustes por eso, reducir su calidad no se trata de hacer que se vea fea y borrosa. No. Se trata de reducir la cantidad de datos que usamos para presentarla en el sitio web.

En las principales aplicaciones de diseño o edición de fotos, la calidad de una imagen se puede reducir de 100% a 0%. La cantidad que realmente reducirá dependerá de:

• La imagen en sí misma: si es una imagen con muchos detalles y colores o si tiene menos información gráfica. Al tiempo que reduce el valor de la calidad, una imagen con muchos detalles se verá peor a simple vista que una con menos detalles.
• El objetivo de la imagen: si vas a utilizarlo en el sitio web de un fotógrafo para promocionar las imágenes de la boda, puedes sacrificar el tamaño pero obtendrás una imagen de mayor calidad. O si vas a utilizar la imagen en una sección grande, la calidad puede ser más importante que el caso en el que usas la imagen en un tamaño más pequeño.

Usualmente uso un grado de calidad de alrededor del 40% al 50%.

Formato de archivo

Los formatos más comunes para imágenes en la web son JPEG (o JPG), PNG y GIF.

En la mayoría de los casos, JPEG es el formato que da como resultado una imagen más clara. Comprime la imagen y permite elegir un grado de calidad, como expliqué anteriormente.

PNG se usa principalmente cuando necesitas que la imagen tenga un fondo transparente, lo que JPEG no permite. Como cuando se utiliza un logotipo, una ilustración, etc. Crea imágenes de mayor calidad (porque no comprime las imágenes como JPEG), sino también archivos más pesados. Por lo tanto, se usa principalmente en cantidades más pequeñas y para imágenes más pequeñas.

Por último, se recomienda GIF para imágenes animadas.

En conclusión, usar JPEG será la mejor opción en la mayoría de los casos. Y use PNG cuando necesite que la imagen tenga un fondo transparente.

Herramientas para hacer todo esto

Ahora que cubrimos los 3 factores involucrados, he aquí cómo lograrlo. Básicamente hay 2 formas de gestionar dimensiones, calidad y formato de archivo:

Reduceimages

es una herramienta gratuita quepermite modificar las dimensiones, la calidad y el formato de archivo de cualquier imagen que se cargue.

Es realmente fácil de usar. Simplemente carga la imagen original y selecciona tus preferencias.

Eso es. Una vez que la imagen optimizada está lista, puedes descargarla. E incluso puedse hacer nuevas versiones de la misma imagen sin cargarla nuevamente.

Tiny.png.com.

La cargas, y reduce el tamaño sin pérdida de calidad de imagen perceptible.

2. Usa un optimizador de imagen como ShortPixel o Imagify

Además de adaptar manualmente el tamaño de tus imágenes, puedea usar una herramienta optimizadora para hacerlas aún más ligeras.

ShortPixel e Imagify  son servicios en línea que comprimen y optimizan las imágenes en tu sitio. Reducen aún más el tamaño de las imágenes mientras mantienen su calidad tanto como sea posible.

¿Cómo trabajan? Básicamente, envían las imágenes originales a la nube donde están comprimidas. Luego descargan las imágenes optimizadas que reemplazan a las originales en tu sitio web.

También almacenan las fotos originales, por lo que puede restaurar sus medios en sus versiones originales
cuando lo necesites.

Ambos tienen complementos específicos para WordPress, lo cual es genial. Y ambos ofrecen diferentes planes de precios, incluido uno gratuito.

Este es el complemento para ShortPixel:  wordpress.org/plugins/shortpixel-image-optimiser/
Y este es el complemento de Imagify:  wordpress.org/plugins/imagify/

Al utilizar la herramienta optimizadora, podrás elegir entre diferentes niveles de optimización según las necesidades de tu sitio. Desde una compresión dura que hará que las imágenes sean mucho más ligeras y con menos calidad (lo que en la mayoría de los casos no es percibido por el ojo humano) hasta niveles de compresión más suaves que mantendrán la calidad de las imágenes un poco más.

Si eres fotógrafo, puede elegir niveles más bajos de compresión, pero si estás trabajando en un sitio web comercial habitual o una tienda en línea donde la prioridad es el rendimiento, una compresión mayor será la mejor opción.

3. Aloja tus imágenes en un CDN

CDN significa Content Delivery Network. Alojar tus imágenes en un CDN significa configurar un CDN para que las atienda en lugar de tener tu propio servidor para hacerlo.

CDN son redes ubicadas en todo el mundo con potentes servidores web que se encargan de cargar los archivos de tu sitio al visitante que utiliza el servidor más cercano a él, geográficamente hablando.

Por ejemplo, si un visitante de América del Sur llega a tu sitio, el CDN utilizará un servidor ubicado más cerca del visitante, en lugar de usar uno en Europa. De esta manera, los datos de tu sitio web recorren distancias más cortas, lo que afecta la velocidad de carga.

Hay varios proveedores de CDN. Por lo general, ofrecen diferentes planes facturados mensualmente o por uso de datos.

StackPath (anteriormente MaxCDN) es uno de los servicios más populares.

¿Cuál es tu forma favorita?