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
Recomiendo ver el vídeo tutorial. Para esta ocasión estoy usando la plantilla Simple Bold de Blogger y lo primero que debes identificar es el bloque que contiene tu imagen.
En mi caso es: post-body entry-content y se repite 2 veces. Para saber cuáles son tus artículos es cuestión de probar, con esta plantilla me funciono la segunda.
A continuación, vas agregar la siguiente condición que significa, si mi artículo tiene una imagen destacada aplícale la siguiente resolución:
<b:if cond='data:post.thumbnailUrl'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 320, )' expr:title='data:post.title'/>
<data:post.body/>
<b:else/>
<data:post.body/>
</b:if>
Nota: Puedes modificar la resolución de 320 a lo que tu quieras.
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 😊
Únete a la Zona VIP🔥
Descubre todo el contenido que te ofrece y ser parte de mi comunidad.
Gabriela Laya
Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.
Un post muy útil, como siempre. 🙂
Besos
Gracias por el tutorial, la verdad es muy útil. te mando un beso y ten una buena semana
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!
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.
No me ha pasado ese problema pero es bueno saberlo. Gracias
hola,
muchas gracias por la entrada porque yo no tenia ni idea de como solucionar esto, me lo llevo bien apuntado
Besotessssssssssssssss
¡Muchas gracias porque siempre aprendemos algo útil contigo!
Un abrazo.
Buen artículo el de hoy y fácil de aplicar. Buen día!!
Muy buena tu lección de hoy Gabriela. A ver si lo consigo. Un beso y feliz tarde ❤️❤️❤
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
Hola libroschidos11, bueno bienvenido de nuevo jajaja
Hola,
Gracias por la información y la entrada.
Besos desde Promesas de Amor, nos leemos.
Holaa, muchas gracias, voy a tener en cuenta los consejitos, al menos checar cómo están mis imágenes 😀
¡Besos! :3
Very interesting post! Thanks for sharing! Have a great day ! ⛱️🏖️🏖️
Hola.
Muchísimas gracias por este tutorial, es muy muy bueno.
Feliz día.
Hola!
Qué buen post, súper completo y útil. Sin dudas lo voy a tener en cuenta
Un beso
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 – –
Hola Nayade, creo que tengo una idea de esa guerra jajaja
¡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.
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.
Q buenas soluciones ❤
(ノ◕ヮ◕)ノ*:・゚✧ 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.
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?
Q tengas un buen inicio de semana ❤
¡HOLA, HOLAAAAAAAAAAAAA ^-^!
De verdad que no se que haría sin tus tutoriales.
¡SE MUUUY FELIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIZ 🥰!
Feliz jueves ❤
Hola,
Gracias por la entrada, muy interesante.
Besos desde Promesas de Amor, nos leemos.
Feliz finde:)
Hola,
Muchas gracias por la información.
Besos desde Promesas de Amor, nos leemos.
Hola, gracias por tus consejos, seguro que son muy útiles.
Besos desde Promesas de Amor, nos leemos.
Feliz martes ❤
Deja un comentario