Cambio de tamaño y optimización de imágenes en línea

Si tiene un grupo de imágenes increíbles, estoy seguro de que le encantaría compartirlo con sus clientes en su sitio web. Puede hacer una hermosa presentación de diapositivas, hacer galerías o simplemente insertar una imagen en una sola página o blog. Cualquiera que sea la opción que seleccione, habrá una sola dificultad con el editor de contenido no especializado: el cambio de tamaño de la imagen.

A continuación, algunas recomendaciones para cambiar el tamaño de la imagen que serán útiles para usted.

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

Cambie siempre el tamaño de sus imágenes según el tamaño del contenido o según el ancho del contenido. Por ejemplo, si su área de contenido está limitada a 650 píxeles de ancho, entonces, no hay ningún requisito para que su imagen sea más grande que 650 píxeles, ya que su página solo mostrará hasta 650 píxeles. Si la propiedad del tamaño de la imagen es menor o mayor que el contenedor, la calidad de visualización se deteriorará.

Adaptar la resolución de imagen para la web

No habrá ninguna impresión de "por pulgada" en ningún esquema del sitio web. PPI, que son píxeles por pulgada y DPI, que son puntos por pulgada, no tiene ninguna relevancia cuando edita o cambia el tamaño de su imagen para cualquier propósito, como enviar correos electrónicos, blogs o compartir en las redes sociales. A excepción de la impresión, la visualización en pantalla, no podrá hacer ninguna diferenciación en función o calidad de la imagen.

Este es especialmente el caso del PDF , evite poner a disposición PDF para lectura web que contengan imágenes con una resolución superior a 72 ppp. En este caso, el optimizador de PDF ImageRecycle puede ayudar, optimizar un PDF con imágenes de 300 ppp en su interior y puede ahorrar el 98% del tamaño del PDF con una calidad perfecta para ser leído en la web.

La mejor calidad de exportación JPG con ImageRecycle

Con Photoshop, la recomendación para la web es guardar sus imágenes JPEG con un máx. 20% de compresión. También puede hacer algunas pruebas con diversas virtudes JPEG que funcionan mejor para usted. 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 de imagen actual y, con respecto a eso, optimiza la imagen. Debido a que la compresión no se aplica a toda la imagen, quedará realmente sorprendido por la prueba a continuación.

Tenga en cuenta: menos compresión de la imagen original, mejor optimización y tamaño.

En el siguiente ejemplo, he exportado 4 imágenes jpg usando Photoshop con un nivel de calidad: 60% |
80% | 90% | 100% Luego ImageRecycle imágenes usando ImageRecycle , aquí está el resultado del tamaño. En cuanto a la calidad, el 90/100% son un poco mejores que los otros 2. La lección aquí es: exporta tus imágenes jpg lo menos comprimidas posible, ¡ ImageRecycle hará el resto!

Optimizar las imágenes finales

Dependiendo del sitio web que esté ejecutando, las mismas imágenes se pueden mostrar en diferentes páginas con diferentes tamaños. Esto es típicamente algo que encontrará en un comercio electrónico con control deslizante, listado de productos, detalles del producto, ...
El proceso de cambio de tamaño generalmente lo realiza una biblioteca php en línea como GD. Asegúrese de la calidad y el peso de sus imágenes de usuario ORIGINALES y FINALES. No confíe en las bibliotecas en línea y el generador de caché o puede tener problemas de calidad y tamaño. Si su imagen original ya está optimizada de su lado (haciendo un ajuste fino entre calidad, colores, compresión) para ahorrar ancho de banda y carga de página, con algunas bibliotecas de cambio de tamaño de extensión web, ¡puede perder todo eso!

La solución:

• Aplique la optimización en la imagen que se muestra en el navegador de su cliente final. Puede hacerlo manualmente en cada imagen y para cada tamaño o utilizar nuestra extensión API o CMS de ImageRecycle para seleccionar la carpeta donde se almacenan sus imágenes finales. Luego, ejecute la optimización automática en él.
• Utiliza nuestro redimensionador para imágenes originales. Puede guardar el almacenamiento del servidor, manipular sus imágenes más rápido y, por lo general, no necesita imágenes con un ancho superior a 1600 px en la pantalla final

Lo que sigue: HTML5 y el elemento

Las técnicas de diseño receptivo que incluyen consultas de medios son la forma en que los diseñadores web pueden adaptar el diseño de un sitio a una amplia gama de dispositivos, desde computadoras de escritorio hasta teléfonos inteligentes, y hacer que se vea nítido de manera constante. El problema aquí no es la pantalla sino el rendimiento, esta es la imagen del escritorio que se muestra y se carga en el teléfono inteligente y la tableta.

los El elemento HTML5 está tratando de resolver este problema. El beneficio del recurso de imagen optimizado de forma nativa es el tiempo de carga, especialmente importante para los usuarios con conexiones de Internet móviles más lentas. los El elemento hace posible un cambio de tamaño dinámico real simplemente dando una instrucción HTML al navegador.

Extracto del código:

El límite por el momento es que esto requiere una versión de Chrome muy reciente (39) y algo de JS para funcionar correctamente. En un futuro cercano, con esta tecnología asociada a un optimizador de imágenes, podemos esperar lo mejor para el tiempo de carga del sitio web.