Si tienes un sitio web y no te estás preocupando del tamaño de tus imágenes, este artículo te interesa. En él vamos a decir por qué deberías preocuparte por optimizar las imágenes de tu web, y cómo hacerlo de una manera sencilla.
Son dos los motivos por los que no deberías usar imágenes no optimizadas:
- Velocidad: si tus imágenes son grandes, tu sitio web tardará más en cargarse, y ningún usuario quiere perder su valioso tiempo esperando a que se cargue ninguna web. Muchas veces preferimos buscar en google la siguiente mejor opción (que de todos los temas hay cientos de páginas)
- Visibilidad: ademas, si tu web es muy pesada, el señor Google sabe que eso hará que cargue más despacio, que no es lo que los usuarios quieren, y por eso no ofrecerá tu página de las primeras. En pocas palabras, no está optimizada para SEO.
Así que resumiendo, si no quieres perder visitas en tu web (o superar el límite de almacenamiento de tu hosting) sigue estos consejos.
Hay dos parámetros que debemos optimizar en cada imagen: las dimensiones y el tamaño.
¿Cómo conocer el tamaño y dimensiones de nuestras imágenes?
Cómo ver las propiedades de una imagen en Windows
Para conocer el tamaño y las dimensiones de una imagen en Windows, haz clic derecho sobre la imagen que quieres subir a tu web y elige Propiedades / pestaña Detalles. Fíjate en las dimensiones y en el tamaño.
Cómo ver las propiedades de una imagen en macOS
En macOS el proceso es muy similar, haz clic derecho sobre la imagen y elige Obtener información. En la ventana que aparece podrás ver el tamaño y la resolución de la imagen
Ajustando las dimensiones de una imagen
Las dimensiones de la foto del ejemplo en Windows son 3751 x 5626 píxeles. Nuestros móviles, cámaras, o las imágenes que podemos encontrar en bancos de imágenes, son de muy alta calidad, y con muchísima definición lo que las convierte en muy pesadas. Muchas veces son imágenes que si las imprimiésemos en su tamaño original, podríamos empapelar una pared con cada foto.
Sin embargo para nuestra web generalmente nunca necesitaremos más de 1920 píxeles de ancho (ya que las medidas máximas de una pantalla tipo Full HD, las mas comunes, son 1920 x 1080). Así que con tener nuestra imagen a 1920 píxeles de ancho ( y el alto en proporción, no queremos que la imagen se deforme) debería de ser suficiente para una imagen que ocupase todo el ancho del navegador.
¿Cómo se hace esto? Para que no tengas la excusa de “yo no tengo ese programa” o “eso es muy difícil” te diré que incluso con el Paint de toda la vida lo puedes hacer. Sí, ¡has leído bien!
Cómo redimensionar una imagen: en Windows | en macOS
Cómo modificar las dimensiones de una imagen en Windows
1. Abre tu foto con Paint:
2. Clic en Cambiar tamaño:
3. Selecciona Píxeles y mantén seleccionado Mantener relación de aspecto:
4. En horizontal escribe 1920 (o incluso una medida menor si sabes que tu imagen no va a ocupar todo el ancho de la página):
5. Guarda, (o guarda como, si no quieres perder la original), y listo.
Si comparamos los ajustes de mis dos imágenes, la original, y tras hacer este paso, vemos que la dimensión, el ancho, es lo que he modificado, y el tamaño ha reducido un poquito, de 1,95 MB, a 1,52 MB. Vamos al siguiente paso, ajustar el tamaño.
Cómo modificar las dimensiones de una imagen en macOS
En macOS el proceso es más sencillo todavía gracias a la aplicación Vista Previa, que al igual que Paint en Windows viene incluida en el Sistema Operativo, y es una auténtica navaja suiza paratodo tipo de tareas relacionadas con imágenes y documentos PDF.
1. Abre la imagen con Vista Previa (normalmente es la aplicación por defecto para abrir imágenes).
2. Selecciona Herramientas / Ajustar tamaño…
3. En Anchura escribimos 1920 (o incluso una medida menor si sabes que tu imagen no va a ocupar todo el ancho de la página). Asegurate de que esté marcada la opción Ajustar tamaño proporcionalmente para que el alto de la imagen se ajuste automáticamente).
Ahora sólo tenemos que pulsar en Aceptar para guardar la imagen con su nuevo tamaño. Además, en Tamaño resultante podemos ver el tamaño anterior de la imagen y el nuevo tamaño que tendrá.
¡Ojo! Una vez pulsemos en Aceptar se modificará la imagen, por lo que perderemos el tamaño original. Si queremos mantener una copia de la imagen original antes de modificarla podemos duplicarla haciendo clic con el botón derecho y seleccionando Duplicar antes de modificarla.
Reduciendo el tamaño de una imagen
Al ajustar las dimensiones de una imagen reduciremos su tamaño (el espacio que ocupa en el disco) pero aun así siempre deberemos de asegurarnos de que el tamaño de las imágenes sea mínimo, aunque sin que la calidad se resienta demasiado.
Como regla general, cada imagen que vayamos a subir no debería pesar más de 300 KB (y preferiblemente menos) si tiene 1920px de ancho. Aunque el tema de la compresión y los tamaños de imagen es complejo a nivel técnico, hay herramientas que nos facilitan la vida.
La forma más facil de reducir el tamaño de una imagen: tinypng
Cómo se hace esto? Hay innumerables programas y herramientas online que sirven para esto, pero solo te hablaré de la que suelo utilizar yo: tinypng.com, con la que puedes reducir el tamaño de imágenes de máximo de 5MB cada una, de los formatos jpg o png.
Hay versión Pro que aumenta el tamaño máximo de cada imagen y permite optimizar más de 20 imágenes de una sola vez, pero con la versión gratuita es suficiente.
También hay un plugin para WordPress que optimiza automáticamente las imágenes al cargarlas en tu web. Pero yo prefiero optimizarlas antes de subirlas, para tener más control del proceso.
Usar tinypng es muy sencillo.
1. Entra en tinypng.com.
2. Arrastra la foto (la que ya has reducido de dimensiones).
3. Tinypng hará su magia, tú solo dale a descargar (en esta pantalla ya ves el tamaño de la imagen que subiste, y de la que te vas a descargar, ¡de 1,6 MB a 217 KB!).
Espero que te haya servido, este ha sido un tutorial rápido para aquellas personas que tienen una web pero no manejan demasiado la tecnología, ¡ha pretendido ser muy básico, rápido y sencillo!
Por regla general es mejor usar JPG, ya que las imágenes ocupan menos tamaño, a cambio de una calidad un poco menor. Si la imagen tiene zonas transparentes o necesitas que no no pierda nada de calidad (como un logo o un icono), elige PNG. PNG guarda transparencias, JPG no.
Resumiendo, utilizaremos PNG para el logo, diseños digitales o iconos de nuestra web. Para el resto de imágenes, normalmente fotografías, usaremos JPG.