COS-General

¿Qué es el redimensionamiento de imagen automático?

Última actualización: March 11, 2016

El redimensionamiento de imagen automático es una función habilitada de forma predeterminada en todos los portales de HubSpot. Se usa para optimizar imágenes, disminuir el tiempo de carga del navegador y mejorar la calificación en Google PageSpeed.

El redimensionamiento de imagen automático trabaja con una imagen originalmente grande y la optimiza según el tamaño que muestras en tu sitio Web. Esto disminuye radicalmente el tiempo que tarda el navegador para cargar esa imagen en la página. Por ejemplo, si un usuario sube una imagen de 5000px por 5000px, pero en su sitio web solo la muestra de 500px por 500px, primero el navegador tiene que trabajar de más descargando la imagen completa, luego redimensionando la imagen hasta el tamaño mostrado. Con el redimensionamiento de imagen automático, cuando vemos el ancho y la altura en la página HTML, automáticamente la imagen se redimensiona en la primer carga de la página y se almacena en caché en su versión redimensionada en nuestro CDN. Después de la carga inicial de la página, le ahorramos al usuario final la descarga de contenido innecesario para la apariencia de la imagen en la página.

Mira esto en la acción:

Antes:

Imagen añadida por el usuario
Imagen añadida por el usuario

Después:

Imagen añadida por el usuario
Imagen añadida por el usuario

¿Todavía tengo que cambiar el tamaño de mis imágenes sin conexión?

Sí. Cambiar el tamaño de las imágenes al tamaño exacto que necesitas te da una mayor calidad de la que logramos en el servidor. Tanto Photoshop como la vista previa de la app OS X tienen muy buenos algoritmos para redimensionar imágenes logrando que se vean realmente bien, incluso cuando las cambias a un tamaño muy pequeño comparado con su tamaño original. Esto incluye cambiar el tamaño de imágenes usando el editor integrado del Administrador de Archivos.

¿Qué significa en cuanto a asistencia de retina?

Las imágenes con alta resolución dpi en los dispositivos (generalmente más de 200 pixeles por pulgada, dependiendo de la distancia de la visión típica) se verían muy pequeñas si se mostraran con su resolución natural. Safari y otros navegadores compatibles con pantallas retina amplían las imágenes para darles proporción y eso puede hacer que se vean borrosas. Una manera de resolver este problema sería subir imágenes a 2x de la resolución que mostrarían las pantallas de que no son de y cambiar el tamaño de la imagen en el navegador. Esta no es la mejor solución porque obliga a los usuarios a descargar imágenes que son mucho más grandes (2x el tamaño, por lo tanto 4x los bytes). Aunque añadir noresize es una solución para imágenes que tienen un tamaño intencional de 2x para retina, existen mejores soluciones. Retina.js es un pequeño JavaScript que sustituye imágenes con su equivalente en retina solo para pantallas de retina. También lo puedes hacer con CSS. Apple tiene un artículo de desarrolladorbastante completo sobre el tema.

¿Puedo inhabilitar el redimensionamiento de imagen automático?

Puede haber casos específicos en los que quieras deshabilitar esta función, solo añade el parámetro noresize a la URL de la imagen.