Optimizacion

Cuál es el beneficio de usar imágenes escaladas

Las imágenes escaladas son aquellas que tienen un tamaño definido por el código HTML o CSS, sin importar su tamaño original. Por ejemplo, si un usuario sube a una imagen con dimensiones de 400 x 400 a una página y la usa como un thumbnail de 40 x 40 con HTML o CSS, el navegador tendrá que descargar la imagen grande y después escalarla y hacerla pequeña para que se muestre en el thumbnail.

Pero un método mucho más eficiente sería redimensionar la imagen a 40 x 40 para que el navegador no tenga que descargar ineficientemente la imagen grande y escalarla para que empareje el tamaño.

¿Cuál es el beneficio de usar imágenes escaladas?

Usar imágenes con el tamaño correcto puede ahorrar una gran cantidad de bytes de memoria a largo plazo, pero lo más importante es que mejora el rendimiento de tu sitio web significativamente, especialmente en dispositivo móviles como teléfonos o tabletas.

Una imagen escalada ocupa menos espacio, carga mucho más rápido y reduce el uso de recursos. Usar imágenes escaladas también es una de las recomendaciones más populares por los sitios y las herramientas de optimización web, ya que son de gran ayuda para tener una mejor puntuación y conseguirá un mejor puesto en Google y mejores resultados en SEO.

¿Qué necesitas?

Antes de continuar con el tutorial, esto es lo que necesitas:

  • Acceso FTP (específicamente al directorio de imágenes).
  • Editor de imágenes (Paint, Photoshop, o cualquier editor online como picresize).

1.- Analiza tu sitio web

Para empezar, tendrás que usar una herramienta como GTMetrix, en donde además de todo un análisis sobre el tiempo de carga de nuestro sitio, nos dice la dimensión exacta que nuestras imágenes deberían de tener.

Esta información la encuentras en la opción ‘Serve scaled images’, que en este caso está optimizado casi al 100%, pero hay una imagen que necesita cambiar de tamaño.

image00 4

En caso de que no lo tengas optimizado, veras el porcentaje en rojo y una lista con todas las imágenes que necesitan corrección.

Según la imagen, al escalar esa imagen nos podemos ahorrar 1.4KB de espacio y de tiempo de carga. Que en realidad es muy poco, pero significa un 81% de reducción de esa imagen. Ahora, si tienes muchas o cientos de imágenes en un sitio, el impacto será muy grande.

2.- Escalar y reemplazar las imágenes

Para poder escalar tus imágenes es necesario que las descargues. Las imágenes que GTMetrix te especifique en el paso 1 pueden ser descargadas vía FTP desde la carpeta de imágenes. Luego de hacer eso, es posible usar un editor de imágenes (mencionados anteriormente) para escalar las imágenes. Puedes usar picresize para escalarlas a los valores recomendados.

Si usas picresize para hacerlo, al ingresar al sitio web solo debes de hacer clic en el botón ‘Browse’ para que se abra el explorador de archivos de tu computadora. Solo tienes que seleccionar la imagen que quieres, das clic en el botón ‘Start’ y esperar.

beneficio de imagenes escaladas

Una vez que has esperado a que la imagen se suba a la página ahora podrás cambiarle el tamaño. En el paso 2 de para escalar la imagen te preguntara el porcentaje que deseas reducir tu imagen, y a la derecha te dirá las medidas finales que tendrá la imagen una vez que haya sido escalada. Solo tienes que seleccionar la medida que se ajuste a tu sitio.

image01 3

Si en ‘Make My Picture’ no ves ningún tamaño que se ajuste a tus necesidades, puedes seleccionar la opción ‘Custom Size…’ y poner el tamaño que deseas que tengan las imágenes.

Una vez que hayas hecho con las imágenes, tienes que reemplazarlas por las imágenes que están subidas en tu sitio web. Para hacerlo, puedes usar el mismo cliente FTP que usaste para descargarlas. Se recomienda dejarles el mismo nombre, de forma que al reemplazarlas el sitio quede como estaba y no haya ningún cambio en el código.

Una vez que hayas terminado este proceso, es momento de volver a hacer la prueba con GTMetrix y ver si nuestra puntación ha mejorado.

3.- Comprobar los cambios

Cuando hayas terminado de subir las nuevas fotos con el tamaño escalado, ahora tu puntuación deberá de ser mucho mejor. Dependiendo del número de imágenes que hayas escalado tendrás un porcentaje bueno o perfecto.

Conclusion

Ahora sabes cómo puedes escalar las imágenes que ya tenías subidas en tu sitio web para disminuir el tamaño de recursos ocupados y el tiempo de carga. A partir de ahora, se recomienda que todas las imágenes que subas al sitio tengan el tamaño exacto para que no tengas que volver a hacer esto siempre.

Fran Segarra

Agrega un Comentario

Dale clic aquí para dejar un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Comienza a ahorrar hoy mismo!

Alojamientos con todo incluido y nombre de dominio por

0
96
/mes