La optimización de imágenes en WordPress es uno de los elementos más importantes que pueden acelerar su sitio web incluso dos veces. ¿Cómo asegurarse de que las fotos se carguen rápidamente y no pierdan calidad? Resulta que no es difícil en absoluto. Todo lo que tienes que hacer es seguir algunas reglas importantes.
Uno de los factores más comunes que afectan al largo tiempo de carga de la página es la optimización incorrecta de las imágenes en WordPress (o más bien su ausencia).
Los usuarios a menudo cargan imágenes en resoluciones que son desproporcionadamente altas para la página, que pesan mucho y se guardan en formatos inapropiados. Esta situación es una receta ideal para ralentizar la carga de páginas y reducir sus resultados en PageSpeed Insights.
Mientras ayudamos a los miembros del grupo de WordPress para principiantes, notamos que la mayoría de las personas tienen el mayor problema con la optimización de imágenes: las fotos son m.in demasiado grandes y se guardan en los formatos incorrectos. Las pruebas iniciales realizadas en herramientas como GTMetrix o PageSpeed Insights mostraron que para lograr un resultado mucho mejor, debe llevar a cabo acciones como:
- Utilizar una codificación de imagen eficiente
- Cambiar el tamaño de las imágenes
- Reposar cargando imágenes fuera de pantalla
- Mostrar imágenes en formatos de última generación
Entonces, ¿cómo cumples con estas condiciones? ¿Qué hacer para que la optimización de las fotos no se convierta en una serie de actividades que consumen mucho tiempo y que tenemos que hacer al publicar cada artículo? Relájate, todo lo que tienes que hacer es cuidar algunas cosas y aprender algunos buenos hábitos.
Cuida las dimensiones correctas de las fotos
Uno de los problemas que ocurren con mayor frecuencia en usuarios novatos es cargar imágenes al sitio en dimensiones demasiado grandes. Por supuesto, cuanto mayor sea la resolución, mejor será la calidad y claridad de las fotos, pero debe recordar que esto aumenta el peso del archivo de imagen.
En primer lugar, evite absolutamente agregar imágenes que acaban de ser copiadas, por ejemplo, desde un teléfono inteligente o una cámara. Dichos archivos pesan mucho, no están sujetos a compresión y están en resoluciones muy altas.
Por ejemplo, una foto tomada con una cámara de 12MPx tiene unas dimensiones de 4240x2824px. Supongo que estarás de acuerdo conmigo en que rara vez necesitas una foto tan grande en una página, ¿verdad?
En segundo lugar, asegúrese de que la foto que cargue tenga un tamaño cercano (por ejemplo, ancho) al lugar donde aparecerá.
Por ejemplo, si está preparando fotos para un artículo cuyo contenido se muestra en un contenedor con un ancho máximo de 1020px, no tiene sentido que las fotos sean más anchas que esas 1020px. El navegador los reducirá a este tamaño de todos modos, y pesarán innecesariamente más de lo que deberían.
Compruebe las dimensiones del contenedor en el que se muestran las fotos
Puedes comprobar el ancho del contenedor de artículos mediante las herramientas de desarrollo de un navegador como Chrome.
Presione F12, seleccione la herramienta de selección (icono en la esquina superior izquierda del panel) y coloque el cursor sobre una imagen en el artículo o uno de los párrafos. Cuando se resalta, aparece una ventana con información sobre el ancho que ocupa el elemento.
Optimizar las imágenes en una etapa temprana, es decir, preparar fotos antes de que se carguen
No confíe solo en los complementos de optimización de fotos en WordPress. Actúe incluso antes de cargar la foto en el sitio web: pasos simples en cualquier programa de gráficos son suficientes para realizar rápidamente el procesamiento básico. Al preparar una foto en un programa de gráficos, recuerde tres cosas:
Establecer las dimensiones correctas de la foto
Ya tocamos el tema de las dimensiones en el paso anterior, así que solo sigue estas reglas. Utilice la opción de cambio de tamaño de imagen para ajustar las dimensiones para que la foto no sea 4K y no exceda el tamaño del lugar donde desea insertarla.
Si la sección con el contenido del artículo es 1020px, entonces en el programa de gráficos use la opción para cambiar el tamaño de la imagen y establecer el ancho de la imagen también en 1020px (manteniendo las proporciones).
Por supuesto, puede haber excepciones a esta regla, como preparar fotos para una galería interactiva en una página de portafolio. En tal situación, dejar una alta resolución puede ser deseable. En la mayoría de los casos, sin embargo, no necesitamos imágenes en dimensiones excesivamente grandes.
Elija el formato de destino correcto
Al guardar una foto, preste atención al formato de destino en el que guarda el archivo. El principio es bastante simple: guardar fotos tradicionales (retratos, paisajes, fotos de personas o productos) en formato JPG. Es la mejor opción para la fotografía clásica.
La situación es ligeramente diferente en el caso, por ejemplo, de infografías, capturas de pantalla o gráficos vectoriales. Estos se guardan mejor en formato PNG, porque conservan de esta manera una mejor calidad, así como transparencia.
Ajustar el nivel de calidad de imagen
Además, tenga en cuenta que puede ajustar el nivel de calidad de la foto guardada. Esto es extremadamente importante, especialmente con fotos clásicas, guardadas en formato JPG. Una ligera reducción de calidad apenas visible puede reducir significativamente el peso del archivo gráfico.
El nivel de calidad generalmente se puede ajustar en la ventana de guardado de fotos. Nunca establezca el control deslizante de calidad al 100%. Apunte a un techo de calidad de alrededor del 70-80%.
Optimización de imágenes en WordPress con un plugin
Un buen plugin hará dos cosas por nosotros: compresión (reducción de peso) y cambio de tamaño de imagen (reduciendo la resolución de fotos extremadamente grandes).
Una de las mejores soluciones gratuitas es un plugin llamado Robin Image Optimizer. En cuanto a una solución gratuita, tiene pocas limitaciones. Con este plugin podrás realizar ajustes con los que:
Las fotos conservarán el 80% de calidad (buen equilibrio entre calidad y peso del archivo de imagen)
Las fotos se comprimirán automáticamente cuando se carguen
El complemento cambiará automáticamente el tamaño de las fotos grandes para que el lado más largo no exceda los 1600px (puede establecer su propio valor como desee)
No solo optimizaremos nuevas fotos sobre la marcha, sino que también impondremos esta configuración en todas las imágenes existentes.
Configuración del complemento Robin Image Optimizer
Instale el complemento y luego vaya a la pestaña «Configuración > Robin Image Optimizer» en su panel de WordPress. En la pantalla del complemento, seleccione la pestaña Configuración para ajustar la configuración.
Para lograr los supuestos anteriores, ajuste las siguientes opciones:
Modo de compresión: establecido en Personalizado. Aparecerá un campo adicional «Introducir calidad personalizada» donde puede establecer un objetivo de calidad. Establezca la calidad en 70-80%: recuerde no establecerla demasiado baja, ya que esto degradará significativamente la calidad de la imagen.
Optimización automática al cargar: se establece en Activado para habilitar la optimización automática de nuevas fotos
Copia de seguridad de imágenes: le permite hacer una copia de seguridad de sus fotos originales antes de optimizarlas y comprimirlas. Inicialmente, establezca en Activado para que si comprime demasiado u otros problemas, pueda restaurar sus fotos al estado en el que estaban antes de usar el complemento. Sin embargo, en última instancia, cuando se asegura de que la configuración se introduce correctamente y los resultados son satisfactorios, puede desactivar esta opción para ahorrar espacio en el servidor.
Dejar datos EXIF: controla si se conservan los datos EXIF (por ejemplo, datos de ubicación de fotos). Si no necesita estos datos, establezca esta opción en «Desactivado» para no dejarlos.
Cambiar el tamaño de las imágenes grandes: controla si el complemento, además de la compresión pura, también es para reducir las fotos grandes. Establezca en Activado para habilitar esta opción.
Después de habilitar esta opción, aparecerán dos campos: «Ingrese el ancho máximo» y «Ingrese la altura máxima», en los que podemos especificar el ancho y alto máximos de la foto.
Por ejemplo, para los blogs, el valor de 1600px es un buen comienzo (rara vez necesitaremos fotos más grandes), pero las personas que tienen, por ejemplo, un portafolio de fotos pueden adaptar esta opción a sus propias necesidades.
Guarde la configuración con el botón Guardar en la esquina superior derecha.
A partir de ahora, todas las fotos nuevas se comprimirán automáticamente a una calidad del 80% y su tamaño se limitará a las dimensiones que especifique. También puede optimizar sus fotos existentes convirtiéndolas en masa. Para ello, vaya a la pestaña Optimización masiva y haga clic en el botón Ejecutar.