¿Quieres saber cómo reducir el tamaño o comprimir fotos sin perder calidad de imagen? En el vídeo-tip de hoy te cuento que pasos sigo yo para optimizar el peso de las imágenes para WordPress.
En el vídeo-tip de hoy nos salimos un poco del repaso que estamos haciendo por todas las opciones del administrador de WordPress porque optimizar imágenes para WordPress es básico también. Algo que debes hacer desde el principio para luego no tener que volver a ello.
Perdona la calidad del audio. Este es uno de los primeros vídeos que grabé y todavía no tenía el micro bueno funcionando.
Como siempre te muestro mi método, el que uso yo según mi criterio, pero quizá también te valga a ti. Te dejo con el vídeo y más abajo te hablo detalladamente de todo este asunto.
Pasos que sigo yo para optimizar el peso de las imágenes para WordPress
A continuación te explico paso a paso como hago yo para optimizar el peso de las imágenes de mi página y mejorar así la velocidad de carga.
1.- Recortar la imagen al tamaño que necesito: como explico en el vídeo esto es muy subjetivo.
Cada theme proporciona un ancho distinto para el contenido principal donde van los posts. Además, quizá tu quieras una imágen con más calidad porque quieres que el usuario la pueda abrir en un pop up o en una url distinta a su tamaño real. Imagina el caso de un fotógrafo por ejemplo.
En mi caso, siempre recorto las imágenes para ajustarlas al tamaño de mis posts y así me quito un montón de peso sin haber tenido que comprimir siquiera.
2.- Subo la foto a Tinypng y la comprimo.
Tinypng es la aplicación online para comprimir fotos o reducir el tamaño de las imágenes que yo utilizo más a menudo. Es un clásico entre los clásicos y me gusta por su sencillez y facilidad de uso, pero sobre todo porque puedo comprimir las fotos tantas veces como quiera y al final elegir la que yo considere.
Así que una vez comprimida la imagen compruebo que la calidad siga siendo buena.
3.- Repito el paso 2 hasta que la calidad de la imagen empiece a verse afectada.
4.- Eligo la imagen lo más comprimida posible que mantenga visiblemente la calidad de la original.
Y eso es todo. Ya tienes una versión optimizada de tu imagen para tu web. ¡Facil! ¿no? Pero espera, que hay más información que te puede interesar.
Herramientas para optimizar, reducir de tamaño o comprimir fotos sin perder calidad de imagen.
Como comento en el vídeo, existen infinidad de programas para tratar imágenes. Algunos sólo nos van a servir para recortar el tamaño. Otros nos permitirán recortar, reducir, comprimir y en definitiva optimizar fotos de manera completa.
Vista previa de mac
Éste es el programa que utilizo yo para recortar la imagen al tamaño de mis posts. Viene en todos los mac y es muy sencillo de utilizar para editar fotos.
Photoshop
Con Photoshop puedes hacer todo el proceso. Desde recortarla hasta comprimirla para la web. Tiene muchas opciones y sin duda es el programa más profesional que yo conozco para tratar imágenes. Si lo tienes y trabajas con él no te hace falta nada más.
Plugins para optimización de imágenes en WordPress
Si no estás por la labor de hacer este proceso manual para reducir el peso de tus imágenes o tienes una instalación ligerita, siempre puedes beneficiarte de las bondades de los plugins para optimizar fotos en WordPress que harán el trabajo por tí.
Aquí te dejo una selección de los que he probado.
EWWW Image Optimizer
Tras instalar el EWWW Image Optimizer cada nueva imagen que subas a tu web será optimizada automáticamente. Y si ya tenías imágenes subidas, tienes la opción de optimizarlas todas a golpe de un sólo click.
EWWW Image Optimizer es un plugin gratuito que puedes encontrar en el repositorio de plugins de WordPress haciendo click en el encabezado de este texto.
Lazy Load
El plugin Lazy Load no es exáctamente un plugin para la compresión de imágenes. Más bien lo que hace es retardar la carga de las imágenes para que cuando alguien llega a una url no tenga que esperar a que carguen todas las imágenes para mostrarse la página.
Así, las imágenes se irán cargando según el usuario vaya llegando a ellas al hacer scroll. Es un plugin recomendadísimo si vas a utilizar muchas imágenes en tus contenidos puesto que sólo se cargarán las imágenes necesarias en cada momento.
Lazy Load es un plugin gratuito que puedes encontrar en el repositorio de WordPress clicando en el encabezado de este texto.
Imsanity
El plugin Imsanity redimensiona las imágenes a unas dimensiones que tu preestablezcas. Esto es ideal para blogs con diferentes autores creando contenidos que no saben ni quieren aprender a redimensionar imágenes.
Así, subas la foto que subas, si ésta supera tus dimensiones, serán redimensionadas para que se ajusten a la perfección.
También se trata de un plugin gratuito disponible en el repositorio y ¡como no! lo he dejado linkeado en el encabezado de este texto.
Otros aspectos a tener en cuenta antes de optimizar imágenes para tu pagina web
Ojo, que muchas veces, sin hacer nada podemos observar que la calidad de las imágenes en nuestra web no es la que salió de nuestro programa de edición. ¿Por que pierden calidad mis fotos al subirlas a WordPress?
Compresión de imágenes automática de WordPress
Si no lo sabías, Wordpress por defecto baja la calidad de las imágenes que subes a tu biblioteca de medios como mínimo en un 10% y hasta un 18% desde la versión WordPress 4.5 siempre que se traten archivos en .jpg (no ocurre lo mismo con .png o .gif).
Así que a la hora de comprimir una imagen para tu web, si estás usando este formato, no ajustes demasiado porque al subirla perderá calidad.
Compresión de imágenes con herramientas de tu servidor para WordPress
Muchos servidores con la etiqueta “servidor rápido para WordPress” incluyen la opción de una pequeña compresión de las imágenes para ayudar a reducir el espacio de disco que consumes y por lo tanto también reducen un poco el peso y la calidad.
Éste es el caso de Webempresa, el servidor para WordPress en el que confío para mi página web y los proyectos de mis clientes. Su herramienta puede reducir hasta en un 20% el peso de las imágenes de tu web.
Esto está genial si tienes un montón de imágenes y quieres despreocuparte de su impacto en los tiempos de carga.
En mi caso, yo no la utilizo porque como he comentado anterioremente prefiero hacer la compresión de forma manual y tener la calidad de las imágenes bajo control en todo momento.
Así que si vas a usar esta opción, te digo lo mismo que en el punto anterior: procura no ajustar demasiado en la compresión porque luego puede que tus imágenes pierdan calidad.
Importancia de la optimización de imágenes en WordPress
Optimizar el peso de las imágenes para WordPress es importante fundamentalmente por 2 motivos:
1.- Para que el usuario no huya de tu web por aburrimiento o porque le estás “gastando” los datos del móvil.
Y es que muchas veces se nos olvida que estamos en casa o en la oficina y tenemos una buena conexión a internet. Ahí todo carga rápido. Da igual el peso de las imágenes o si tu theme es una castaña.
Todo funciona a la perfección… pero ponte en el peor de los casos. ¿Cuántas veces te ha pasado que vas en el metro, pinchas en un link que te lleva a un artículo y se pone a descargar una imágen a 2 x hora?
¡¡Amigo!! Si hubieras comprimido correctamente esa imagen seguirías teniendo un lector más. Ahora es tarde, ya se ha ido…
2.- Para que Google te posicione mejor. ¡Si! Está demostrado que la velocidad de carga de una web influye en su posicionamiento orgánico. O en otras palabras, el SEO mejora si usas imágenes bien optimizadas.
Así que ya sabes, no seas comodón y optimiza siempre tus imágenes. A la larga lo agradecerás… y tus lectores también.
También te puede interesar:
- Cómo descargar imágenes de cualquier web en 1 minuto
- Cómo subir, modificar y actualizar archivos multimedia en WordPress.
- La biblioteca de medios de WordPress.
Y hasta aquí el tutorial de hoy. Espero que ahora tengas una idea global respecto a un tema tan importante como es optimizar correctamente las imágenes de tu web hecha con WordPress.
Si te ha parecido interesante y crees que puede venirle bien a alguien te invito a compartir en tus redes.
