Comience a publicar imágenes optimizadas en Vue

Las imágenes se han vuelto extremadamente importantes para la efectividad de los sitios web. Hablan más de 1000 palabras, llaman la atención y estimulan emociones.

Sin embargo, el rendimiento web también es un problema creciente para la mayoría de los sitios web. Y las imágenes son el núcleo de muchos problemas de rendimiento web. Según HTTP Archive, las imágenes representan al menos el 50% de la carga útil total del sitio web .

Si alguna vez ha intentado reducir el tamaño de las imágenes, entonces sabrá lo doloroso que es el proceso. Las imágenes mal optimizadas pueden acabar borrosas o pixeladas.

Afortunadamente, hoy contamos con una gran cantidad de servicios externos solo para este propósito. Hablaremos sobre la CDN de imágenes de ImageEngine y cómo implementarla usando Vue.js. Pero primero, aprendamos sobre CDN e ImageEngine.

¿Qué es una CDN de imágenes?

Una red de entrega de contenido (CDN) es una red global de servidores que optimiza el rendimiento web utilizando el nodo más cercano al usuario para una entrega más rápida de activos. Una CDN de imágenes agrega optimización de imágenes en tiempo real antes de entregar imágenes desde la CDN. Una CDN de imágenes reduce la carga útil de las imágenes y envía imágenes instantáneamente desde el borde de la red. El resultado es una carga de página más rápida que genera una clasificación SEO más alta y una mejor experiencia de usuario.

¿Qué es Image Engine?

ImageEngine es una CDN de imágenes con optimización automática de imágenes en tiempo real. Lo que hace que ImageEngine se destaque entre la multitud es la forma en que ImageEngine analiza la solicitud para proporcionar dinámicamente una imagen visual de alta calidad con el menor tamaño de bytes posible según las capacidades del dispositivo o del navegador. ImageEngine es la única CDN de imágenes que utiliza la detección de dispositivos móviles para optimizar específicamente las imágenes según las capacidades del navegador o del dispositivo solicitante.

Con ImageEngine, no necesita preocuparse por los parámetros de URL con sintaxis peculiar o bibliotecas de JavaScript. En su lugar, puede anteponer a la URL de la imagen una dirección de entrega de ImageEngine y el servicio detectará automáticamente el dispositivo móvil, optimizará la imagen de manera adecuada y entregará la imagen más eficiente con la buena calidad posible.

Le mostraremos cómo usar ImageEngine CDN dentro de nuestra aplicación Vue.js para entregar imágenes optimizadas. Lo bueno es que no es necesario volver a cargar imágenes para utilizar el servicio. Solo necesita apuntar el servicio ImageEngine a la ubicación de almacenamiento de imágenes existente (o, como ImageEngine lo llama, un “Origen”).

Integración de ImageEngine en su sitio web para un mejor rendimiento web

Si desea seguirnos, regístrese para obtener una cuenta de prueba gratuita antes de continuar. Después de registrarse para obtener una cuenta de prueba, obtendrá acceso a un panel de control donde podrá configurar ImageEngine para su sitio web o aplicación.

Creé una aplicación de demostración para demostrar cuán sencilla es la integración a nivel de aplicación. Sólo se necesitan unos pocos y sencillos pasos para empezar a trabajar.

Paso 1: apunte ImageEngine a las imágenes originales

Antes de entrar en el código, deberá apuntar el “motor” de ImageEngine al host donde se almacenan las imágenes. Este puede ser su sitio web, Amazon S3 o Google Cloud Storage.

Como puede ver en la captura de pantalla anterior de la configuración del Panel. Agregamos el origen (llamado “predeterminado”) con el host apuntando a nuestra aplicación Vue de prueba de entorno de pruebas https://4fzq3.csb.app/

No necesitamos volver a cargar imágenes en la CDN ni en ningún otro lugar. Si echas un vistazo a la estructura del proyecto de demostración, verás que todas las imágenes se encuentran dentro de la public/imagescarpeta:

ImageEngine tomará automáticamente estas imágenes en la carpeta pública/imágenes, las optimizará y entregará las imágenes optimizadas desde su propia CDN. Y con el componente Vue que le mostraremos, tampoco necesitamos cambiar las URL dentro de nuestro código.

Paso 2: Solicitudes de imágenes proxy dentro de la aplicación Vue

Comencemos con la implementación de Vue.js. Tienes dos opciones de implementación. Ambos implican agregar la dirección de entrega proporcionada por ImageEngine. Su dirección de entrega debe terminar en .imgeng.in, así que cópiela y esté lista para usar.

Una vez que tenga su dirección de entrega, podemos continuar con la implementación del código. Nuestra dirección de entrega de ejemplo eshttps://c4ltipq2.cdn.imgeng.in/

Aplicación de demostración en sandbox

Opción 1: etiquetas de imagen de prefijo

Para enviar solicitudes de imágenes a ImageEngine, deberá anteponer la ruta src de la imagen existente con la nueva dirección de entrega que se encuentra en el panel de su cuenta.

img :src="imgengHostConst + '/images/pic_2.jpg'" /

Opción 2: utilizar el componente ImageEngine Vue (recomendado)

Necesitamos instalar el paquete npm @imageengine/vuey agregarlo como dependencia.

En la terminal escribe:

npm i @imageengine/vue

Ya tienes todo configurado, estamos listos para hacer algo de codificación.

Deberá importar el componente ImageEngineProvider del paquete npm y pasar la Dirección de entrega como propiedad deliveryAddressy envolverlo alrededor de su aplicación o componentes de imagen.

ImageEngineProvider deliveryAddress="https://c4ltipq2.cdn.imgeng.in/"  …APP…/ImageEngineProvider

Reemplace todos los elementos de la imagen HTML con componentes ImageComponent.

Por ejemplo:

img src="/images/pic_2.jpg"/!-- Changes to --ImageComponent src="/images/pic_2.jpg" /

El componente de imagen solo requiere que se pase la propiedad src. Opcionalmente, puede pasar las srcSetpropiedades de las directivas y que le brindan más control sobre la optimización de su imagen. Usando directivas , puede configurar el formato de salida, el ancho, el alto, la compresión y más.

Después de usar el componente ImageEngineProvider, sus imágenes se optimizan y se entregan a través de ImageEngine CDN.

Puede ver todas las directivas, propiedades y formatos de imágenes que puede pasar y que afectan la compresión y optimización en la página de documentación del paquete npm.

A continuación se muestra una tabla que muestra la conversión de formato de imagen y la reducción de la carga útil de la imagen que ImageEngine proporcionó para nuestra aplicación de muestra.

Nombre de la imágen	Formato original	Formatear con ImageEngine	Tamaño original	Tamaño después de ImageEngine	Reducción de carga útil
foto_2.jpg	JPEG	WebP	4,8 megas	570 KB	88%
foto_2.jpg	JPEG	WebP	3,3MB	141KB	96%
pic_1_variación_1.jpg	JPEG	WebP	2,8MB	72KB	97%

Paso 3 (opcional). Mejores prácticas y personalización

Para aprovechar ImageEngine al máximo, considere revisar su lista de mejores prácticas . En caso de que necesite modificar sus imágenes (cambiar el tamaño, recortar, etc.), ImageEngine le permite aplicar manipulaciones mediante directivas .

Ejemplo de código usando directivas:

ImageComponent  src="images/pic_2.jpg"  :directives="{    outputFormat: 'webp',    rotate: 45  }"/

Usando atributos de directivas, especificamos un formato de salida de WebP y rotamos la imagen 45 grados. Puede combinar directivas, utilizarlas cuando las necesite y donde las necesite. Es totalmente dinámico.

En la mayoría de los casos, la configuración predeterminada automática de ImageEngine genera resultados impresionantes, por lo que normalmente no se necesitan directivas, excepto para algunos requisitos personalizados.

Conclusión

Cuando observa el esfuerzo invertido frente a las ganancias en el rendimiento web, ImageEngine es uno de los pocos ejemplos en los que la calidad del servicio realmente obtiene lo que desea. Ya no necesita preocuparse por el tamaño de la imagen, el formato, la resolución, etc. Creamos un paquete separado para los desarrolladores de Vue.js porque sabemos lo importante que es tener un buen soporte CDN para el marco Vue.js. Puede comenzar a utilizar nuestro servicio dentro de las aplicaciones Vue.js en solo unos pocos pasos.

Ofrezca a los visitantes de su web/aplicación la mejor experiencia que se merecen.