Publicado el 23 Oct, 2020 4 minutos de lectura
Este artículo es el primero de nuestra serie de tres partes dedicada a las Mejores Prácticas de Gestión de Contenidos. Puedes leer el segundo artículo aquí y el tercero artículo aquí.
Para las personas encargadas de gestionar el contenido de cualquier producto digital (también conocidos como Content Managers), es especialmente importante que la carga o actualización de dicho contenido no repercuta en la velocidad de carga de la página, es decir, en la performance. También es crucial tener en cuenta que, hacer bien la carga de las imágenes, impactará de forma positiva al SEO del producto.
En Modyo damos mucha relevancia a que, tanto al momento de la entrega del producto como en su administración a lo largo del tiempo, la velocidad de carga de la página o aplicación se mantenga lo más baja posible. Es por eso que queremos dar algunas recomendaciones indispensables para realizar esta tarea lo mejor posible. Adquirir estas buenas prácticas como parte del día a día, facilitará el trabajo diario que supone manejar el contenido de un producto digital.
Ajustar el tamaño de imagen
Parece un paso muy sencillo, pero ajustar el tamaño de la imagen según las medidas correspondientes en píxeles al espacio que debe ocupar, es lo que hará que la imagen se vea bien (que no se pixelee o sea innecesariamente grande).
Podemos ajustar el tamaño de la imagen en Photoshop eligiendo Imagen > Tamaño de imagen en el menú principal, elegimos medirlo en píxeles en el desplegable, restringimos la proporción de aspecto, y elegimos el tamaño correcto. También puedes ajustar el tamaño en Paint si usas Windows, o en Photopea si no dispones de un software específico.
Guardar la imagen optimizada para Web
Una vez hayas ajustado el tamaño de la imagen, si usas Photoshop, la puedes guardar optimizada para web, lo cual te permitirá reducir al máximo el peso de las imágenes sin perder calidad ni reducir su tamaño.
Esto lo puedes hacer eligiendo en el menú principal Archivo > Exportar > Guardar para web (heredado), y después eligiendo, idealmente el formato JPG (PNG siempre tendrá un peso superior), dejando marcada la opción Optimizado, y eligiendo la calidad de imagen Muy Alta, Alta o Mediana del desplegable (sin perder más del 70% de la calidad de imagen). Abajo a la izquierda podemos ver cuantos KB pesará finalmente la imagen para saber si es el peso adecuado para nuestra web, el cual suele ser de no más de 100 KB.
Este artículo es el segundo de nuestra serie de tres partes dedicada a las Mejores Prácticas de Gestión de Contenidos. Puedes leer el primer artículo aquí y el tercero artículo aquí.
Optimizar la imagen sin un software específico
Si quieres optimizar la imagen sin pasar por Photoshop, puedes usar herramientas como squoosh.app o TinyPNG.
Carga de imágenes para el posicionamiento web (en Modyo)
Cuando cargamos las imágenes en una página web, a parte de tener el tamaño correcto y optimizarlas para que su peso no afecte a la velocidad de carga de la página o la app, también debemos tener en cuenta el nombre del archivo, el texto alternativo que va a aparecer en la etiqueta “alt” que la acompañe, e, idealmente, su descripción.
En Modyo estos recursos (assets o archivos) se gestionan en el Gestor de Archivos, donde las imágenes se cargan ya optimizadas idealmente con un nombre corto pero suficientemente descriptivo para ser localizadas tanto en este gestor como en el buscador de imágenes de los motores de búsqueda como Google. En el Gestor de Archivos, podremos definir el texto alternativo y una descripción.
Cómo medir la velocidad de carga (o performance) de una página web
Como resultado de todos los pasos realizados anteriormente, la carga de imágenes no debería afectar a la velocidad de carga de la página o la app, o el producto digital que estamos gestionando. Para comprobar que la performance (velocidad de carga) no se ha visto afectada, podemos usar Lighthouse, de Google Developers, así como otras extensiones o herramientas.
En caso de usar Lighthouse, debemos hacer un click derecho encima de la página a analizar, seleccionar Inspeccionar (o Inspect, en inglés), y en la barra que aparece abajo o a un lado de la pantalla, seleccionamos Lighthouse, elegimos las opciones que deseamos inspeccionar, en Desktop o en Mobile, y presionamos en Generate Report para obtener la puntuación en los diversos ítems relacionados con la vista analizada (Performance, Accessibility, Best Practices, SEO)
Este artículo es el primero de nuestra serie de tres partes dedicada a las Mejores Prácticas de Gestión de Contenidos. Puedes leer el segundo artículo aquí y el tercero artículo aquí.
Foto por Jason Leung en Unsplash
