Una guía para optimizar imágenes para dispositivos móviles

( Este es un artículo patrocinado). Usted sabe lo importante que es crear sitios web que se carguen rápidamente. Todo lo que se necesita es que una página se cargue un segundo más para que comience a perder visitantes y ventas. Además, ahora que Google ha hecho que la indexación móvil primero sea la predeterminada, realmente no puede permitirse el lujo de dejar que ninguna optimización de rendimiento se quede en el camino debido a lo difícil que puede ser hacer que su sitio móvil sea tan rápido como su computadora de escritorio.

Google tiene en cuenta muchos factores al clasificar un sitio web y los visitantes tienen en cuenta quizás un puñado de factores al decidir explorar un sitio. En la intersección de los dos está la velocidad del sitio web .

No debería sorprender que las imágenes causen muchos de los problemas que tienen los sitios web con la velocidad. Y si bien siempre puede simplemente recortar la grasa y crear sitios con un diseño más mínimo y centrados en el contenido, ¿por qué comprometerse?

Las imágenes son una fuerza poderosa en la web.

Las imágenes bien elegidas no solo pueden mejorar la estética de un sitio, sino que también facilitan que sus visitantes consuman contenido. Por supuesto, también existen los beneficios de SEO de las imágenes.

Entonces, hoy, concentrémonos en cómo puede seguir diseñando con tantas imágenes como desee sin ralentizar su sitio web. Esto requerirá que actualice su estrategia de optimización de imágenes y adopte una herramienta llamada ImageKit, pero no debería requerir mucho trabajo de su parte implementar este nuevo sistema.

La necesidad de una estrategia de optimización de imágenes para dispositivos móviles

Según el archivo HTTP:

• El tamaño medio de un sitio web de escritorio en 2019 es de 1939,5 KB .
• El tamaño medio de un sitio web móvil en 2019 es de 1745,0 KB .

Si no controlamos este crecimiento, será imposible satisfacer las demandas de los consumidores y de Google cuando se trata de proporcionar sitios web rápidos. Eso o vamos a tener que ser realmente buenos en la optimización de la velocidad.

Hablando de velocidad, veamos qué tiene que decir HTTP Archive sobre el peso de la imagen.

Tal como está hoy:

• El tamaño medio de las imágenes en el escritorio es de 980,3 KB del total de 1939,5 KB.
• El tamaño medio de las imágenes en dispositivos móviles es de 891,7 KB del total de 1745,0 KB.

En pocas palabras: las imágenes agregan mucho peso a los sitios web y consumen mucho ancho de banda. Y aunque estos datos muestran que el tamaño medio de las imágenes en dispositivos móviles es menor que en sus contrapartes de escritorio, la proporción de imágenes por sitio web es ligeramente mayor.

Dicho esto, si tiene la estrategia de optimización de imagen adecuada, esto puede remediarse fácilmente.

Esto es lo que esta estrategia debería implicar:

1. Ajusta el tamaño de tus imágenes correctamente

Hay muchas tareas tediosas que tendría que manejar sin las automatizaciones adecuadas. Como cambiar el tamaño de tus imágenes.

Pero tienes que hacerlo, ¿verdad?

Supongamos que usa Unsplash para obtener una cantidad de imágenes para un sitio web en el que está trabajando.

A diferencia de los repositorios de acciones premium en los que puede elegir el tamaño o el formato de archivo en el que descarga el archivo, aquí no tiene otra opción.

Entonces, descargas la imagen y cualquier otra que necesites. Luego tiene la opción de usar la imagen tal cual o cambiar su tamaño manualmente. Después de mirar el tamaño del archivo y las dimensiones de la imagen, te das cuenta de que sería una buena idea cambiar el tamaño.

Esta imagen en particular se exportó como un archivo de 3,6 MB y una imagen de 5591 × 3145 px. Eso es demasiado grande para cualquier sitio web.

No hay razón para cargar imágenes de más de 1 MB, y eso es incluso forzarlo. En cuanto a las dimensiones? Bueno, eso depende del ancho de tu sitio, pero creo que entre 1200 y 2000 px debería ser tu máximo.

Vas a tener que pasar por este mismo proceso, ya sea que las imágenes provengan de un sitio de archivo o de la DSLR de alguien. El punto es que ninguna imagen de origen tendrá el tamaño "correcto" para su sitio web, lo que significa que el cambio de tamaño debe realizarse en algún momento.

Además, los sitios web receptivos muestran imágenes en diferentes tamaños según el dispositivo o el navegador en el que se visualizan. Y luego están los diferentes casos de uso, como imagen de tamaño completo frente a miniatura o foto de producto de tamaño completo frente a imagen destacada.

Por lo tanto, hay más cambios de tamaño que se deben hacer incluso después de haber pasado por la molestia de cambiar el tamaño manualmente.

Esto es lo que no debes hacer:

• Cambie el tamaño de las imágenes una por una por su cuenta. Es lento e ineficiente.
• Confíe en el cambio de tamaño del navegador para mostrar sus imágenes de manera receptiva, ya que puede causar problemas.

En su lugar, puede integrar su servidor de imágenes existente (en su servidor web) o un servicio de almacenamiento externo (como S3) con ImageKit. O puede usar la biblioteca multimedia de ImageKit para almacenar sus archivos.

Como puede ver, ImageKit ha aceptado la carga de esta foto de Unsplash en sus dimensiones y tamaños originales. Lo mismo ocurre con el origen de sus archivos.

Sin embargo, una vez que integre sus imágenes o el almacenamiento de imágenes con ImageKit, la herramienta tomará el control del tamaño de su imagen. Puedes ver cómo se hace aquí:

Déjame explicarte brevemente lo que estás viendo arriba:

• La preferencia de origen de la imagen le dice a ImageKit desde dónde deben optimizarse las imágenes. En este caso, es la biblioteca multimedia de ImageKit y se publicarán en mi sitio web.
• La URL de la imagen antigua es un recordatorio de dónde vivían nuestras imágenes en el servidor.
• Las URL de nueva imagen explican dónde se optimizarán sus imágenes a través de ImageKit.

La fórmula es bastante simple. Toma la URL original de su imagen y la transforma con la nueva URL de ImageKit.

La URL de ImageKit por sí sola reducirá instantáneamente el tamaño de sus archivos de imagen. Sin embargo, si desea cambiar el tamaño de las dimensiones de su imagen mientras lo hace, puede usar los parámetros de transformación para hacerlo.

Por ejemplo, esta es la foto de Unsplash vista desde la biblioteca de medios de mi sitio web. Vive en mis propios servidores, por lo que la dirección muestra mi propia URL:

Para ver cómo se ve una vez que ImageKit lo ha transformado, cambio mi nombre de dominio con el punto final proporcionado por ImageKit. Luego agrego mis parámetros de cambio de tamaño de imagen (también le permiten hacer más que solo cambiar el tamaño) y vuelvo a adjuntar el resto de la URL que apunta al almacenamiento de mi imagen.

Esto es lo que sucede cuando uso ImageKit para cambiar automáticamente el tamaño de mi imagen a 1000 × 560 píxeles:

Para crear esta imagen redimensionada, transformé la URL de ImageKit en lo siguiente:

https://imagekit.io/vq1l4ywcv/ tr:w-1000,h-560/…

Son los parámetros ancho (w-) y alto (h-) los que redujeron las dimensiones del archivo.

Ahora, como puede ver, esto no es tan perfecto en píxeles como la imagen original, pero eso se debe a que tengo un poco de compresión aplicada al archivo (80%). Cubriré cómo funciona eso a continuación.

Mientras tanto, concentrémonos en lo bien que aún se ve la imagen, así como en las ganancias que estamos a punto de obtener en velocidad.

Anteriormente, este era un archivo de 3,6 MB para la imagen de 5591 × 3145 px. Ahora, es un archivo de 128 KB para la imagen de 1000 × 560 px.

Para endulzar aún más el trato, ImageKit facilita el cambio de tamaño de sus imágenes de esta manera mediante la transformación de imágenes basada en URL. Esencialmente, funciona así:

• Guarda una imagen maestra en la biblioteca de medios de ImageKit o en su servidor preferido.
• ImageKit utiliza automáticamente múltiples técnicas para reducir significativamente el tamaño de la imagen.
• A continuación, puede utilizar los parámetros de recorte y cambio de tamaño de ImageKit para modificar cada imagen para adaptarse a diferentes resoluciones y tamaños de dispositivos.

Cuando 91mobiles aprovechó esta forma de optimización de imagen, ahorró a su sitio web 3,5 TB cada mes de ancho de banda. Y no tuvieron que hacer nada más que integrarse con la plataforma. No hubo necesidad de mover sus imágenes a ImageKit u otro servicio de almacenamiento de terceros. Todo tuvo lugar dentro de su infraestructura heredada.

2. Utilice formatos de imagen de carga más rápida

No es solo el tamaño de sus imágenes lo que agota el espacio de almacenamiento y el ancho de banda. Los tipos de archivo que utiliza también tienen un impacto.

Los PNG , en general, se utilizan para cosas como logotipos, imágenes que contienen texto y otras imágenes superfinas que tienen un fondo transparente. Si bien puede usarlos para guardar sus fotos, tienden a producir los tamaños más grandes. Incluso cuando se aplica la compresión sin pérdidas, los archivos PNG siguen siendo más grandes que otros tipos de archivos.

Los GIF son la contrapartida animada de los PNG y también usan compresión sin pérdidas.

Los JPG , por otro lado, son los más adecuados para imágenes y fotos coloridas. Son más pequeños en tamaño y se encogen con la compresión con pérdida. Es posible comprimir archivos JPG lo suficiente para que tengan un tamaño manejable, pero debe tener cuidado ya que la compresión con pérdida degrada la calidad general de un archivo y no hay vuelta atrás una vez que se ha hecho.

Los WebP han ido ganando popularidad desde que Google los introdujo a principios de la década de 2010. Según un estudio de Google, los WebP pueden ser entre un 25 % y un 34 % más pequeños que los JPG. Además, puede usar compresión con y sin pérdida en WebP para reducirlos a tamaños aún más pequeños.

Algo a tener en cuenta con los WebP es que no son universalmente aceptados. Al momento de escribir esto, los dispositivos iOS no aceptan WebP. Sin embargo, las últimas versiones de todos los demás navegadores, Google u otros, los mostrarán con gusto.

En cuanto a cómo ImageKit ayuda con esto, es realmente simple:

Cuando se configura esta configuración, ImageKit determina automáticamente el mejor formato de archivo para entregar cada uno de sus archivos. Tiene en cuenta cuál era el formato y el contenido de la imagen original, además de si el dispositivo del visitante lo admite o no.

Los JPG, PNG y GIF se convertirán en WebP cuando sea posible, por ejemplo, si el visitante visita desde Chrome (que los acepta). Si no es posible, por ejemplo, si el visitante visita desde Safari (que no lo acepta), ImageKit convertirá al mejor formato (es decir, el más pequeño) con las transformaciones definidas. Esto podría ser un PNG o JPG.

Nykaa pudo capitalizar esta estrategia de optimización de imágenes de ImageKit. Aunque su sitio web ya había sido diseñado con una combinación de JPG y PNG y estaba almacenado en varios lugares de la web, ImageKit se encargó de automatizar los formatos de imagen directamente desde las URL originales.

3. Comprimir imágenes

A continuación, debemos hablar sobre la compresión de imágenes. Ya he hecho referencia a esto un par de veces, pero se divide en dos tipos:

sin pérdidas

Esta forma de compresión se usa en PNG y GIF. Para comprimir el archivo, se eliminan los metadatos. De esta manera, la integridad de la imagen permanece intacta, pero la reducción del archivo no es tan sustancial como la que se obtendría con la compresión con pérdida.

con pérdida

Esta forma de compresión se aplica a JPG y WebP. Para comprimir el archivo, algunas partes de la imagen se “pierden”, lo que puede dar a ciertos puntos una apariencia más granulada que la imagen original. En la mayoría de los casos, apenas se nota a menos que mire de cerca las dos imágenes una al lado de la otra. Pero para sus visitantes, la degradación es fácil de pasar por alto ya que no hay un original con el que comparar.

Con la compresión con pérdida, puede controlar qué porcentaje del archivo se degrada. Un rango seguro sería cualquier cosa por encima del 70% al 80%. ImageKit, de forma predeterminada, establece su optimización en un 80 % y estima que puede ahorrar al menos entre un 20 % y un 25 % del tamaño de su archivo solo con eso. En realidad, sin embargo, es probable que sea más (estamos viendo más del 40% como en el ejemplo de imagen de Unsplash anterior):

Puede cambiar esto a cualquier valor predeterminado que crea que mantendrá la calidad mientras le brinda los tamaños de imagen que ayudan a que su sitio se cargue rápidamente.

Ya sea que use la configuración de optimización predeterminada o la suya propia, recuerde activar la configuración de compresión adicional disponible en la pestaña Avanzado.

Estas tres configuraciones, en particular, le permitirán comprimir tanto y de la manera más segura posible.

La primera configuración "Guardar una copia", por ejemplo, mantiene sus imágenes originales en el servidor ImageKit. De esa manera, tiene una copia de la imagen precomprimida sin tener que administrar la carga de la misma en su propio servidor.

La segunda configuración "Conservar metadatos de imagen" le permite aplicar compresión sin pérdidas cuando sea posible.

Y la última configuración, "Modo de compresión de imágenes PNG", le permite decidir qué nivel de optimización sin pérdida desea usar en sus PNG: máximo, mínimo o ninguno.

Cuando haya terminado, obtendrá resultados como esta comparación en paralelo:

Este es un JPG de Unsplash. ¿Puedes decir cuál es el original y cuál es la versión comprimida y redimensionada de ImageKit?

El de la izquierda con el borde negro es:

• 1500 × 1005 píxeles
• 266 KB
• Comprimido al 95%

El de la derecha con el borde blanco es:

• 5444 × 3649 píxeles
• 2,5 MB
• Original

Depende de usted decidir cuál de las configuraciones de compresión y optimización de ImageKit se siente más cómodo usando y luego configurar en consecuencia.

4. Guardar y extraer imágenes de un servidor externo

Hay dos formas de ejecutar imágenes a través de ImageKit.

La primera es cargando sus imágenes directamente a su Biblioteca de Medios:

La segunda es mediante la integración con su sitio web o servicio de almacenamiento externo. De hecho, ya hemos visto esta parte de ImageKit. Es de donde obtiene sus puntos finales de URL para que pueda definir sus parámetros de imagen:

Incluso con todas las optimizaciones anteriores, es posible que aún tenga dificultades con el almacenamiento y el mantenimiento de imágenes, ya sea por cómo afectan su velocidad o por la cantidad de almacenamiento que tiene para almacenarlas.

Por ejemplo, si almacena sus imágenes en su servidor, eventualmente tendrá limitaciones de espacio (a menos que tenga una cuenta de alojamiento del tamaño de un monstruo).

Cuando está construyendo tiendas de comercio electrónico masivas o sitios web comerciales con miles o incluso millones de imágenes y los tamaños de imagen correspondientes, no puede permitirse alojar esas imágenes por su cuenta. De acuerdo, hay una manera de servirlos más rápidamente a los visitantes (que explicaré en el siguiente punto), pero ¿por qué asumir la carga y el costo del almacenamiento adicional si no es necesario?

5. Agregue un CDN

Una CDN es otra herramienta de optimización esencial para grandes repositorios de imágenes. Piense en ello como un segundo servidor, solo que este almacena en caché (copia) su sitio web y los sirve a través de centros de datos ubicados significativamente más cerca de sus visitantes en todo el mundo.

Como resultado, el tiempo que lleva enviar su sitio web y sus miles de imágenes de productos desde Nueva York, Nueva York a Bangladesh, India, es increíblemente rápido.

Con ImageKit, puede disfrutar del privilegio de servir sus imágenes no solo a través de sus servidores de procesamiento central, sino también a través de AWS CloudFront CDN (incluido en todos los planes), que tiene más de 150 ubicaciones en todo el mundo.

Sintra, un cliente de ImageKit, vio un gran salto en el rendimiento después de cambiarse a ImageKit. Con la imagen CDN de ImageKit (que tiene nodos de entrega en todo el mundo), experimentó una caída del 18 % en los tiempos de carga de las páginas.

Terminando

Lo que es especialmente bueno de ImageKit es que no es solo una medida preventiva contra las ralentizaciones causadas por las imágenes. Puede usarlo para corregir y mejorar retroactivamente sitios web móviles y PWA, incluso si ya tienen millones de imágenes. Además, el centro de rendimiento facilita el control de las imágenes de su sitio web e identifica oportunidades para mejorar la velocidad.

Además, como puede ver en los consejos anteriores, ImageKit ha simplificado mucho el trabajo que de otro modo tendría que hacer, ya sea que lo maneje manualmente o lo configure a través de un complemento.

Con los consumidores y Google cada día más exigentes con la rapidez con la que se cargan los sitios web en dispositivos móviles, este es el tipo de estrategia de optimización de imágenes que necesita. Aligerará su carga y garantizará que las imágenes agregadas antes o después de ImageKit se optimicen al máximo. Aún mejor, sus clientes obtendrán los beneficios de más clientes potenciales y mayores conversiones.