Optimizar las imágenes para tu plataforma

Optimizar las imágenes para tu plataforma

El rendimiento puede verse afectado por diversos factores, uno de ellos (y de los más importantes) es la carga de contenido. Como ya sabrás, en tu plataforma Foxize Cloud puedes personalizar tu escuela con imágenes que representen tu look and feel: en la página principal, en los banners de destacados, en los cursos… Si estas imágenes son de gran tamaño y peso, tardarán en cargarse, especialmente para aquellas personas que tengan una conexión a internet lenta, y eso afectará en la experiencia de usuario. 

 

¿Te imaginas entrar en una escuela online y encontrarte con la imagen de la izquierda? Más de un 50% de usuarios abandonarían la página pasados los 3 segundos por esta razón. 

Piensa que la calidad de las imágenes también afecta a la calidad de tu página web. Tener imágenes pixeladas o de baja calidad retransmite poca profesionalidad y provoca rechazo a los usuarios. Por otro lado, la velocidad de carga también afecta al SEO, posicionamiento de tu web y el indexado de imágenes en los buscadores como Google.

Si no quieres que esto pase, te recomendamos optimizar tus imágenes para que tu plataforma tenga un buen rendimiento. A continuación, te damos una serie de consejos y herramientas para ello.

 

Formato imagen 

  • GIF: este formato está casi obsoleto, ya que pesa mucho. Solo se usa para imágenes animadas.
  • PNG: mantiene transparencias como el formato GIF y no comprime las imágenes, por lo que tiene mayor calidad, aunque pueda pesar más. PNG va bien para logos o iconos. Tiene la opción de entrelazado, que hará que la imagen cargue por diferentes fases en vez de a trompicones (como hemos visto en el gif anterior).
  • JPG: este formato comprime las imágenes para que pesen menos, por lo que puede tener pérdida de calidad. En algunos casos podemos elegir el nivel de compresión. Es ideal para fotografías o imágenes con muchos colores. También tiene la opción de progresiva, que hará que en la web cargue por capas de diferente calidad, en vez de a trozos.

 

Tamaño imagen 

  • Cabecera de la web en home: la imagen es responsive por lo que será necesario un tamaño grande de imagen pero optimizada para no perjudicar al tiempo de carga de la página. En el caso que no te guste como se muestra en pantallas mobile, tienes la opción de añadir una imagen diferente.
  • Banner de la home con login: las imágenes para destacados en desktop deben de ser 750px ancho x 330px alto. En este caso, las imágenes no son responsive, por lo que deberás subir una versión para mobile con tamaño 346px ancho x 152px alto.
  • Testimoniales en home: la imagen es de 1.140px ancho x 450px alto.
  • Bloque temáticas de los cursos en módulo de la home: este espacio está pensado para subir imágenes tipo iconos que representen las temáticas de los cursos que se van a ofrecer. El tamaño de las imágenes es de 90px x 90px.
  • Cursos: el tamaño de las imágenes de cursos es de 262px ancho x 167px alto.

 

Programas y herramientas para optimizar imágenes

En general, para mayor rendimiento de nuestra plataforma de formación, las imágenes que subamos a nuestra web deberían tener un peso por debajo de 1MB. Debemos buscar un equilibrio entre el tamaño de las imágenes y la calidad.

Podemos optimizar nuestras imágenes en programas de edición como Photoshop o su alternativa gratuita Gimp, que nos ofrecen la opción de guardado para la web. Esto nos permitirá editar una serie de características para optimizar la máximo las imágenes. 

También puedes usar programas y servicios web específicamente creados para optimizar imágenes para la web. Estas son nuestras recomendaciones:

  • Compressor.io: reduce el peso de la imagen sin reducir su calidad. Soporta cuatro tipos de formato: JPEG, PNG, GIF y SVG. Permite optimizar las imágenes con pérdida o sin pérdida de calidad (solo para JPEG y PNG esta última opción). Tiene un previsualizador muy útil para poder comparar el antes y el después de la compresión.
  • Image Resizer: esta web te permite comprimir JPEG y PNG para reducir su peso. Las opciones de compresión son limitadas, pero la web también ofrece otros servicios gratuitos para editar tus imágenes, como escalado y recorte.
  • FileOptimizer: programa open source y gratuito para windows que permite optimizar una gran variedad de formatos.
  • ImageOptim: la alternativa al FileOptimizer para usuarios de mac, gratuita y open source. Comprime imágenes sin pérdida de calidad, eliminando metadatos.
  • Trimageprograma open source gratuito para usuarios de Linux y Ubuntu, capaz de optimizar imágenes PNG y JPEG.
    • Related Articles

    • Cómo optimizar el SEO de tu plataforma de formación

      Tienes tu plataforma de formación ya lista, pero la gente no va a llegar si no haces difusión de ella. Ya hemos visto diferentes maneras de conseguir tráfico y nuevos usuarios a través de estrategias de marketing y publicidad, pero hoy hablaremos del ...
    • Tamaño de las imágenes

      Cabecera de la web en home: la imagen es responsive, por lo que será necesario un tamaño grande de imagen pero optimizada para no perjudicar al tiempo de carga de la página. En el caso que no te guste como se muestra en pantallas mobile, tienes la ...
    • Configura la opción multiidioma para tu plataforma

      ¿Quieres ampliar tu negocio de formación a otros países? Ahora con la funcionalidad de multiidioma ya es posible. Con esta nueva funcionalidad de Foxize Cloud podrás ofrecer tu plataforma de formación en diferentes idiomas, tantos como sean ...
    • Cómo optimizar tus vídeos elearning para tu escuela online

      Hasta ahora, se podían subir un máximo de 750 MB por vídeo, pero recientemente hemos actualizado los MB de subida hasta 1’5GB por vídeo elearning. Evidentemente, esto permitirá subir vídeos de mayor calidad y mayor duración, aunque siempre ...
    • Las 10 mejores herramientas para hacer Webinars

      ¿Te imaginas que tus cursos presenciales no están ligados a un espacio fijo? ¿Qué personas alrededor del mundo puedan participar en tus sesiones? ¿Buscas que tus cursos online sean más interactivos y participativos?  Los webinars son la solución que ...