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, 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

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, no es necesario que el tamaño de su imagen supere los 650 píxeles, porque 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, es decir, píxeles por pulgada y DPI, es decir, puntos por pulgada, no tienen ninguna relevancia cuando editas o cambias el tamaño de tu imagen para cualquier propósito como enviar correo electrónico, escribir blogs o compartirla en las redes sociales. A excepción de la impresión, en la visualización en pantalla, no podrá hacer ninguna diferenciación en la característica o calidad de la imagen.

Este es especialmente el caso del PDF ; evite poner a disposición PDF para lectura web que contenga imágenes con una resolución superior a 72 ppp. En este caso, el ImageRecycle puede ayudar, optimice un PDF con imágenes de 300 ppp en su interior y podrá guardar el 98% del tamaño del PDF con una calidad perfecta para leerlo 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: cuanto menos se comprima la imagen original, mejor será la optimización y el tamaño.

En el siguiente ejemplo, exporté 4 imágenes jpg usando Photoshop con un nivel de calidad: 60% |
80% | 90% | 100% Luego optimicé las 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 suele ser 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 versus FINALES. No confíe en las bibliotecas en línea ni en el generador de caché o puede tener problemas de calidad y tamaño. Si su imagen original ya está optimizada por su parte (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 extensiones 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.
• Utilice nuestro redimensionador para imágenes originales. Puede ahorrar almacenamiento en el servidor, manipular más rápido sus imágenes y, por lo general, no necesita imágenes con un ancho superior a 1600 px en la visualización final.

Lo que sigue: HTML5 y el elemento

Las técnicas de diseño responsivo que incluyen consultas de medios son la forma que tienen los diseñadores web de 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 constantemente. El problema aquí no es la pantalla sino el rendimiento, es la imagen del escritorio que se muestra y 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 en este momento es que esto requiere una versión de Chrome muy reciente (39) y algo de JS para funcionar correctamente. En un futuro próximo, con esta tecnología asociada a un optimizador de imágenes, podremos esperar lo mejor en el tiempo de carga del sitio web.