Cómo optimizar imágenes en un curso de e-learning
Existe una máxima en Internet que dice: “Imágenes pesadas = sitio web lento”. Una plataforma de e-learning puede contener en sus páginas varias imágenes: desde los pequeños iconos que forman parte del diseño, hasta las imágenes que acompañan al contenido o secciones.
Uno de los factores que afecta a la velocidad de carga de una página web es, precisamente, el peso de las imágenes que esa página debe cargar para mostrar todo el contenido al usuario.
Por ello, al subir imágenes a un curso, bien sea en la descripción del mismo o en los recursos y actividades, es importante que estos archivos estén optimizados (es decir, su peso sea el menor posible) a fin de agilizar su descarga y visualización por Internet.
¿Qué factores tener en cuenta para optimizar el tamaño de un archivo de imagen?
Tres son los factores que nos ayudan en esta tarea: la dimensión de la imagen, el formato y la resolución. Veamos cada uno de ellos.
1- Formato JPG – PNG:
El formato JPG es Ideal para fotografías con detalles, degradados y muchos colores. Es un formato de compresión con pérdidas, por lo tanto suele conseguir menor peso en relación a otros.
El formato PNG permite fondo transparente y es ideal para imágenes planas o con grandes espacios blancos, como capturas de pantalla, logotipos, etc.PNG es un formato de imagen sin pérdidas. Si bien no reduce tanto el tamaño como el JPG, la calidad siempre será mayor.
2- Dimensión de la imagen
Es importante que las imágenes que subamos a la plataforma se guarden con las dimensiones y resolución adecuadas para publicarlas en la web.
Si bien la opción de “Insertar imagen” del editor de la plataforma nos permite redimensionarla (cambiarle el tamaño de ancho y alto) una vez la hayamos subido, conviene utilizar un programa de edición gráfica (Photoshop, Gimp, Fireworks, etc.) para definir las dimensiones concretas de la imagen antes de insertarla en la página web. ¿Por qué? Veamos un ejemplo:
Imaginemos que queremos publicar junto al texto de una página la imagen “Crisantelmo.jpg”, cuyas medidas originales son de 1024 x 768px y pesa 858 kb. Si subimos la imagen y luego la redimensionamos con el editor a la medida que queremos, por ejemplo a 200 x 150px, al cargar la página la imagen seguiría pesando 858 KB. Es decir, redujimos el tamaño de la imagen pero no el peso del archivo.
Editor de la plataforma, opción para redimensionar la imagen
Sin embargo, si subimos la imagen con las dimensiones que vamos a usar (200 x 150px), reduciríamos el peso del archivo a 34kb, manteniendo una calidad alta para web. ¡Estaríamos ahorrando 824 Kb de descarga! Esto se traduce, y es lo importante, en una reducción del tiempo de carga de la página al acceder al contenido.
Ejemplo de relación de tamaños de la imagen.
3- Resolución
La resolución indica la cantidad de información contenida en pixeles en una imagen. La resolución estándar para web es de 72 ppi. Muchos programas de edición de imágenes ya incorporan la opción de guardar para web con esta resolución por defecto.
En definitiva, si guardas la imagen en el formato adecuado, ajustas su dimensión y seleccionas una resolución para web, entonces conseguirás disminuir el peso del archivo, contribuyendo notoriamente a mejorar la velocidad de carga de las páginas.
Artículo tomado de: http://www.e-abclearning.com/notas-de-actualidad/33-2014/112-como-optimizar-imagenes-en-un-curso-de-e-learning-
