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:

Ahora, te quiero enseñar como solucionar las imágenes pixeladas o borrosas en tu blog.

Sin más que decir ¡empecemos!



Video Tutorial: Imágenes pixeladas o borrosas en Blogger

Clic en la imagen para ver el tutorial 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?

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>

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: → AjustesMedios

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.

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.

imagenes con diferentes tamaños en wordpress


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 → AjustesProductosMostrar/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:

Tamaños de las imágenes de producto en WooCommerce

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 😊

¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

crea tu blog gratis
acelerar la carga de las imagenes
Personalizar el Blockquote o Texto Citado

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Joanna:

Un post muy útil, como siempre. 🙂

Besos

Responder
Citu:

Gracias por el tutorial, la verdad es muy útil. te mando un beso y ten una buena semana

Responder
JLO:

Nunca me pasó eso de que se vean mal. Aumentar su visibilidad no las hace mas pesadas también? Digo, no lo sé…

Otra cosa, en mi lista de blogs nunca me muestra tus nuevas entradas arriba, cuando actualizás… no sé por que pasa eso… así que solo vengo aquí cuando vos me comentás! una lástima y verifiqué que estas agregada en al lista…. besos!

Responder
    Gabriela Laya:

    Hola JLO, bueno la idea es agrandarlas al tamaño deseado, no es necesario tenerlas al máximo.
    De lo demás te respondí en tu blog.

    Responder
Asunción Artal:

No me ha pasado ese problema pero es bueno saberlo. Gracias

Responder
Serena Miles:

hola,
muchas gracias por la entrada porque yo no tenia ni idea de como solucionar esto, me lo llevo bien apuntado
Besotessssssssssssssss

Responder
Rocío:

¡Muchas gracias porque siempre aprendemos algo útil contigo!
Un abrazo.

Responder
Maria Eugenia ARIAS LOZANO:

Buen artículo el de hoy y fácil de aplicar. Buen día!!

Responder
El desvan de vicensi:

Muy buena tu lección de hoy Gabriela. A ver si lo consigo. Un beso y feliz tarde ❤️❤️❤

Responder
libroschidos11:

Holaaaaa, hace mucho que no me pasaba por acaaaaa, pero ya sabes que me encantan tus tutoriales, uno siempre tiene problemas con blogger y es bueno contar con ayuda jaja

Responder
    Gabriela Laya:

    Hola libroschidos11, bueno bienvenido de nuevo jajaja

    Responder
Miss Bridgerton:

Hola,
Gracias por la información y la entrada.
Besos desde Promesas de Amor, nos leemos.

Responder
Yomi MR:

Holaa, muchas gracias, voy a tener en cuenta los consejitos, al menos checar cómo están mis imágenes 😀
¡Besos! :3

Responder
Carolina G.Ticala:

Very interesting post! Thanks for sharing! Have a great day ! ⛱️🏖️🏖️

Responder
Marigem:

Hola.
Muchísimas gracias por este tutorial, es muy muy bueno.
Feliz día.

Responder
Lecturas de Annie:

Hola!
Qué buen post, súper completo y útil. Sin dudas lo voy a tener en cuenta
Un beso

Responder
Nayade:

Como siempre es super interesante lo que nos cuentas, yo siempre tengo guerra con las imágenes así que me apunto todo lo que nos pones sobre ello
Besitos! ♥

– – El Mundo de Naya – –

Responder
    Gabriela Laya:

    Hola Nayade, creo que tengo una idea de esa guerra jajaja

    Responder
Celia | Miles de Libros:

¡Hola, hola!

Yo lo que realmente necesito es un tutorial super largo de la nueva versión de blogger, se que la comparaste con la vieja pero es que me da tantos problemas… No me guarda el contenido que escribo y cuando lo hace es solo de manera parcial #MuyFrustrada

Mil besos,
Celia | 1000 LIBROS blog.

Responder
    Gabriela Laya:

    Hola celia, que raro que te suceda ese problema, quizás debas mandar un mensaje a los desarrolladores de blogger.
    Por cierto dentro de poco, empiezo hacer un curso de como usar blogger desde cero paso a paso.

    Responder
Kinga:

Q buenas soluciones ❤

Responder
Sakuya Aikawa:

(ノ◕ヮ◕)ノ*:・゚✧ Holaaa!!!
Es una muy buena entrada como siempre, yo hice lo de la anterior y aunque me costó acostumbrarme a que mis imágenes no cargaran enseguida, sin duda es una gran ayuda, con respecto a lo de las imágenes pixelada creo que aún no tengo este problema pero dejaré esta entrada en mis marcadores, a todo esto Peengler sabes quería preguntarte algo que esta pasando con mi blog, cuando entro a la pagina de inicio del blog y hago clic se abre una pagina como de spam ¿Sabes por qué sucede eso? ¿podrías hacer una entrada explicándolo y como quitarlo? de antemano muchas gracias.

Responder
    Gabriela Laya:

    Hola Sakuya Aikawa, yo también tuve que acostumbrarme a que la imagen se cargara un poco más lento, pero recuerda que no es tan necesario si no subes tantas imágenes, de lo otro. . . Es raro, acabo de ir a tu blog y no me sale nada, y eso que visite casi que todo lo que tienes en tu blog ¿sera tu navegador?

    Responder
Kinga:

Q tengas un buen inicio de semana ❤

Responder
Blanca:

¡HOLA, HOLAAAAAAAAAAAAA ^-^!

De verdad que no se que haría sin tus tutoriales.

¡SE MUUUY FELIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIZ 🥰!

Responder
Kinga:

Feliz jueves ❤

Responder
Miss Bridgerton:

Hola,
Gracias por la entrada, muy interesante.
Besos desde Promesas de Amor, nos leemos.

Responder
Kinga:

Feliz finde:)

Responder
Miss Bridgerton:

Hola,
Muchas gracias por la información.
Besos desde Promesas de Amor, nos leemos.

Responder