CÓMO OPTIMIZAR LAS IMÁGENES PARA TU WEB

Lo que vas a aprender en esta entrada va a suponer un antes y un después para tu blog y tu web, créeme. Sobre todo en lo que respecta a la velocidad de carga de estos.

¿Alguna vez te ha ocurrido que has entrado en una página web, o en un blog, y te has ido aburrido de esperar que se carguen todas las imágenes? Te aseguro que, personalmente, me ha pasado más de una vez.

Y como no quiero que a tus lectores y clientes les suceda lo mismo, he preparado este tutorial para que sepas cómo optimizar las imágenes.

Optimizar las imágenes

Como te he explicado, es un engorro querer entrar en una web y tener que esperar un buen rato a que todos los elementos estén cargados para poder empezar a navegar por ella.

La mayoría de los usuarios, entre los que me incluyo, se van antes de esperar a que todo se cargue (si el tiempo de espera es demasiado largo); con lo que tu web pierde visitas y posibles clientes.

Tener un buen tiempo de carga de tu página web o blog, no sólo hará que tus clientes se sientan más atraïdos y no tengan necesidad de abandonar la página, sino que además, consigues un mejor posicionamiento en Google. Y eso es muy importante.

Por ello es esencial que, antes de subir las imágenes a tu web, las optimices para ésta. Optimizar es, simplemente, subir las imágenes al tamaño adecuado de tu web, para que no pesen demasiado y así se reduzca su tiempo de carga.

Es decir, las imágenes que haces con tu cámara, o incluso con tu teléfono móvil, suelen tener un tamaño en píxeles muy grande. Mucho más grande que el ancho de tu página web. Así que, si las subes directamente sin ajustarlas previamente a dicho ancho, estás añadiendo peso (y por tanto, tiempo) a la carga de tu web.

Ahora que ya sabes en qué consiste la optimización de imágenes, y por qué la necesitas, empezamos el tutorial.

PASO 1

Lo primero que debes saber es el ancho de tu blog. En el caso de nuestro blog, son 650px. Fíjate en cuál es el tuyo y apúntalo, porque es la clave para una buena optimización de imágenes.

Optimizar las imágenes tamaños

PASO 2

Selecciona la imagen que quieres subir a tu web, y ábrela en Photoshop. Una vez lo tengas, ve a Imagen –> Tamaño de Imagen.

Verás que se abre una ventana flotante. Pon atención porque ahora viene lo importante.

Fíjate en la resolución que tiene tu imagen. La resolución recomendada para imágenes web oscila entre los 75 y los 150. Así que, si como en mi caso, la tienes a 300, ponte sobre esa casilla y escribe 150.

Seguramente, al haber cambiado la resolución ya te habrá variado el ancho de la imagen. Aún así, debes asegurarte que la imagen tiene el ancho que tú quieres. Por lo que en el recuadro en el que tienes la opción de cambiarlo, escribe los píxeles de ancho que tenga tu blog.  Una vez lo hayas hecho, ya puedes darle al OK para cerrar la ventana.

En esta imagen te dejo marcado en rojos los campos del ancho (width) y la resolución (resolution).

Optimizar las imágenes photoshop

PASO 3

Ahora ya tienes la imagen al tamaño que te interesa. Uno de los principales errores de las imágenes para web es que no son guardadas como tal, sino que se guardan “al tun-tún” y eso hace que les añadamos un peso innecesario.

Así que, para guardar tu imagen, sigue esta ruta: Archivo → Guardar para web. Nuevamente, se abrirá una ventanita con muchas opciones.

Llegados a este punto puedes elegir entre varias opciones para guardar tu imagen. Las más comunes son estas:

  • JPEG: Es el formato más común de compresión de imágenes. Se usa siempre para fotografías, porque las comprime muy bien sin perder su calidad.
  • PNG: Es ideal para cuando tenemos iconos, logos, o vectores sin fondo. Estos archivos pesan un poquito más, pero son muy necesarios cuando queremos guardar algo “con fondo transparente”.

En este caso, como estás guardando fotografías, vas a seleccionar la opción JPEG, y dentro de ella puedes jugar con la calidad de ésta. Cuanta más calidad tenga, más te pesará (aunque ya no tanto como te pesaba en un inicio).

Optimizar las imágenes photoshop 2

Aquí te dejo un ejemplo en el que puedes comparar cómo varía la misma imagen guardada con distintas resoluciones.

En cuanto hayas decidido con qué calidad quieres guardarla, haz click en “Guardar” y selecciona dónde quieres guardarla.

Optimizar las imágenes comparativa

¡Y ya está! Así de simple y rápido es hacer que las imágenes de tu blog carguen más rápido, haciendo que tus usuarios no tengan que esperar para poder verlas, y sin perder calidad. Fantástico, ¿verdad?

¿Alguna vez te has parado a pensar en la importancia que tienen estos pequeños detalles para tu blog o web? Seguro que a partir de ahora lo tienes mucho más en cuenta, y empezar por la optimización de imágenes es un buen punto de partida.

Recuerda que el tiempo es oro, e invertir unos segundos en ajustar tus imágenes al tamaño que les corresponde en tu web, a la larga puede suponerte una gran ventaja que tus lectores agradecerán.

* Editado 

Para averiguar la medida del ancho de tu post independientemente de la plataforma que utilices, puedes usar una extensión de Chrome, llamada Page Ruler, que funciona a modo de regla.

De forma que, al instalarla, podrás medir justo lo que ocupa tu post. De todas formas, según la plantilla que utilices, normalmente puedes escoger el ancho, por lo que deberías tenerlo personalizado a tu gusto y este problema desaparece. 

16 comentarios
  1. Anna 10 marzo, 2016

    Me ha encantado el post, yo si que cambio la resolución y le bajo la calidad lo que no había tenido en cuenta es el ancho del blog, ¿dónde puedo saber cual es? Muchas gracias.

    Responder
    • Laura 17 marzo, 2016

      Mil gracias Anna 🙂
      Ya es un gran paso para no saturar el blog. He editado el post, al final de todo puedes ver una herramienta que espero te funcione para saber el ancho de tu blog.

      ¡Un abrazo!

      Responder
  2. Sabrina 10 marzo, 2016

    Buenas! Un post muy útil! La única duda que me ha quedado es cómo saber cuánto mide mi blog? Hay alguna herramienta en wordpress para averiguarlo? Muchas gracias!

    Responder
    • Laura 17 marzo, 2016

      Gracias Sabrina 🙂
      He editado el post con una herramienta para que podáis medir vuestro post. Espero te sirva!!

      Responder
  3. arantxa en mi cajón de sastre 10 marzo, 2016

    Gracias por el tutorial. Yo tengo un ancho fjado para las imágenes pero no he tenido el cuenta el del blog, así que ahora me fijaré en eso y pondré el correcto.
    gracias!

    Responder
    • Laura 17 marzo, 2016

      Claro Arancha, puedes ir cambiando e implementando poco a poco, ya verás que los resultados merecen la pena 🙂

      Responder
  4. Cristina 10 marzo, 2016

    Gracias por el post! muy útil! si no tenemos photoshop, con que otro programa podemos hacerlo?

    muchas gracias 🙂

    Responder
    • Laura 17 marzo, 2016

      Hola Cristina,

      Ya he comentado alguna que otra herramienta, como puede ser Canva o Pickmonkey e incluso Power Point. Por aquí también han puesto Picasa. A ver si alguna de estas te sirve 🙂

      Responder
  5. Sil de Fetiches de cartón 10 marzo, 2016

    Hola! Gracias, este como todos los otros post me encanta!!!!
    La variedad de tema siempre es muy atinada y útil
    Pregunta: no tengo PS, no es mi área y es muy caro comprarlo.
    Siempre he usado Picasa y ahora descubrí canva. Puede hacerse esto en esta clase de editores?
    Gracias! Abrazos desde mex

    Responder
    • Laura 17 marzo, 2016

      Hola Sil,
      Me alegro te guste, mil gracias!! La variedad cuesta encontrarla, pero lo intentamos, para que sea del agrado de todos 🙂
      Picasa y Canva te pueden funcionar perfectamente, claro que sí, siempre y cuando puedas marcar la medida del ancho, vía libre al programa que utilices
      Un abrazote!

      Responder
  6. Alejandra 10 marzo, 2016

    Y si no tengo Photoshop? Y utilizo Mac?
    Muchas gracias. Muy interesante el post.
    Alejandra

    Responder
    • Laura 17 marzo, 2016

      Hola Alejandra, gracias a ti 😉
      Photoshop es válido tanto para Mac como PC, yo también utilizo Mac y genial. Pero puedes utilizar otras herramientas online como Pickmonkey, Canva… no se si Power Point, etc.

      Responder
  7. irene 10 marzo, 2016

    Muy útil, lo tendremos en cuenta para futuras fotos en los posts!
    Besitos!

    Responder
  8. Begoña 11 marzo, 2016

    MUY interesante. Por cierto, ¿dónde puedo averiguar la medida de mi blog? Gracias!

    Responder
  9. CARLA 31 marzo, 2016

    Me encanta vuestro blog y todos vuestros tutoriales y consejos.
    Besos y gracias!

    Responder
    • Laura 31 marzo, 2016

      Muchísimas gracias Carla, nos alegramos te guste y te sea útil 🙂

      Responder

Deja tu comentario

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