Imágenes receptivas y optimización del rendimiento con Cloudinary
Usar imágenes en sitios web contemporáneos correctamente no es la tarea más fácil. Diferentes dispositivos con diferentes resoluciones y densidades de píxeles requieren mucho más que un archivo de imagen predeterminado. Aunque las pantallas de alta resolución requieren imágenes grandes, los archivos deben mantenerse lo más pequeños posible debido a los planes de datos limitados, especialmente en dispositivos móviles. Esta no es una empresa fácil. Sin embargo, la solución de gestión de imágenes basada en la nube, Cloudinary, lo convierte en uno. Hoy, aprenderá lo simple que puede ser la optimización de imágenes y rendimiento con Cloudinary.
Solución de gestión de imágenes basada en la nube Cloudinary
Entre los muchos servicios en la nube, nublado se ha especializado en la gestión y optimización de imágenes. El servicio le permite cargar imágenes e integrarlas en su sitio web o blog en diferentes resoluciones, formatos y calidades.
Además de eso, puede agregar muchos efectos como viñetas y desenfoques, y alterar el contraste, el brillo y la saturación sobre la marcha. Puede editar imágenes desde la interfaz de Cloudinary y luego vincularlas a su proyecto web a través de una URL generada.
Amplias formas de alterar y optimizar imágenes
La URL contiene toda la información, como la resolución de la imagen, el formato y todos los efectos que aplicó. Por lo tanto, también puede realizar ajustes directamente a través de la URL.
http://res.cloudinary.com/demo/image/upload/c_fill,e_sepia,q_80,h_425,r_30,w_640/demo.jpg
El ejemplo muestra cómo se transfieren los ajustes de imagen a través de URL. “c_fill” (“c” de “recortar”) se asegura de que la imagen se recorte para llenar toda el área de la imagen y, si es necesario, se cortan ciertas partes de la imagen. “e_sepia” (“e” de “efecto”) crea un efecto sepia en la imagen. Hay más de 30 filtros similares a los disponibles en Photoshop y otras aplicaciones de edición de imágenes.
“q_80” (“q” de “calidad”) define la calidad de la imagen y los valores “h_425” y “w_640” (“h” de “alto” y “w” de “ancho”) determinan el ancho y el alto de la imagen .
Ejemplo de una imagen manipulada
De esta manera, crea versiones de imágenes adecuadas sin tener que usar la interfaz de Cloudinary. Sin embargo, también se admite el uso de PHP o jQuery.
$.cloudinary.image("demo.jpg", {effect: "sepia", height: 425, quality: 10, radius: 30, width: 640, crop: "fill"})
El ejemplo de jQuery genera el mismo archivo de imagen que el ejemplo de URL. Para aquellos que prefieren trabajar con PHP, existe una clase de PHP adecuada que funciona de manera similar al ejemplo de jQuery.
Nuboso: teniendo en cuenta la densidad de píxeles
Las pantallas modernas tienen una densidad de píxeles mucho mayor y pueden mostrar imágenes con una resolución mucho mayor que los monitores convencionales. Las imágenes de alta resolución también se pueden definir en el diseño web moderno. Para ello, se agregó el atributo “srcset”, que puede utilizar para cargar imágenes para diferentes densidades de píxeles.
Imagen para diferentes densidades de píxeles
Dado que los teléfonos inteligentes y las tabletas modernos generalmente vienen con pantallas de alta resolución, tiene mucho sentido distribuir los archivos de imagen para densidades de píxeles altas. Cloudinary también te ayuda con eso. No se necesita mucho esfuerzo para que proporcione archivos en diferentes densidades para cada imagen. Para hacerlo, simplemente se envía una densidad de píxeles a la URL de la imagen a través de «dpr_x».
http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425,dpr_2/demo.jpg
En el ejemplo, se devuelve una imagen con una densidad de imagen duplicada. Por lo tanto, la resolución real de la imagen no es de 640 x 425 píxeles, sino de 1280 x 850 píxeles.
La versión de imagen diferente debe implementarse dentro del elemento «» a través de «srcset».
<img src="http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425/demo.jpg" srcset="http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425/demo.jpg, http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425,dpr_2/demo.jpg 2x, http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425,dpr_3/demo.jpg 3x " />
Optimización de imagen y rendimiento con Cloudinary: capacidad de respuesta ilimitada
Aquellos que usan imágenes de gran formato cuando se trata de diseño web deben usar archivos de imagen más pequeños en pantallas más pequeñas, para evitar una carga de página innecesaria. Debido al elemento “
Con Cloudinary, puede crear diferentes resoluciones para sus imágenes y luego integrarlas en su sitio web.
A menudo, sin embargo, las imágenes no se muestran en anchos establecidos sino para adaptarse al ancho de la ventana gráfica. Usaré jQuery para mostrarte cómo alcanzar ese objetivo.
Para hacer eso, primero acceda al archivo de imagen a través del atributo de datos en un elemento “”. Asigne la clase «cld-respnsive». Aquí, no ingresas un ancho. En su lugar, establezca «w_auto», para un ancho automático.
<img data-src="http://res.cloudinary.com/demo/image/upload/w_auto/demo.jpg" class="cld-responsive">
Posteriormente, se carga un complemento a través de jQuery.
$.cloudinary.responsive();El complemento asegura que siempre habrá un archivo de imagen generado para el tamaño de visualización actual de la imagen. De esta manera, puede configurar galerías de varias columnas, por ejemplo, que se orientan hacia todo el ancho de la ventana del navegador.
Siempre haga que las imágenes en las galerías se distribuyan perfectamente
Por ejemplo, cuando se supone que una imagen debe mostrarse con un ancho de 200 píxeles, las imágenes se generan y distribuyen con este ancho exacto, hecho en segundo plano por Cloudinary. Esto le permite evitar la integración de archivos innecesariamente grandes y lo ayuda a hacer que su sitio web sea delgado y rápido.
Aquellos que también quieran considerar la densidad de píxeles agreguen «dpr_auto» además de «w_auto».
<img data-src="http://res.cloudinary.com/demo/image/upload/w_auto,dpr_auto/demo.jpg" class="cld-responsive">
Además, Cloudinary también carga las imágenes apropiadas al mejorar o reducir la ventana del navegador. De forma predeterminada, se consideran cambios en el tamaño del navegador a partir de 10 píxeles.
Calidad de imagen y formato
Mostrar archivos de imagen completamente apropiados sin tener que reducir la escala de las imágenes en el navegador es un paso importante para una visualización de imagen óptima que ahorra recursos. Sin embargo, hay otros dos tornillos de ajuste importantes para archivos pequeños.
Por un lado, está el formato de imagen. Los archivos JPEG y PNG son los formatos más comunes junto con el aún popular PNG. Cada uno tiene sus ventajas. Los archivos JPEG son principalmente útiles para fotos e imágenes grandes, mientras que los PNG se usan para gráficos, así como todo lo que requiere un canal alfa.
Sin embargo, dependiendo del navegador, también hay otros formatos de imagen disponibles. Por ejemplo, Google Chrome admite el formato WebP, que crea archivos significativamente más pequeños que JPEG y PNG.
Microsoft también tiene su formato de imagen llamado JPEG-XR, que tiene una compresión mucho mejor, pero solo se muestra en Internet Explorer a partir de la versión 9 y Edge. Con Cloudinary, no tiene que preocuparse por el formato de archivo correcto. A través de «f_auto», deja que el servicio decida qué formato es el mejor.
http://res.cloudinary.com/demo/image/upload/f_auto/demo.jpg
En el ejemplo, se usa un formato diferente si es necesario, ignorando la extensión de archivo «jpg». En Chrome, por ejemplo, la imagen se muestra como un archivo WebP y en Internet Explorer, se muestra como un JPEG-XR.
Además de poder determinar el formato, también puedes definir la calidad de la imagen. Para eso, usa un valor entre 10 y 100 (“q_80”, por ejemplo). Dependiendo del contenido de la imagen, a veces una compresión más fuerte ya veces una más débil tiene más sentido.
“JPEGmini” para tener siempre resultados óptimos
Usando el complemento «JPEGmini», que es gratuito para más de 100 compresiones, las imágenes siempre se comprimen de manera óptima. El propio complemento decide qué compresión es la mejor para cada imagen. No necesita probar manualmente qué calidad tiene más sentido.
Optimización de imagen y rendimiento con Cloudinary: conclusión y precios
nublado es un extenso servicio de administración de imágenes basado en la nube que es más que útil cuando se trata de optimizar imágenes para la web. Especialmente aquellos que trabajan sin un sistema de gestión de contenido encontrarán un valioso asistente en Cloudinary. Cloudinary comprimirá y recortará imágenes de forma impecable y automática, y ajustará sus formatos por usted.
Efectos adicionales, inserción de texto y otras herramientas completan el servicio. La generación y carga de imágenes también es muy rápida. Este es un aspecto importante que no debe subestimarse.
Hoy en día, diferentes tipos de dispositivos, resoluciones y densidades de píxeles hacen necesario tener una imagen preparada en una cantidad de versiones inmanejable manualmente. Cloudinary hace un buen trabajo aquí y es muy fácil de usar.
Además de eso, el servicio es de uso gratuito para la mayoría de los sitios web. Cualquiera que aloje hasta 75.000 imágenes y no supere el límite de 7.500 conversiones al mes, puede utilizar el servicio de forma gratuita. Se incluyen 2 Gigabytes de almacenamiento y 5 Gigabytes de ancho de banda mensual.
Si necesita más que eso, puede elegir entre cuatro ofertas de 44 a 224 dólares al mes. No hay restricciones en las características de ninguno de los planes.
Descargo de responsabilidad: este artículo está patrocinado por Cloudinary. Sin embargo, no influyeron en lo que escribimos.
(dpe)
#Imágenes #receptivas #optimización #del #rendimiento #con #Cloudinary
