Optimización y cambio de tamaño de imágenes en línea

Si tienes un conjunto de imágenes increíbles, seguro que te encantaría compartirlas con tus clientes en tu sitio web. Puedes crear una presentación de diapositivas atractiva, galerías o simplemente insertar una imagen en una página o blog. Sea cual sea la opción que elijas, habrá una dificultad que encontrarás con un editor de contenido no especializado: el cambio de tamaño de las imágenes.

A continuación, encontrará algunas recomendaciones para cambiar el tamaño de las imágenes que le resultarán útiles.

Adapta el tamaño para que se ajuste a tu contenido

Ajusta siempre el tamaño de tus imágenes según el tamaño o el ancho del contenido. Por ejemplo, si tu área de contenido tiene un límite de 650 píxeles de ancho, no es necesario que el tamaño de tu imagen supere esa cifra, ya que tu página solo mostrará hasta 650 píxeles. Si el tamaño de la imagen es menor o mayor que el del contenedor, la calidad de visualización se verá afectada.

Adaptar la resolución de la imagen para la web

No se mostrará ninguna indicación de "por pulgada" en el diseño de ningún sitio web. Los PPP (píxeles por pulgada) y los DPI (puntos por pulgada) no tienen relevancia al editar o redimensionar una imagen para cualquier propósito, como enviarla por correo electrónico, publicar en un blog o compartirla en redes sociales. Salvo para la impresión, la visualización en pantalla no permitirá ninguna diferenciación en las características ni la calidad de la imagen.

Esto aplica especialmente a los archivos PDF . Evite publicar archivos PDF con imágenes con una resolución superior a 72 ppp para su lectura en la web. En este caso, el ImageRecycle puede ayudarle. Optimice un PDF con imágenes de 300 ppp y ahorre hasta un 98 % de su tamaño con una calidad perfecta para leer en la web.

La mejor calidad de exportación JPG con ImageRecycle

Al usar Photoshop, se recomienda guardar las imágenes JPEG con un máximo del 20 % de compresión para la web. También puedes probar diferentes opciones de compresión JPEG para encontrar la que mejor se adapte a tus necesidades. Aplicar una compresión global es una cuestión de equilibrio entre tamaño y calidad.

Ahora, con el algoritmo de optimización de imágenes ImageRecycle , el proceso es bastante diferente. ImageRecycle detecta la relación de compresión actual de la imagen y, en función de ella, la optimiza. Dado que la compresión no se aplica a toda la imagen, la prueba a continuación le sorprenderá.

Tenga en cuenta: cuanto menos comprimida esté la imagen original, mejor será la optimización y el tamaño.

En el siguiente ejemplo, exporté cuatro imágenes JPG con Photoshop con los siguientes niveles de calidad: 60% | 80% | 90% | 100%.
Luego, optimicé las imágenes con ImageRecycle . Aquí está el resultado del tamaño. En cuanto a la calidad, las imágenes con 90/100% son ligeramente mejores que las otras dos. La lección es: exporta tus imágenes JPG lo menos comprimidas posible; ImageRecycle hará el resto.

Optimizar las imágenes finales

Dependiendo del sitio web que gestiones, las mismas imágenes pueden mostrarse en diferentes páginas con distintos tamaños. Esto suele ocurrir en tiendas online con slider, listado de productos, detalles de producto, etc.
El proceso de redimensionamiento suele realizarse mediante una biblioteca PHP online como GD. Asegúrate de la calidad y el peso de tus imágenes de usuario originales y finales. No confíes en las bibliotecas online ni en los generadores de caché, ya que podrías tener problemas de calidad y tamaño. Si ya optimizaste tu imagen original (con ajustes precisos de calidad, colores y compresión) para ahorrar ancho de banda y carga de página, con algunas bibliotecas de redimensionamiento de extensiones web, ¡podrías perder todo eso!

La solución:

• Optimice la imagen que se muestra en el navegador de su cliente final. Puede hacerlo manualmente para cada imagen y tamaño, o usar nuestra API o la extensión CMS de ImageRecycle para seleccionar la carpeta donde se almacenan sus imágenes finales. A continuación, ejecute la optimización automática.
• Usa nuestro redimensionador para imágenes originales. Ahorra espacio en el servidor, manipula tus imágenes más rápido y, por lo general, no necesitas imágenes con un ancho superior a 1600 px en la visualización final

¿Qué sigue?: HTML5 y el<picture> elemento

Las técnicas de diseño responsivo, que incluyen consultas de medios, permiten a los diseñadores web adaptar el diseño de un sitio web a una amplia gama de dispositivos, desde computadoras de escritorio hasta teléfonos inteligentes, y lograr una apariencia impecable. El problema no es la visualización, sino el rendimiento: la imagen de escritorio se muestra y se carga en teléfonos inteligentes y tabletas.

El<picture> El elemento HTML5 intenta resolver este problema. La ventaja de un recurso de imagen optimizado de forma nativa es el tiempo de carga, especialmente importante para usuarios con conexiones a internet móviles lentas.<picture> El elemento hace posible un cambio de tamaño dinámico real simplemente dando una instrucción HTML al navegador.

Extracto de código:

La limitación actual es que requiere una versión muy reciente de Chrome (39) y algo de JavaScript para funcionar correctamente. En un futuro próximo, con esta tecnología asociada a un optimizador de imágenes, podemos esperar un mejor tiempo de carga del sitio web.