Sí, tienes una cámara réflex o un smartphone de última generación que hace fotos de gran calidad, pero si la publicas sin optimizarlas antes, tus páginas web se volverán lentas, y tus visitantes huirán.
Si gestionas determinados CMS (webs autogestionables como blog, tienda online, aplicación web programada a medida, etc), necesitas procesar tus imágenes antes de publicarlas en tus páginas web. En Mundo web te enseñamos a hacerlo:
¿Qué tipo de imágenes puedo publicar en mi web?
Los programas con los que visitas páginas web (navegadores) son capaces de mostrar diversos formatos de imágenes, que podemos distinguir por la extensión del archivo:
- : el más usado, almacena fotografías u otras imágenes con amplia variedad de colores. Reduce el tamaño del archivo mediante un sistema de compresión con pérdidas. No admite píxeles transparentes.
- : conveniente para fotografías que no deban perder nada de calidad, aunque su tamaño en kilobytes resulta mayor, o que tengan zonas transparentes. La variedad PNG-8 permite mayor ahorro en imágenes con menos de 256 colores.
- : sólo para imágenes con menos de 256 colores, como dibujos o esquemas. Admite transparencia y animación (una sucesión de fotogramas).
- : imágenes vectoriales, creadas con un programa de dibujo vectorial como Freehand, Illustrator, Corel Draw, o el gratuito InkScape.
No debes utilizar ningún otro formato de imágenes, porque no serán visibles en tus páginas web.
Imágenes bitmap o vectoriales
En Internet son los formatos más usados: JPG, PNG y GIF, todas ellas de tipo bitmap (mapa de bits), es decir, que están formadas por una cuadrícula de miles o millones de puntos (píxeles) de colores, como un mosaico.
Al ampliar una imagen bitmap por encima de su tamaño original, pierde calidad (decimos que “se pixeliza”), al tener que “inventarse” los nuevos píxeles necesarios para ocupar el espacio adicional.
Por otro lado, las imágenes vectoriales, se almacenan mediante una descripción geométrica de cada uno de los objetos que la forman, por ejemplo, líneas, círculos, rectángulos, textos, etc. Así, todas las características de cada una de las figuras (posición, color de fondo y de borde, ancho, alto, giro, inclinación, transparencia, …) puede ser cambiada independientemente, sin afectar al resto de elementos. Y podemos ampliarlas lo que deseemos sin perder su calidad.
¿Por qué hay que optimizar las imágenes de una página web?
Las imágenes grandes sin optimizar ocupan mucho espacio en Kb (de hecho, llegan a uno o varios Mb), lo que provoca gran lentitud en su descarga desde Internet a tu ordenador.
Por ejemplo, si hacemos fotos con una cámara digital de 6 Mpx (megapíxeles = millones de píxeles) pueden tener 3.000 píxeles de ancho por 2.000 de alto, lo que es mucho mayor que la resolución (nº de píxeles) de una pantalla de ordenador, que actualmente oscilan entre 1200 y 1920 píxeles de ancho.
Así pues, la imagen debe ser reducida en pantalla (es como quitarle zoom) para mostrarse completa, sin recortar. En dispositivos que incorporan pantallas de menor tamaño y resolución, como tablets o teléfonos móviles, sobran muchos más píxeles.
Toda esa información desperdiciada aumentará innecesariamente el tamaño de archivo de la imagen, y por tanto, generan una reducción de la velocidad de carga de la página, provocando que sus visitantes se aburran de esperar y vayan a ver otros sitios web más rápidos.
Las técnicas de compresión usadas en los archivos JPG reducen aún más el tamaño en Kb de la imagen, sin que la pérdida de calidad sea apreciable.
El tiempo de carga de una página web depende de la suma de los tiempos de descarga de cada uno de los archivos que incluye (ficheros HTML, JPG, PNG, CSS, JS, etc). Si reducimos todas las imágenes usadas en la página, reduciremos notablemente el tiempo que tarda en descargarse y mostrarse la página completa.
Google valora mucho la velocidad de carga de las páginas web, por lo que mejorará tu posicionamiento web SEO cuando optimices tus imágenes.
¿Con qué programa puedo optimizar las fotos web?
Para optimizar tus imágenes no es preciso adquirir un programa comercial profesional de retoque fotográfico como PhotoShop. Tampoco es imprescindible instalar en tu ordenador una aplicación gratuita tan potente como GIMP.
Existen diversos servicios online como https://pixlr.com/editor/, desarrollado por Autodesk, el fabricante del popular AutoCAD, que te facilitan retocar tus fotografías con numerosas funciones, incluyendo las que te permiten guardarlas optimizadas y en el formato deseado.
Para usar esta aplicación online gratuita y en español, sólo necesitas un navegador web que soporte Flash (la mayoría), y una conexión a Internet. No debes gastar un euro ni desempolvar el diccionario de inglés.
¿Cómo optimizar las fotos de mis páginas web?
Explicaremos el proceso con Pixlr Editor, pero si usas otra aplicación online o un programa instalado en tu ordenador, los pasos serán los mismos, aunque los menús y las pantallas puedan ser diferentes.
Primero cargaremos la imagen eligiendo el menú “Archivo-Abrir Imagen”. Posteriormente, si necesitamos mejorar el encuadre, la recortaremos con la herramienta “Recortar”.
En el menú “Imagen-Tamaño de Imagen”, reduciremos su tamaño a las medidas adecuadas. Por ejemplo, 800 píxeles de ancho (el alto será ajustado automáticamente para mantener las proporciones).
Finalmente, usaremos el menú “Archivo-Guardar”, donde indicaremos el formato adecuado (para fotos será normalmente el JPG), ajustaremos el nivel de calidad (el valor 60 suele ofrecer buenos resultados); el programa calculará el tamaño final en Kb, que dependerá del nivel de calidad elegido. Cuanto mayor sea la calidad, menor será la compresión, y por tanto, se ahorrará menos Kb y el archivo será más grande.
Haciendo clic en el botón “Ok”, seleccionaremos la carpeta y el nombre de archivo en el que queremos almacenar la fotografía ya optimizada.
En esta prueba, hemos usado una foto de 1.474 Kb que hemos dejado en sólo 58 Kb, una mejora muy importante, que acelerará nuestro sitio web sin perder calidad.
Una vez optimizada la imagen ya puedes subirla a tu página web con todas las ventajas.
Fernando Sánchez Gómez
