Cómo optimizar de manera automática las imágenes de tu web

Apple Podcasts | Google Podcasts | Spotify | Pandora | RSS

Esta semana ha sido muy intensa, adelantado trabajos de varios proyectos web que saldrán a la luz en breve, entregando las tarjetas de visita que diseñamos para la frutería Reme, asistiendo a una conferencia del Coach Pepe Cabello, vamos, sin parar…

Hoy vamos a tratar un tema muy importante que todos los administradores de webs deberían conocer:

Cómo optimizar de manera automática las imágenes de tu web, pero antes…

Demos paso al patrocinador!!!!:

WebEmpresa, hosting especializado en WordPress. Es el hosting que usamos nosotros desde hace tiempo.

En pampua.es/webempresa te dejamos los 13 motivos que tienes contratarlo; échale un vistazo!

Contrata tu hosting con un 20% de descuento ahora mismo usando el cupón que te dejamos en pampua.es/webempresa

PORQUE ES IMPORTANTE OPTIMIZAR LAS IMÁGENES?

Reducir el tamaño y comprimir fotos debería ser una obligación para todo aquel que tenga un sitio web o un blog, puesto que son uno de los elementos que más peso aportan a la web.

También es una de las formas más sencillas de aumentar nuestro PageSpeed. (Test de google para medir la velocidad. Te lo dejo en las notas)

Optimizar las imágenes nos aporta varias ventajas:

• Disminuir el tiempo de carga de tu web.
• Reducir el espacio ocupado en tu servidor.
• Optimizar el consumo de transferencia de tu hosting.
• Mejorar la optimización Seo de tu WordPress. (A google le gustan las páginas que cargan rápido)

Existen 3 pasos que debemos dar para optimizar la carga de las imágenes:

• Reducir el tamaño de las imágenes antes de subirlas a WordPress
• Comprimir imágenes subidas con un plugin en WordPress
• Optimizar la carga de las imágenes publicadas para mejorar la velocidad de carga de una web.

Vamos a verlas en detalle:

CÓMO REDUCIR EL TAMAÑO DE LAS IMÁGENES ANTES DE SUBIRLAS

Hoy en día usamos cámaras que tienen una resolución maravillosa (incluso las de nuestros smartphones), lo cual es fantástico, pero no podemos subir a nuestra página web las fotos directamente sin tratarlas, puesto que ocuparían entre 2 y 15MB cada una.

El tamaño de una imagen (las dimensiones) está directamente relacionado con el peso (los bytes) de esta.

Las imágenes tal y como salen de la cámara pueden tener entre 3000 y 6000 píxels de ancho, pero si el tamaño al que se van a mostrar en nuestra web es de 700 o 900 píxels de ancho nunca deberíamos subir imágenes mayores, lógico, ¿no? De esta forma ahorramos unos cuantos bytes que no aportarían nada pero que sí serían perjudiciales para la velocidad de carga del sitio web.

Otro punto importante es el tema del formato en el que subimos las fotos, imágenes, ilustraciones, etc. Siempre que puedas, escoge el .jpg o .jpeg por encima del formato .png o gif.

Para reducir el tamaño de las imágenes de forma automática te recomiendo que te instales en tu equipo uno de estos 2 programas:

• Resize Expert (si tienes un Mac) es el que usamos nosotros.
• Image Resizer (para windows)

Ambos son gratuitos y muy sencillos de utilizar. Simplemente indicas el tamaño de salida de las imágenes y la carpeta donde quieres guardarlas. Seleccionas las fotos que quieres redimensionar y en cuestión de segundos las tienes todas listas.

Una vez que tenemos las imágenes al tamaño que necesitamos ya podemos añadirlas a la biblioteca de nuestro WordPress.

Pero ahora nos faltaría optimizarlas, comprimirlas. Veamos cómo hacerlo de manera sencilla.

COMPRIMIR LAS IMÁGENES SUBIDAS A WORDPRESS CON UN PLUGIN

Existen varios plugins para optimizar las imágenes en WordPress, pero el más conocido es también el que mejor funciona. Se trata de WP Smush. Todas las imágenes que subas desde que tengas activado este plugin de reducción de imágenes se optimizarán sin hacer tú nada.

También tiene una opción para optimizar las imágenes que ya tenías subidas antes de instalar el plugin.

La versión gratuita está limitada a 50 imágenes por lote, pero si tienes 200 imágenes sólo tendrías que darle al botón de optimizar 4 veces; me explico: le das una vez, espera a que termines, le vuelves a dar, vuelves a esperar, y así hasta que estén optimizadas todas las imágenes.

También tiene otra limitación y es que no comprime imágenes mayores de 1Mb, pero si has usado alguno de los programas que he recomendado antes no tendrías este problema. Y si no redujiste al tamaño en su día, tampoco es mucho problema, descargas la imagen, reduces su tamaño y la vuelves a subir, eso si, deberías hacerlo por FTP, puesto que si la subes desde el panel de control de WordPress la almacenará en otra carpeta y luego deberías ir a los lugares donde se muestre la imagen y eliminar manualmente la imagen antigua para añadir la nueva.

Además este plugin nos ofrece la opción de reducir las dimensiones de las imágenes subidas de manera automática, especificando un ancho y alto máximo, lo que nos garantiza no subir ninguna imagen demasiado grande.

Y ahora vamos a ver el último punto que podemos hacer para terminar de optimizar al máximo la carga de nuestras imágenes

USAR UN PLUGIN QUE CARGUE ÚNICAMENTE LAS IMÁGENES QUE SE MUESTRAN EN PANTALLA

Os explico en que consiste esta técnica de optimización. Imagina que tienes un listado de productos, cada uno con su foto. Si tienes 10 productos no hay problema, cargas todas las fotos y listo, pero y si tienes 100, o 1000? Cargar todas esas fotos supondría aumentar muchísimo el tiempo de carga de tu página, por lo que no es recomendable.

Antiguamente se usaba la paginación, es decir, 10-12 fotos en la primera página, después le dabas al botón “siguiente” y cargaba otra página con otras 10-12 fotos.

Hoy en día existen plugins que permiten ir cargando las imágenes conforme el usuario va haciendo scroll hacia abajo. Si tu página es un sitio corporativo y tiene pocas fotos, no recomiendo usar ninguno, pero si tienes una página con fotos de los productos o muchas fotos de tus instalaciones te aconsejo que instales el plugin a3 Lazy Load, tiene muy buenas valoraciones y verás que es muy sencillo de configurar.

OPTIMIZAR LAS IMÁGENES NO LO ES TODO

Es importante recordar que la optimización de imágenes en WordPress solo es uno de muchos métodos para mejorar la velocidad de carga de una página web.

Para que el tiempo de carga de una web sea mínimo deberás contratar el mejor hosting para WordPress, tener un plugin de caché, usar un theme optimizado, usar un CDN como Cloudflare…

Además, el hosting que recomendamos (Webempresa) cuenta con un servicio gratuito de optimización de imágenes en WordPress exclusivo para sus clientes que reduce el tamaño de las fotos que ya están subidas a WordPress y no están correctamente optimizadas.

Yo lo utilizo a menudo y, a pesar de reducir el peso de las imágenes bastante, este servicio lo consigue aún más.

Utilizar todos estos métodos junto con la optimización de imágenes te garantiza la mayor rapidez en tu página web.

Quiero contaros una historia

En una ciudad de Grecia vivía un sabio famoso por tener la respuesta para todas las preguntas.

Un día un adolescente, conversando con un amigo, dijo:

– Creo que sé cómo engañar al sabio. Voy a llevarle un pájaro que sujetaré en la mano, y le preguntaré si está vivo o muerto. Si dice que está vivo, lo apretaré y una vez muerto lo dejaré caer al suelo; si dice que está muerto abriré la mano y lo dejaré volar.

El joven llegó hasta el sabio y le hizo la pregunta:

– Sabio, el pájaro que tengo en la mano, ¿Está vivo o muerto?

El sabio miró fijo al joven y le dijo:

– Muchacho, la respuesta está en tus manos

La solución al 79% de los problemas que nos preocupan dependen únicamente de nosotros.

Así que ya sabes; si ves que no tienes tiempo para montar tu web, o ya la tienes pero necesitas que te ayudemos a mejorarla, pásate por Pampua.es y estaremos encantados de echarte una mano con tus problemas.

Y si quieres que en próximos episodios hable de algún tema en concreto o tienes cualquier duda o comentario que quieras hacerme, déjamelo en Pampua.es/contacto o en los comentarios de iVoox.

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo!

Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena

Nos escuchamos el jueves que viene con un tema muy interesante: Cómo hacer correctamente copias de seguridad y cómo automatizarlas.

Muchísimas gracias por estar al otro lado, porque sin vosotros esto no sería lo que es, esto simplemente no sería.