Optimizar imágenes para páginas web
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:
¿Qué tipo de imágenes puedo publicar en mi web?
Los navegadores web admiten varios formatos de imágenes, definidas por la extensión del archivo en el que se almacenan:
- .JPG: para fotografías y otras imágenes con gran variedad de colores, sin transparencia.
- .PNG: para fotografías que no deban perder nada de calidad, o que tengan píxeles transparentes. El formato PNG-8 es muy indicado para imágenes con pocos colores (menos de 256).
- .GIF: para imágenes con menos de 256 colores. Admite transparencia y animación.
- .SVG: imágenes vectoriales, creadas con un programa de dibujo vectorial como Illustrator, Freehand, Corel Draw, o el gratuito InkScape.
No debes usar ningún otro tipo de formato de imágenes, ya que no serán visibles dentro de tus páginas web.
Imágenes bitmap vs vectoriales
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.
¿Por qué las imágenes de una página web deben ser optimizadas?
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.
¿Qué programa necesito para optimizar las fotos web?
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.
¿Cómo optimizo las fotos de mis páginas web?
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
La empresa Diario de Salamanca S.L, No nos hacemos responsables de ninguna de las informaciones, opiniones y conceptos que se emitan o publiquen, por los columnistas que en su sección de opinión realizan su intervención, así como de la imagen que los mismos envían.
Serán única y exclusivamente responsable el columnista que haga uso de nuestros servicios y enlaces.
La publicación por SALAMANCARTVALDIA de los artículos de opinión no implica la existencia de relación alguna entre nuestra empresa y columnista, como tampoco la aceptación y aprobación por nuestra parte de los contenidos, siendo su el interviniente el único responsable de los mismos.
En este sentido, si tiene conocimiento efectivo de la ilicitud de las opiniones o imágenes utilizadas por alguno de ellos, agradeceremos que nos lo comunique inmediatamente para que procedamos a deshabilitar el enlace de acceso a la misma.