19 Jun No más fotos borrosas en mi blog

Te ha pasado, seguro: subes un banner a tu blog y no está nítido. Pones una imagen en tu post y está borrosa. Subes imágenes a tu tienda online y cada una aparece una nitidez diferente.
Tu avatar de Twitter se ve miserable y enano. Después de todo el cuidado en fotografiar, editar y diseñar se ve fatal. Es que no solo da rabia, es que no nos lo podemos permitir. Ahí afuera hay blogs y webs con imágenes perfectamente nítidas. Señal de que es posible. Por favor: no más fotos borrosas en mi blog.

En los últimos años he podido enfrentarme a un montón de estas situaciones, pero las tengo dominadas… ¡casi todas!

Te voy a dar las claves para que no te vuelvas a ver con las horribles imágenes borrosas. Hay dos situaciones típicas que se cargan tus fotos:

Cuando el blog/web redimensiona una imagen porque no tiene el tamaño adecuado.

La cabecera y el sidebar de los blogs suelen marcar un ancho que debes respetar (aunque el alto es flexible). Si no cumples esa medida, el blog redimensiona las imágenes y el resultado es que se las carga sin piedad. Mira este ejemplo, ¡la foto borrosa solo tiene 1px más que la nítida!
Esto está en el top 1 de lo más destructivo. Esta es la web de la fotógrafa. LuciaM

La veías bien en Photoshop, ¿entonces qué has hecho mal?
La verdadera clave de acertar con la nitidez es crear la imagen al tamaño exacto que se va a mostrar. Photoshop te la muestra bien tenga el tamaño que tenga, claro. Pero si tu blog detecta que la imagen es demasiado grande la reduce. Reducir emborrona las imágenes. Ya ves: aunque solo sea 1px más grande de lo que debiera, se ve fatal.

Cómo solucionarlo
Necesitas saber el tamaño exacto que quiere tu blog para sus banners. Puede que en la info de tu plantilla te diga cuál es el ancho exacto del sidebar. En ese caso ya lo tienes.
En caso de que no, puedes saberlo con la ayuda del complemento Firebug de Firefox. Te lo explico al final de este post, en un videotutorial cortito.
Piensa que la medida que cuenta es el ancho. El alto puede ser todo lo alto que quieras.

Cuando le das una orden incorrecta al subir una foto.

Las imágenes de los posts no suelen estar limitadas a un tamaño exacto. Pueden tener diferentes tamaños. Al contrario que banners y header que son de tamaño fijo. Pero esta libertad de tamaños exige actuar de forma muy precisa.

Por ejemplo: si estás en Blogger, ten en cuenta que de los tamaños que te ofrece para colocar una imagen sólo debes de elegir Tamaño original. Si eliges Extra grande, activas la orden que redimensiona la imagen para adaptarse al ancho máximo del blog. La amplía hasta el tope de ancho. Y se convierte en foto borrosa. Parece mentira que esta opción tan venenosa exista.

Si usas Photoshop, ya sabrás que las imágenes no se deben ampliar. Pero sí reducir: no pierden nitidez.
Sin embargo tienes que saber que cuando un blog/web reduce una imagen sí que la estropea.
Si subes una foto más grande que el espacio disponible (caso de subir la foto a burro barra sin saber qué mide) el blog la reduce. Y pierde definición, se hace foto borrosa y además sobrecargas tu espacio destinado a imagenes.

Cómo solucionarlo
1. Poniendo las imágenes de los posts al tamaño adecuado.

-Abre tu foto en Photoshop

-Abre una nueva imagen en Photoshop, del ancho que necesites para tu blog. Como alto dale un tamaño a ojo (lo puedes cambiar después)

-Vuelve a tu imagen original, di Selección > Todo ; Editar > Copiar

-Vuelve a la imagen para el post, di Editar > Pegar.

-Puede que solo veas un trozo de la imagen y que sea enorme. En ese caso con la lupa y apretando control para que se reduzca varias veces, vemos la imagen bien chiquitita. Ahora decimos Edición > Transformación libre. Ya vemos los límites de la foto.

-Con mayúsculas apretadas para no distorsionar la foto tomamos una esquina y la redimensionamos hasta que su ancho sea del tamaño que disponemos. Le decimos OK para fijar la transformación. Ahora con la herramienta de recortar el lienzo, ajustamos el alto, lo fijamos con OK.

-Ya lo tienes. Comprueba que es ok, mirando en Imagen > Tamaño de imagen.

2. Optimizando las fotos que van a ser muy grandes
Esto lo haces en las fotos grandes para que no pesen. Pero si lo haces en todas ahorrarás espacio en el alojamiento de tu web y aumentarás la velocidad de carga.

-Abre tu foto en Photoshop, elige Archivo > Guardar para web y pon la pestaña 2 imágenes.
-En Ajuste preestablecido elige jpg alta 60

Ahora mira lo que ha adelgazado tu imagen. Guarda como. Ahora tu imagen es grande y ligera.
¡Y optimizar no reduce la nitidez!

Hilando fino…

Ahora voy a explicarte otra cosa: Imagina que estás preparando unas imágenes para tu blog. Quieres poner un pantallazo de, por ejemplo, una cabecera de un blog. Te lo llevas a Photoshop y reduces ese tamaño para que quepa en el espacio que dispones para la imagen de tu post.
Esa cabecera lleva texto dentro.
Oh sorpresa… al ponerlo en el blog, el texto que hay dentro de esa imagen se ve borroso. Lo que no es texto está bien, el texto no.¿No era que en Photoshop sí puedo reducir sin perder calidad?¿Qué ha pasado?
Que ese texto forma parte de la imagen. Y los cambios de tamaño -incluso reducir- le afectan… porque es muy pequeño. El mínimo cambio que se produce en un par de pixels al reducirse no se notan. Pero si esos 2px forman parte de una letra, esa letra se va a ver afectada. Y se verá borrosa.

Cómo solucionarlo
Si te es posible, redimensiona esa imagen en Photoshop, pero no el texto. Si puedes añadir el texto al tamaño exacto que quieres quedará mucho mejor.

Cuando subes una imagen que se va a mostrar en varios tamaños

Por ejemplo, en tu tienda.
Sí, porque en una tienda subes el artículo una sola vez pero se muestra en tres tamaños: reducido en la home, a mayor tamaño en la pagina del producto. Y luego puede que tenga una opción que te permite ver el archivo aún más grande al hacer click encima. De manera que la mejor versión de esa foto es la versión de ese último click. La más oculta.
Si no hay una diferencia enorme de tamaños entre la foto más grande (la que vas a crear y subir) y la más pequeña mucho mejor. Eso significa que no estará muy reducida cuando la veas en la página de producto, la versión que debería ser la mejor.

Conclusión: La mejor opción en el caso de los tres tamaños de las tiendas es que cuando diseñes tu tienda pongas la foto de la página de las características del producto lo más grande que puedas. Si hay opción de hacer click encima que no sea mucho mas grande, para no usar versiones muy reducidas.

Mi opinión sobre el plugin lupa en las tiendas
Seguro que conocéis ese plugin que hace que puedas situar una especie de lupa sobre una foto de producto. A primera vista mola. Lo que hace es mostrarte la mejor imagen de una zona de un producto. Si la mejor resolución y nitidez de una imagen la ves en una lupa, la que estás viendo sin lupa es peor. No creo que merezca la pena guardar la mejor versión para una lupa.

Nitidez en las redes sociales

Facebook
Infórmate de los tamaños que rigen en Facebook en cada temporada y síguelos a rajatabla. Aun así no me gusta lo mal que interpreta las líneas y gráficos su algoritmo. Las fotos tienen un pase, pero recuerda, siempre que respetes las medidas exactas.
Otras gracias que tiene: las Instagram en Facebook salen borrosas en la versión ordenador, probablemente porque las amplian. Y resumiendo: Facebook no es lugar para poner tus álbums de fotos de calidad de tu negocio.

Twitter
La cabecera de Twitter nueva para mi es un quebradero de cabeza. No puedo, no me sale. Respeto sus medidas y la veo borrosa, Me rindo.
El avatar de Twitter se ve bien en la pagina de usuario, pero en el timeline (es decir lo que va a ver todo el mundo) reduce fatal. Mi consejo: pon un diseño simple que al menos al reducir no sea confuso.

Pinterest
En Pinterest volvemos al caso de subir una imagen y que se muestre en dos tamaños a la vez. Por suerte, el algoritmo con el que manejan las imágenes en Pinterest es más acertado y no hay apenas queja por mi parte. Tienes que subir tu foto (en caso de que subas una imagen especialmente creada para la promoción de un post de tu blog, por ejemplo) pensando en el tamaño grande. Como Pinterest reduce bien no hay problemas.

Google+
Y tampoco hay problema con Google+.

Así que ya lo ves: resumiendo, las imágenes se ponen borrosas cuando el blog/la plataforma las amplía o reduce. Cuida los tamaños y controla bien este tema y dejará de darte problemas.

Aun hay cosas que puedes aprender sobre las fotos en los blogs y muchos otros detalles de diseño, fotografia y Photoshop Meisi Club. Échale un vistazo: tienes un mes gratis de prueba. Y cuesta solo 10€/mes en caso de que te interese.

Comparte con estos botoncitos si encontraste útil este post. ¡Gracias!

Te dejo con el videotutorial en el que te enseño a conocer las medidas de tu blog o web. Haz clic en la ruedita para ponerlo a alta resolución, 1080p. Lo verás mejor a toda pantalla.

Apúntate a Meisi Club.
Diseño cada día por 10/€ mes

Meisi Club es un servicio de suscripción mensual en el que podrás acceder a videotutoriales y podrás permanecer el tiempo que quieras.