Para arreglar las imágenes pixeladas o borrosas en tu blog de Blogger o WordPress no solo depende de la calidad de esta sino también del tema que estés usando.
¡Hola! Bienvenido a Peengler. Anteriormente explique:
Ahora, te quiero enseñar como solucionar las imágenes pixeladas o borrosas en tu blog.
Sin más que decir ¡empecemos!
Clic en la imagen ↑ para ver el vídeo en YouTube
¿Tu imagen tiene una buena calidad y nitidez excelente, pero en tu blog se ve pixelada? Lo que sucede es que Blogger coloca una resolución a sus imágenes dependiendo de su ubicación.
Ejemplo: en las entradas populares usa 72px de resolución, porque la imagen tiene un tamaño pequeño y para que su carga sea rápida le coloca esta medida, ahora cuando cambias su altura y anchura, notaras que la imagen se ve borrosa.
La solución es mejorar la resolución ¿Cómo lo hago?
Primero debes conocer tu plantilla a nivel de código, en el video tutorial explico cómo lo hago con el tema Contempo que es de Blogger.
Este código es el que use para cambiar la resolución de las imágenes de las entradas populares:
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
Y también hago mención de este otro código, el cual lo use, para aplicar la misma medida de la imagen principal en los demás posts.
<div class='snippet-thumbnail'>
<b:with value='data:post.featuredImage.isYoutube? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 945, "945:600"): ""' var='highRes'>
<b:include data='{image: data:post.featuredImage, imageSizes: [256, 512, 945, 1684], imageRatio: "945:600", sourceSizes: "(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)", enhancedSourceset: data:highRes }' name='responsiveImage'/>
</b:with>
</div>
Nota: Existen plantillas que muestran su código de diferente manera, algunos usan jQuery y otros quizás sean los mismos que muestro arriba. Lo que quiero decir, es que no te puedo ayudar si usa jQuery/JavaScript, te recomiendo contactar con el creador de esa plantilla.
Clic en la imagen ↑ para ver el vídeo en YouTube
Como puedes apreciar en mi vídeo tutorial, una de las imágenes del carrusel se veía borrosa, mientras que las demás imágenes se veían nítidas.
Con el siguiente método, lo puedes aplicar si tienes muchas entradas y todas sus imágenes destacadas se ven pixeladas/borrosas. Y para eso, aplicaremos una linea en el código de la plantilla.
Lo primero que debes hacer es identificar el bloque que contiene tu imagen.
En mi caso es: cards__carousel-img
A continuación, busco cards__carousel-img en mi plantilla. En mi caso mi tema muestra las imágenes destacadas con la segunda linea:
expr:src='data:blog.postImageUrl'
expr:src='data:post.featuredImage'
Cualquiera de estas 2 lineas puedes obtener la primera imagen de la entrada en Blogger. En mi plantilla uso el segundo código, lo que voy hacer es agregarle la resolución a esta linea, y quedaría de esta manera.
expr:src='resizeImage(data:blog.postImageUrl, 500)'
expr:src='resizeImage(data:post.featuredImage, 500)'
Nota: Puedes modificar la resolución de 500 a lo que tu quieras.
Solo queda copiar la linea y lo pegarlo en el código (recomiendo ver el tutorial para ver el 2 método sin añadir ningun código)
Guarda los cambios y listo. Ya la imagen debe verse nítida.
Clic en la imagen para ver el tutorial en YouTube
A veces se suele visualizar las imágenes pixeladas o borrosas en el blog, a pesar, que la imagen original tenga buena calidad, lo que sucede es que WordPress tiene unos tamaños ya configurados por defecto.
Para modificarlo dirígete a: → Ajustes → Medios
Como puedes ver, existen 3 tipos de medidas:
NOTA: estos tamaños son la copia de tu imagen original, me explico: Subes una imagen y WordPress hace una copia de tu imagen, pero con las 3 medidas que mencione anteriormente.
Lo curioso es que, si tu imagen es menor a las medidas establecidas, no va hacer ninguna copia.
Puedes verificarlo → te vas a la tucarpetadewordpress/wp-content/uploads. Podrás ver que cada imagen tiene sus copias.
Digamos que no usas el tamaño grande, para desactivarlo simplemente agregas un cero = 0 en el alto y en el ancho. Una vez que has configurado correctamente los tamaños de las miniaturas, te recomiendo instalar el siguiente plugin clic aquí.
Si las miniaturas de tus productos se ven de baja calidad, la solución es configurarlo adecuadamente a tu tema.
Para esto, ve a tu WooCommerce → Ajustes → Productos → Mostrar/Presentación, en la sección: Imágenes de producto. Es donde vas a establecer las medidas, si no lo haces WooCommerce generará las miniaturas con los tamaños por defecto:
Una vez que coloques los tamaños correctos y guardes los cambios. Las imágenes que subas se mostrarán correctamente.
Pero ¿qué pasa con las imágenes subidas anteriormente? Para eso, vas a necesitar lo siguiente:
Solo debes de instalar el plugin Regenerate Thumbnails. Este te permite regenerar todos los tamaños de miniaturas de una o más imágenes que se hayan subido a tu blog. También ofrece la posibilidad de eliminar miniaturas antiguas que no son utilizadas.
Existe otra opción y es añadir manualmente un código al final del archivo functions.php de tu tema:
function ejr_jpeg_quality () {
return 100;
}
add_filter ('jpeg_quality', 'ejr_jpeg_quality');
Lo único que modificarías es el número que acompaña el return, en este caso es de 75, significa que tus imágenes están perdiendo una calidad de un 25% pero lo estarías ganando en velocidad de carga. Ahora si quieres que se mantengan con la misma calidad solo colocarías 100.
Mejorar las imágenes pixeladas o borrosas en tu blog suele sucederle a todo el mundo, espero que con estas opciones puedas encontrar la manera de dar con la solución.
Aunque si lo has intentado y aun nada, solo pueda decirte que no te rindas, a mi me costo un poco entender la plantilla contempo tampoco pienso hacer un análisis a todas las plantillas eso cuesta mucho tiempo y esfuerzo. En fin, buena suerte 😊
Sígueme en Youtube🔥
Aprende a crear páginas web con HTML, CSS y Javascript.
Gabriela Laya
Me gusta todo lo relacionadaoa la creación de sitios web ya sea, usando código "HTML, CSS y JS" o usando un constructor "Elementor"