• Ir al contenido principal
  • Home
  • Equipo
  • Web
  • eCommerce
  • Automatizaciones
  • Blog
  • Contacto
ItSerra

ItSerra

Estudio de diseño web y programación

Cómo optimizar las imágenes de tu web

¿Alguna vez te ha pasado…? Seguro que alguna vez te ha pasado, has intentado acceder a una web y pasa una eternidad hasta que se carga. Una de las principales razones por las que ocurre es por la cantidad de imágenes que tiene las web. Si tienes una web es probable que a medida que ha ido pasando el tiempo has notado que la web ya no es tan rápida como al principio. Pero, ¿porqué es importante optimizar las imágenes?

    • Evitar perder usuarios: el tiempo de carga de una web es uno de los principales motivos por los que se pierden usuarios. Supongo que no quieres perderlos ¿verdad?
    • Mejorar el SEO: cuando Google rastrea una web, lo hace durante un tiempo limitado. Si tu web pesa poco, perderá menos tiempo cargando las páginas y por lo tanto podrá rastrear más.

¿Qué formato de imagen usar?

Las imágenes se suelen guardar en dos formatos: PNG y JPEG. Seguro que te estás preguntando cuál es la diferencia.

    • PNG: el formato png se diferencia principalmente del JPEG en el que permite guardar imágenes con el fondo transparente. Otra ventaja que tiene es que se pierde menos calidad que con un JPG.
    • JPEG: comprime más las imágenes que el PNG, pero se pierde calidad.

Si usas iconos en tu web, evita que sean imágenes y utiliza formatos como el SVG. Podrás cambiar su tamaño de forma fácil y sencilla sin perder calidad, con el añadido de aligerar la web ya que pesan menos. Como regla general usa PNG cuando quieras guardar logos o vectores sin fondo y JPEG para el resto.

El tamaño importa

Una de las variables que nos van a hacer que nuestras imágenes pesen más es el tamaño. Intenta ajustar el tamaño de las imágenes al tamaño que es necesario para la web. Por ejemplo, si la imagen es para el post, lo recomendable sería guardarla para que el ancho de la imagen sea el mismo que el del post. De esta forma evitarás tener una imagen más grande de lo necesario y redimensionar las imagen mediante CSS reduciendo así peso de la web. Lo mismo si tienes una sección de portfolio con imágenes. Adecua el tamaño de la imagen al de la web. Para averiguar el ancho del post o del portfolio puedes hacerlo de la siguiente forma: 

Page Ruler

Page ruler es una extensión disponible para Chrome y Firefox que te permitirá saber el tamaño de las imágenes de tu web. Su uso es muy sencillo, vamos a verlo.

Una vez hayas instalado la extensión, selecciona el icono de Page Ruler. Verás que el ratón se convierte en una cruz. Selecciona la imagen para ver sus medidas. En nuestro caso, el ancho es de 780px.

¿Cómo reducir el peso las imágenes?

Una vez ya sabes que existen dos formatos, y que debes reducir la imagen vamos a ello. Ante todo, lo que buscas es tener un balance entre el tamaño de la imagen y la calidad de la misma. Una forma de reducir el tamaño de las imágenes es con programas de edición gráfica como Photoshop o Illustrator.

Photoshop

Si vas a Archivo > Exportar > Guardar para web, ahí te saldrá un menú para optimizar tu imagen En la gran mayoría de los casos usarás las siguientes opciones:

  #1 Formato de la imagen

    • PNG: si queremos el fondo transparente
    • JPEG: para las imágenes.

#2 Calidad: A mayor calidad mayor peso. Veamos las diferencias:

JPEG calidad Baja, 19,57KB

JPEG calidad Mediana, 28,21KB

JPEG Calidad Alta, 62,4KB

JPEG calidad máxima, 274KB

#3 Tamaño: ajusta el ancho de la imagen al ancho de tu web. #4 Progresivo: si ves que la imagen es muy grande y que sigue pesando, guárdala en progresivo. Esto hará que en vez de cargarse de arriba hacia abajo se cargue de peor calidad a mejor.

Illustrator

Si usas illustrator, podrás hacerlo desde Archivo > Guardar para web. Como verás las opciones en el cuadro son las mismas

¡Y ya está! Así de sencillo. Si cada vez que encuentras una imagen para tu web, realizas este sencillo paso evitarás sobrecargar tu web y perder visitas.

No tengo Photoshop/Illustrator

Si no tienes acceso a este tipo de programas puedes usar Canva y crear una imagen con las dimensiones deseadas. Luego la descargas con el formato image for web (JPG) y listo. Si te lías con el tema de los tamaños o prefieres una vía más cómoda si usas WordPress, puedes instalar algún plugin de compresión de imágenes. Pero ten en cuenta que los plugins también cargan tu web, y van a hacer que cada vez vaya más lenta. Te dejo más información aquí.

Interacciones con los lectores

Comentarios

  1. Ismael dice

    octubre 2, 2018 en 7:29 pm

    Me vuelto loco mirando posts de cómo optimizar imágenes en wordpress y no me funcionaba, siempre me salía error porque tengo más de 15.000 imágenes publicadas. Tuve que tirar del servicio de esta web https://wptizers.com/optimizar-imagenes/wordpress para q me lo arreglaran…. pagando. Eso sí, ahora todo lo subo comprimido con el Photoshop después de editarla

    Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

.

  Accepto la política de privacitat

itSerra estudio de programacion
  • Home
  • Equipo
  • Web
  • eCommerce
  • Automatizaciones
  • Blog
  • Contacto

ItSerra @2022

  • / Aviso Legal
  • / Política de cookies
  • / Política de privacidad

Gestionar el consentimiento de las cookies
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Ver preferencias
{title} {title} {title}