Imágenes pixeladas o borrosas en el Blog

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:

• Cómo cambiar el alto y el ancho de una imagen.
• Cómo hacer que las imágenes se carguen más rápido.
• Reducir el Peso de la Imagen en tu Blog sin plugin ni programa.

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

Cómo optimizar las imágenes en Blogger

¿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?

Imágenes pixeladas o borrosas en el Blog

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, &quot;1:1&quot;) : 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, &quot;945:600&quot;): &quot;&quot;' var='highRes'>
 <b:include data='{image: data:post.featuredImage, imageSizes: [256, 512, 945, 1684], imageRatio: &quot;945:600&quot;, sourceSizes: &quot;(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)&quot;, 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

SOLUCIÓN DEFINITIVA para mejorar una imagen borrosa en Blogger

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.

Video tutorial: Imágenes pixeladas o borrosas en WordPress

Clic en la imagen para ver el tutorial en YouTube

Cómo optimizar imágenes en WordPress

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:

• Tamaño de la miniatura:  es utilizado por muchos plugin como los de artículos relacionados y también es el tamaño que utiliza la galería de imágenes de WordPress. Ahora, si observas hay una casilla seleccionada para el tamaño de la miniatura y dice: Recortar las miniaturas en las dimensiones exactas. Quiere decir, que si la imagen es larga o ancha se va a mostrar con un recorte, ajustándola a la medida que se especificó, en este caso: 150 x 150px.
• Tamaño medio: Se usa en las imágenes de tu post, esto depende de cuanto mide el contenedor de tu artículo. Las medidas son distintas y depende de tu tema. Por defecto esta en 300 x 300px.
• Tamaño grande: Que por defecto es de 1024 x 1024px, es para mostrar tu imagen mucho más grande (Valga la redundancia). Aunque si no usas esta medida puedes ignorarla o quitarla.

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.

Cómo desactivar las copias de los tamaños de las imágenes en WordPress

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í. 

Plugin para evitar la pérdida de calidad de las imágenes en WordPress

1. Imagify: Acelera tu web con este optimizador de imágenes y consigue imágenes más ligeras sin perder calidad.
2. WP Smush.it: comprimirá todas tus imágenes sin una caída visible en la calidad y optimizará la velocidad de su página utilizando su algoritmo de compresión única.
3. Optimizador.io: optimiza todas las imágenes que ya existen en tu web y todas las nuevas imágenes que incluyas. Reduce el tamaño de tus imágenes entre un 20% y un 70% sin perder calidad.
4. EWWW Image Optimizer: no solo optimiza automáticamente las imágenes nuevas que subas, sino que también puede optimizar todas las imágenes subidas previamente con tan solo un clic.

Cómo modificar el tamaño de las imágenes de producto en WooCommerce

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:

Plugin para regenerar imágenes de miniaturas en WordPress

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.

Evitar la pérdida de calidad de las imágenes en WordPress sin plugin

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.

En conclusión

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 😊