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.
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.
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).
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).
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.
¡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.
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.
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!
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!
Gracias Sabrina 🙂
He editado el post con una herramienta para que podáis medir vuestro post. Espero te sirva!!
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!
Claro Arancha, puedes ir cambiando e implementando poco a poco, ya verás que los resultados merecen la pena 🙂
Gracias por el post! muy útil! si no tenemos photoshop, con que otro programa podemos hacerlo?
muchas gracias 🙂
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 🙂
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
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!
Y si no tengo Photoshop? Y utilizo Mac?
Muchas gracias. Muy interesante el post.
Alejandra
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.
Muy útil, lo tendremos en cuenta para futuras fotos en los posts!
Besitos!
MUY interesante. Por cierto, ¿dónde puedo averiguar la medida de mi blog? Gracias!
Me encanta vuestro blog y todos vuestros tutoriales y consejos.
Besos y gracias!
Muchísimas gracias Carla, nos alegramos te guste y te sea útil 🙂
Muchísimas gracias, estoy empezando en esto y me ha resultado de gran utilidad.
Muchas gracias por compartir este artículo sobre la optimización de las imágenes. Excelentes consejos y explicaciones para llevarlo a cabo
¡Gracias por los consejos! Estoy creando mi primer sitio y aprendiendo en el proceso de creación. Ahora, para mí, la cuestión de las imágenes se ha vuelto más clara.