Muchas personas hacen fotos de gran calidad con sus cámaras o teléfonos móvil, y quieren publicarlas sin optimizarlas adecuadamente, lo que causa lentitud en sus páginas web.
Si tienes tu sitio web autogestionable (blog, tienda online, aplicación web programada a medida, etc), debes saber que necesitas procesar las imágenes que deseas publicar en tus páginas web. En To Web or Not to Web te enseñamos a hacerlo:
Los navegadores web admiten varios formatos de imágenes, definidas por la extensión del archivo en el que se almacenan:
No debes usar ningún otro tipo de formato de imágenes, ya que no serán visibles dentro de tus páginas web.
Las más usadas en Internet son las JPG, PNG y GIF, todas ellas de tipo bitmap (mapa de bits), que quiere decir que están compuestas de una matriz de miles o millones de puntos (píxeles) de colores, a modo de mosaico.
Cuando ampliamos una imagen bitmap más allá de su tamaño original, pierde calidad (se "pixeliza"), porque debe "inventar" los nuevos píxeles necesarios para llenar el espacio adicional.
Las imágenes vectoriales, en cambio, vienen definidas por una descripción geométrica de cada uno de los objetos que la componen, por ejemplo, círculos, rectángulos, textos, etc. De este modo, todas las características (color de fondo y de borde, ancho, alto, inclinación, transparencia, ?) de cada una de las figuras puede ser modificada de modo independiente. Y pueden ser ampliadas tanto como sea necesario sin pérdida de calidad.
Las imágenes grandes sin optimizar ocupan mucho espacio en Kb (e incluso Mb), por lo que tardan más en ser transferidas desde Internet a tu ordenador.
Las fotografías realizadas con una cámara digital de 6 Mpx (megapíxeles = millones de píxeles) tienen por ejemplo 3.000 píxeles de ancho por 2.000 de alto, lo que es mucho más que la resolución (nº de píxeles) de una pantalla de ordenador, que hoy en día en su mayoría suelen tener entre 1200 y 1920 píxeles de ancho.
Esto quiere decir que la imagen ha de ser reducida en pantalla (quitar zoom) para verse en su totalidad. Y en tablets o teléfonos móviles, con pantallas de menor tamaño y resolución, el volumen de píxeles sobrantes es aún mayor.
Todos esos píxeles desperdiciados incrementan innecesariamente el tamaño de archivo de la imagen, y por tanto, causan un deterioro de la velocidad de carga de la página, produciendo abandonos de sus visitantes.
Además, las técnicas de compresión de archivos JPG permiten reducir aún más el tamaño en Kb de la imagen sin perder calidad aparente.
El tiempo de carga de una página web depende de la suma de los tiempos de todos los archivos que incluye (HTML, JPG, PNG, CSS, JS, etc), por lo que reduciendo todas las imágenes usadas en la página, podemos reducir considerablemente el tiempo que tarda en visualizarse completamente.
Google valora especialmente la velocidad de carga de las páginas web, por lo que mejorará tu posicionamiento web SEO si optimizas tus imágenes.
No es necesario disponer de un programa comercial profesional de retoque fotográfico como PhotoShop para optimizar tus imágenes. Ni siquierea es necesario instalar en tu ordenador una aplicación gratuita, aunque muy potente, como GIMP.
Servicios online como https://pixlr.com/editor/, creado por Autodesk, el fabricante del famoso AutoCAD, te permitirán retocar tus fotografías con numerosas herramientas, y guardarlas optimizadas en el formato deseado.
Además, es gratuito y está en español, por lo que no necesitas conocer el idioma de Shakespeare ni rascarte el bolsillo para aprovechar las ventajas de este servicio. Sólo necesitas un navegador web que soporte Flash, y una conexión a Internet.
Con Pixlr Editor, primero cargaremos la imagen con el menú "Archivo-Abrir Imagen". Después, si es necesario, la recortaremos para mejorar el encuadre, con la herramienta "Recortar".
A continuación, con el menú "Imagen-Tamaño de Imagen", reduciremos su tamaño a las medidas adecuadas. Por ejemplo, 800 píxeles de ancho (el alto se calculará automáticamente para conservar las proporciones):
Y por último, elegiremos el menú "Archivo-Guardar", donde elegiremos el formato adecuado (para fotos será normalmente el JPG), ajustaremos el nivel de calidad (el valor 60 suele ofrecer buenos resultados), y el programa nos mostrará el tamaño final en Kb.
Pulsando el botón "Ok", elegiremos la carpeta y el nombre de archivo bajo el que queremos almacenar la fotografía ya optimizada.
En la foto que hemos usado como prueba, de 1.474 Kb hemos pasado a sólo 58 Kb, una mejora muy sustancial, que acelerará nuestro sitio web sin perder calidad visible.
Y ya está, ya puedes subir tu imagen a tu página web con todas las ventajas.
Fernando Sánchez Gómez
Diseño Web Global