Solución de desenfoque de imagen de WordPress: 3 pinceladas para conservar la calidad de imagen de alta definición

Muchos amigos en el proceso de utilizar WordPress para construir un sitio web se encontrará con un problema: imágenes cargadas en la pantalla del sitio web no es clara.
Obviamente, se trata de una imagen de alta resolución que parecía muy nítida antes de subirla, pero que después de visualizarla aparece borrosa, con los bordes dentados y se pierden detalles. Esto se debe a que el sistema WordPress por defectoImágenes comprimidasEl formato JPEG, en particular, reduce automáticamente la calidad de la imagen.

En este artículo se explican algunas formas de conservar la claridad de las imágenes para que la página web tenga un aspecto más profesional y estético.

I. Razones de la compresión por defecto de WordPress

A partir de WordPress 4.5, el sistema echará un vistazo a los archivos cargados. JPEG Las imágenes se comprimen a una calidad de 82% para reducir el tamaño y aumentar la velocidad de apertura del sitio web.

Aunque las intenciones son buenas, los resultados suelen serlo:

Desenfoque de la imagen
Bordes mal definidos, distorsión de píxeles
Peor en dispositivos Retina HD

II. Método 1: Desactivar la compresión automática con código (para los que tienen un poco de experiencia)

Utilice este sencillo código para desactivar el comportamiento de compresión por defecto de WordPress.

Los pasos son los siguientes:

Acceder al back office

Haga clic en [Apariencia] → [Editor de archivos temáticos]

Buscar y abrir funciones.php papeles

Añade el siguiente código en la parte inferior:

// Desactivar la compresión de imágenes JPEG de WordPress
add_filter('jpeg_quality', function($arg){ return 100; });

Este código sirve para ajustar la compresión de WordPress a 100%, preservando la calidad de la imagen original.

Después de completar la operación, la nueva imagen cargada permanecerá clara.

Se recomienda hacer una copia de seguridad de los archivos antes de operar, por si acaso.

Método 2: Utilizar el plug-in Imsanity (recomendado para base cero)

Los usuarios que no estén familiarizados con el código también pueden utilizar plug-ins para resolver el problema. He aquí una recomendación de un plugin gratuito y fácil de manejar: elImsanity

¿Qué hace Imsanity?

Limitar automáticamente el tamaño máximo de las imágenes cargadas
Ajuste de la relación de compresión por defecto
Proporciona una interfaz gráfica para ajustar fácilmente la configuración
Evite subir imágenes demasiado grandes o borrosas que afecten a la eficacia del sitio.

Proceso de instalación y configuración:

1. Acceso al back office

2. Haga clic en [Complemento] → [Instalar complemento].

3. Términos de búsqueda:Imsanity

4. Instalar y activar los plug-ins

5. Haga clic en [Configuración] → [Imsanity] para configurar lo siguiente:

Anchura máxima: 1920
Altura máxima: 1080
Calidad de compresión JPEG: 90 ó 100 (cuanto mayor sea el valor, mayor será la nitidez)

Después de guardarla, el plugin procesará automáticamente la imagen al subirla, controlando el tamaño y la calidad para evitar que se vea borrosa por exceso de compresión.

Imsanity no altera las imágenes ya cargadas, pero admite el reprocesamiento por lotes de imágenes antiguas.

Método 3: Uso del formato de imagen WebP

WebP Es un formato de imagen moderno con la ventaja de una calidad nítida y un tamaño ligero, que equilibra la calidad de imagen y el rendimiento.

WordPress 5.8 empezó a soportar la subida directa de imágenes WebP.

Puedes utilizar las siguientes herramientas o plug-ins para convertir JPG, PNG a WebP:

Herramientas en línea: Squoosh, TinyPNG

Recomendación de plugins:ShortPixelWebP Express

El formato WebP es adecuado para banners, imágenes de productos, portadas de artículos, etc. También es compatible con los navegadores.

Quinto, recomendaciones adicionales: no utilices el recorte automático de WordPress de imágenes pequeñas para mostrar imágenes grandes.

WordPress genera automáticamente varios tamaños (miniatura, mediano, grande) después de subir una imagen.

Si tomas la imagen pequeña recortada automáticamente por el sistema y la utilizas como imagen grande para su visualización, aparecerá borrosa.

El planteamiento correcto es el siguiente:

Sube la imagen original de alta resolución que sea lo suficientemente grande
Utilice la HTML o CSS para establecer el tamaño de visualización].

Evite utilizar -300x300.jpg Una imagen comprimida como imagen principal

VI. Resumen de los ajustes recomendados

metodologías	dificultad operativa	Adecuado para personas
Código Desactivar compresión	moderado	Los que tienen cierta experiencia
Plugin Imsanity	más sencillo	principiante
Uso del formato WebP	moderado	Para los que buscan calidad y velocidad de carga
Evitar el uso de miniaturas para hacer zoom	más sencillo	todo el mundo

VII. Observaciones finales

imagen borrosaLa raíz del problema es la autocompresión de WordPress y el hecho de que los usuarios no controlen el tamaño tras la carga.
Controlando la calidad desde la fuente de carga y gestionando el tamaño de la imagen con las herramientas adecuadas, el efecto visual de la página será más claro y profesional.

Si te molestan las fotos borrosas, prueba los métodos de este artículo, que seguro que solucionan tu problema rápidamente.

¡Más optimización de WordPress, técnicas de manipulación de imágenes serán compartidos continuamente en el futuro, bienvenido a permanecer en sintonía!

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres