Las imágenes que no están optimizadas ralentizan la carga de su sitio web, para mejorar esta situación es necesario conocer como optimizar imágenes en WordPress. Para abordar los problemas que pueden hacer que nuestras imágenes aumenten de peso, veremos dos de las mejores formas de mejorar las imágenes, con complementos de WordPress y herramientas de edición en línea.
Antes de sumergirnos en los logros, recordaremos los conceptos básicos del trabajo con imágenes en línea para que pueda comprender las razones detrás de lo que vamos a hacer aquí.
¿Por qué optimizar imágenes de un sitio web?
Cuando subimos una imagen a WordPress, la plataforma crea copias de la imagen en diferentes tamaños. La idea es que dependiendo del tamaño de la imagen que aparezca en la página, puedas usar el tamaño más pequeño (y por lo tanto el más ligero) posible.
Imagen por imagen, copia por copia, todas estas imágenes pueden ocupar mucho espacio en tu servidor web sin que te des cuenta.
Además, cuando cargamos la imagen original, si es demasiado «pesada» (contiene un archivo grande), ralentizará la carga de nuestra web, además, Google se dará cuenta de que nuestra página es «lenta» y la valoración será reducido. de la página
Pero no se preocupe, en este artículo aprenderemos cómo acceder a él, qué tan grande es, qué se necesita en su servidor y cómo mejorarlo.
Velocidad de descarga mejorada
Cuando hacemos clic para ir a un sitio web, esa página debe cargar todo su contenido.
Por tanto, cuanto menos pesemos, menos tengamos y el número de nuestras imágenes, menos tiempo tardará en cargarse nuestra página.
Esto no solo es necesario para mejorar la experiencia del usuario (comprobado que el 50% de los usuarios esperan que se cargue en menos de 2 segundos), sino porque cuanto más receptivo es nuestro sitio, más le gusta a Google.
A su vez, esto significa que aparecerás más alto o más bajo en las búsquedas de los usuarios y, por lo tanto, aparecerás con más frecuencia para las personas.
¿Qué es la carga diferida y cómo acelera nuestro sitio?
Lazy loading es una técnica que asegura que mientras navegamos por una página web, las imágenes que contiene se cargan tal y como se muestran y no todas a la vez cuando entramos en la página.
Como hemos visto, estos tipos de archivos son los que ocupan más tamaño, y tiene sentido que sean los que toman más tiempo y ocupan más después de cargarlos.
Por lo tanto, si los videos y las imágenes no se cargan hasta que se necesitan, es un gran ahorro para nuestro sitio.
En esta publicación, veremos lo que creemos que es la forma más efectiva de hacer que su sitio web sea lento.
Aumentar el espacio libre en disco donde se encuentra la página
Todo el contenido que se muestra en un sitio web, o que forma parte de su estructura, debe estar alojado en una página web con un espacio determinado.
En muchos casos, las imágenes representan más del 50 % del peso total de la página.
Por ejemplo, si tenemos un blog de viajes, donde constantemente subimos archivos de este tipo, corremos el riesgo de ocupar más espacio. Sin embargo, si tenemos un blog con mucho texto y pocas imágenes, el espacio ocupado será menor.
Además, debemos recordar las copias que WordPress hace de nuestras imágenes. Hay que revisar lo que es realmente necesario.
Para hacernos una idea, pondremos un ejemplo. Subamos una publicación de WordPress con 5 imágenes. La plataforma subirá 4 copias más de cada una de nuestras fotos (20 fotos en total) de las cuales solo usamos el 20%, pero ocupan espacio.
Los planes de alojamiento web, suele habilitar un cierto límite de espacio y dependiendo del plan se tiene el costo, por lo que el ahorro no es solo espacio sino dinero.
Pruebe la velocidad del sitio web con Google PageSpeed Insights
Respecto a lo anterior y como herramienta para medir la velocidad de carga de nuestro sitio, existe PageSpeed Insights de Google. Gracias a esta página, podremos revisar la velocidad de carga de nuestro sitio e identificar posibles errores.
Simplemente copiamos la dirección de la página que queremos analizar y la copiamos en tu barra de búsqueda. Nos da un estudio muy detallado de lo que puede estar causando que la carga se ralentice o lo que podemos mejorar.
Cuando presionamos «Analizar», trajo un análisis general del sitio, junto con un estudio bastante detallado de lo que podría ralentizarse y mejorarse.
¿Cómo podemos mejorar las imagenes sin perder calidad?
Hay varias formas de hacer esto, pero queríamos cubrir las más simples y las que causarán menos problemas en el futuro:
- Hay algunas herramientas en línea para hacer esto manualmente.
- Complementos de WordPress.
Mientras que con los plugins solo tendrás que elegir el que mejor se adapte a tus necesidades e instalarlo, con las herramientas serás tú quien lo haga manualmente.
Cada método tiene sus ventajas y desventajas, por lo que te recomendamos que intentes elegir el que te resulte más cómodo.
Configurar WordPress para mejorar nuestras imágenes
Antes y como una optimización completa de la imagen, es necesario revisar tu instalación de WordPress.
Cuando ingresamos al panel principal, vemos la sección «Configuración» a la derecha, donde se encuentra la sección «Medios». Haz clic en eso.
Primero, buscaremos la configuración del tamaño de la imagen, donde se especifica el tamaño máximo que se usará al agregar imágenes a la biblioteca de medios.
Como decíamos antes, cuando subimos una imagen, WordPress crea varias copias de diferentes tamaños, ajustando la imagen a donde se muestra.
Por ejemplo, la imagen del título en la misma publicación, como el ejemplo anterior, no es lo mismo que el listado o cuando aparece como referencia. Como podemos ver en la siguiente imagen.
En estos dos ejemplos, es fácil ver cómo WordPress usa versiones de diferentes tamaños de las imágenes que hemos subido y eso hace que nuestra tarea sea mucho más fácil. Para lograr esto manualmente, tendremos que redimensionar manualmente las imágenes a diferentes tamaños y luego subirlas.
Aquí, estableceremos el tamaño máximo, en píxeles, que tendrán estas copias.
Hay tres tipos: mini, mediano y grande. Cada valor tiene un preestablecido.
Las imágenes que subamos se adaptarán a las medidas que hayamos preparado, pero manteniendo el formato original en las copias de medio y gran formato.
Sin embargo, en las impresiones pequeñas, tenemos la opción de recortar las miniaturas a los tamaños exactos que especificamos aquí.
Por ejemplo, si dejamos la escala por defecto de 150 x 150 y marcamos la casilla, nuestra copia será de 150 x 150. ¡Cuidado y calcula bien la talla! Además, si la imagen original es más pequeña que el tamaño de las copias, no se creará.
Por ejemplo, cuando subo una imagen con un tamaño de 800 x 600 píxeles, no sé si creará una copia grande (1024 x 1024), porque no tendrá sentido y no logrará la misma calidad de cualquier manera. Para elegir el tamaño correcto, debe considerar el diseño de su blog o sitio web y ajustar las medidas de la imagen en consecuencia.
Herramientas de optimización de imágenes en línea
Una vez que la configuración que cargarán nuestras imágenes esté configurada correctamente, las optimizaremos. Esta opción se utiliza para editar manualmente nuestras fotos, mediante una serie de aplicaciones accesibles para todos.
La ventaja de usar estas herramientas es que tienes control total sobre el proceso. Lo malo es que tardará un poco más, pero si tienes un blog con pocas imágenes, no tendrás ningún problema.
Desde Citizen 2.0 recomendamos los dos tipos más populares: TinyPNG, para reducir peso y Picresize, para reducir tamaño. También puede utilizar Image Resizer para realizar ambas funciones, pero no de forma tan óptima como las otras dos.
Los mejores plugins para optimizar imágenes en WordPress
Trabajar con complementos para optimizar imágenes en WordPress tiene muchos beneficios. Automatiza procesos, añade funcionalidad. En definitiva, nos facilita mucho el trabajo. La optimización de la imagen no se anulará.
Solo tienes que elegir el que más te guste e instalarlo. Eso sí, te recomendamos encarecidamente que lo revises periódicamente porque cada vez perdemos algo de “control” del proceso.
EWWW Image Optimizer
En términos de descargas, EWWW Image Optimizer está detrás de Smush y tiene una calificación de 4.7 sobre 5. Este complemento también optimiza automáticamente las imágenes que elija, así como las precargadas.
Esto nos ayudará a mejorar la velocidad de carga de nuestro sitio. Una de las grandes ventajas de EWWW es que las imágenes se comprimen localmente, en tu propio servidor, y no tienes que conectarte a un dispositivo externo, lo que ahorra mucho tiempo.
Otra gran característica de este complemento es la capacidad de cambiar la imagen a un formato que la convierte en la más pequeña. En otras palabras, si el complemento encuentra que nuestra imagen ocupará menos espacio en .png, le sugerirá que la cambie.
Smush
Sin duda Smash es una de las aplicaciones más populares por su utilidad para optimizar imágenes en WordPress.
Este complemento de WordPress es «todo en uno», lo que nos permite realizar las tareas necesarias para mejorar nuestras imágenes, como cambiar el tamaño o comprimirlas automáticamente. Además, da igual que ya esté subido, podemos editar las imágenes de otros artículos antiguos.
Uno de los puntos fuertes (entre muchos) de este complemento es su buscador de imágenes de tamaño incorrecto, que le notificará cualquier error sospechoso. Sin embargo, la prueba gratuita es limitada, por lo que, si desea más cobertura, deberá pagar una prima.
Puede comprimir imágenes PNG, JPEG y GIF hasta 32 MB, pero un máximo de 50 imágenes en la versión gratuita.
Imsanity
Imsanity, el plugin para optimizar imágenes en wordpress que es valorada con 5 estrellas, redimensiona automáticamente las imágenes que subimos a nuestro sitio de WordPress, pudiendo configurarlas con los parámetros que queramos.
También nos permite cambiar el tamaño de las imágenes subidas a nuestra web de forma masiva, lo que nos ahorra mucho tiempo. Es moderno y no tiene muchas descargas, pero se actualiza constantemente.
Lazy Load
Lazy Load es un complemento gratuito con más de 100,000 descargas y una calificación de 4/5, solo necesita descargarlo e instalarlo sin tener que configurar nada. El propósito de este complemento no es mejorar las imágenes sino acelerar la carga de su sitio web a través de la carga lenta.
Este método solo consiste en subir imágenes que estén visibles en ese momento. Esto significa que a medida que nos desplacemos por la pantalla, se irán cargando otras imágenes. ¡Importancia! No olvide que nuestras imágenes deben optimizarse primero. Complementará todo lo anterior.
Conclusiones
Como hemos visto, los archivos multimedia ocupan una gran parte del espacio en el que se almacena tu sitio web, además de ser el tipo de elemento más pesado a la hora de cargar la página.
Por lo tanto, optimizar imágenes en wordpress para ahorrar espacio, hará que su sitio se cargue más rápido y por lo tanto, más satisfactorio para los usuarios y Google. Optimizar imágenes son parte de un buen trabajo de SEO, que todo sitio web debería tener para mejorar la posición en las búsquedas.
