{"id":5483,"date":"2014-06-19T10:20:43","date_gmt":"2014-06-19T08:20:43","guid":{"rendered":"https:\/\/meisi.es\/diseno\/\/?p=5483"},"modified":"2017-06-16T12:43:29","modified_gmt":"2017-06-16T10:43:29","slug":"no-mas-fotos-borrosas-en-mi-blog","status":"publish","type":"post","link":"https:\/\/meisi.es\/diseno\/no-mas-fotos-borrosas-en-mi-blog\/","title":{"rendered":"No m\u00e1s fotos borrosas en mi blog"},"content":{"rendered":"

\"c\u00f3mo<\/p>\n

Te ha pasado, seguro: subes un banner a tu blog y no est\u00e1 n\u00edtido. Pones una imagen en tu post y est\u00e1 borrosa. Subes im\u00e1genes a tu tienda online y cada una aparece una nitidez diferente.
\nTu avatar de Twitter se ve miserable y enano. Despu\u00e9s de todo el cuidado en fotografiar, editar y dise\u00f1ar se ve fatal. Es que no solo da rabia, es que no nos lo podemos permitir. Ah\u00ed afuera hay blogs y webs con im\u00e1genes perfectamente n\u00edtidas. Se\u00f1al de que es posible. Por favor: no m\u00e1s fotos borrosas en mi blog.<\/p>\n

En los \u00faltimos a\u00f1os he podido enfrentarme a un mont\u00f3n de estas situaciones, pero las tengo dominadas… \u00a1casi todas!<\/p>\n

Te voy a dar las claves para que no te vuelvas a ver con las horribles im\u00e1genes borrosas. Hay dos situaciones t\u00edpicas que se cargan tus fotos:<\/p>\n

Cuando el blog\/web redimensiona una imagen porque no tiene el tama\u00f1o adecuado.<\/p>\n

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\u00e1genes y el resultado es que se las carga sin piedad. Mira este ejemplo, \u00a1la foto borrosa solo tiene 1px m\u00e1s que la n\u00edtida!
\nEsto est\u00e1 en el top 1 de lo m\u00e1s destructivo. Esta es la web de la fot\u00f3grafa. LuciaM<\/a><\/p>\n

\"c\u00f3mo<\/p>\n

La ve\u00edas bien en Photoshop, \u00bfentonces qu\u00e9 has hecho mal?
\nLa verdadera clave de acertar con la nitidez es crear la imagen al tama\u00f1o exacto que se va a mostrar. Photoshop te la muestra bien tenga el tama\u00f1o que tenga, claro. Pero si tu blog detecta que la imagen es demasiado grande la reduce. Reducir emborrona las im\u00e1genes. Ya ves: aunque solo sea 1px m\u00e1s grande de lo que debiera, se ve fatal.<\/p>\n

C\u00f3mo solucionarlo<\/strong>
\nNecesitas saber el tama\u00f1o exacto que quiere tu blog para sus banners. Puede que en la info de tu plantilla te diga cu\u00e1l es el ancho exacto del sidebar. En ese caso ya lo tienes.
\nEn 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.
\nPiensa que la medida que cuenta es el ancho. El alto puede ser todo lo alto que quieras.<\/p>\n

Cuando le das una orden incorrecta al subir una foto.<\/p>\n

Las im\u00e1genes de los posts no suelen estar limitadas a un tama\u00f1o exacto. Pueden tener diferentes tama\u00f1os. Al contrario que banners y header que son de tama\u00f1o fijo. Pero esta libertad de tama\u00f1os exige actuar de forma muy precisa.<\/p>\n

Por ejemplo: si est\u00e1s en Blogger, ten en cuenta que de los tama\u00f1os que te ofrece para colocar una imagen s\u00f3lo debes de elegir Tama\u00f1o original<\/em>. Si eliges Extra grande<\/em>, activas la orden que redimensiona la imagen para adaptarse al ancho m\u00e1ximo del blog. La ampl\u00eda hasta el tope de ancho. Y se convierte en foto borrosa. Parece mentira que esta opci\u00f3n tan venenosa exista.<\/p>\n

\"c\u00f3mo<\/p>\n

Si usas Photoshop, ya sabr\u00e1s que las im\u00e1genes no se deben ampliar. Pero s\u00ed reducir: no pierden nitidez.
\nSin embargo tienes que saber que cuando un blog\/web reduce una imagen s\u00ed que la estropea<\/strong>.
\nSi subes una foto m\u00e1s grande que el espacio disponible (caso de subir la foto a burro barra sin saber qu\u00e9 mide) el blog la reduce. Y pierde definici\u00f3n, se hace foto borrosa y adem\u00e1s sobrecargas tu espacio destinado a imagenes.<\/p>\n

C\u00f3mo solucionarlo<\/strong>
\n1. Poniendo las im\u00e1genes de los posts al tama\u00f1o adecuado.<\/strong><\/p>\n

-Abre tu foto en Photoshop<\/p>\n

-Abre una nueva imagen en Photoshop, del ancho que necesites para tu blog. Como alto dale un tama\u00f1o a ojo (lo puedes cambiar despu\u00e9s)<\/p>\n

-Vuelve a tu imagen original, di Selecci\u00f3n<\/em> > Todo<\/em> ; Editar<\/em> > Copiar<\/em><\/p>\n

-Vuelve a la imagen para el post, di Editar<\/em> > Pegar<\/em>.<\/p>\n

-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\u00f3n<\/em> > Transformaci\u00f3n libre<\/em>. Ya vemos los l\u00edmites de la foto.<\/p>\n

-Con may\u00fasculas apretadas para no distorsionar la foto tomamos una esquina y la redimensionamos hasta que su ancho<\/strong> sea del tama\u00f1o que disponemos. Le decimos OK para fijar la transformaci\u00f3n. Ahora con la herramienta de recortar el lienzo, ajustamos el alto, lo fijamos con OK.<\/p>\n

-Ya lo tienes. Comprueba que es ok, mirando en Imagen<\/em> > Tama\u00f1o de imagen<\/em>.<\/p>\n

2. Optimizando las fotos que van a ser muy grandes<\/strong>
\nEsto lo haces en las fotos grandes para que no pesen. Pero si lo haces en todas ahorrar\u00e1s espacio en el alojamiento de tu web y aumentar\u00e1s la velocidad de carga.
\n\"c\u00f3mo<\/p>\n

-Abre tu foto en Photoshop, elige Archivo<\/em> > Guardar para web<\/em> y pon la pesta\u00f1a 2 im\u00e1genes.<\/span>
\n-En Ajuste preestablecido<\/em> elige jpg alta 60<\/span><\/p>\n

Ahora mira lo que ha adelgazado tu imagen. Guarda como<\/em>. Ahora tu imagen es grande y ligera.
\n\u00a1Y optimizar no reduce la nitidez!<\/p>\n

Hilando fino…<\/p>\n

Ahora voy a explicarte otra cosa: Imagina que est\u00e1s preparando unas im\u00e1genes para tu blog. Quieres poner un pantallazo de, por ejemplo, una cabecera de un blog. Te lo llevas a Photoshop y reduces ese tama\u00f1o para que quepa en el espacio que dispones para la imagen de tu post.
\nEsa cabecera lleva texto dentro.
\nOh sorpresa… al ponerlo en el blog, el texto que hay dentro de esa imagen se ve borroso. Lo que no es texto est\u00e1 bien, el texto no.\u00bfNo era que en Photoshop s\u00ed puedo reducir sin perder calidad?\u00bfQu\u00e9 ha pasado?
\nQue ese texto forma parte de la imagen. Y los cambios de tama\u00f1o -incluso reducir- le afectan… porque es muy peque\u00f1o. El m\u00ednimo 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\u00e1 borrosa.
\n
\nC\u00f3mo solucionarlo<\/strong>
\nSi te es posible, redimensiona esa imagen en Photoshop, pero no el texto. Si puedes a\u00f1adir el texto al tama\u00f1o exacto que quieres quedar\u00e1 mucho mejor.<\/p>\n

Cuando subes una imagen que se va a mostrar en varios tama\u00f1os<\/p>\n

Por ejemplo, en tu tienda.
\nS\u00ed, porque en una tienda subes el art\u00edculo una sola vez pero se muestra en tres tama\u00f1os: reducido en la home, a mayor tama\u00f1o en la pagina del producto. Y luego puede que tenga una opci\u00f3n que te permite ver el archivo a\u00fan m\u00e1s grande al hacer click encima. De manera que la mejor versi\u00f3n de esa foto es la versi\u00f3n de ese \u00faltimo click. La m\u00e1s oculta.
\nSi no hay una diferencia enorme de tama\u00f1os entre la foto m\u00e1s grande (la que vas a crear y subir) y la m\u00e1s peque\u00f1a mucho mejor. Eso significa que no estar\u00e1 muy reducida cuando la veas en la p\u00e1gina de producto, la versi\u00f3n que deber\u00eda ser la mejor.<\/p>\n

Conclusi\u00f3n: La mejor opci\u00f3n en el caso de los tres tama\u00f1os de las tiendas es que cuando dise\u00f1es tu tienda pongas la foto de la p\u00e1gina de las caracter\u00edsticas del producto lo m\u00e1s grande que puedas. Si hay opci\u00f3n de hacer click encima que no sea mucho mas grande, para no usar versiones muy reducidas.<\/p>\n

Mi opini\u00f3n sobre el plugin lupa en las tiendas<\/strong>
\nSeguro que conoc\u00e9is 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\u00f3n y nitidez de una imagen la ves en una lupa, la que est\u00e1s viendo sin lupa es peor. No creo que merezca la pena guardar la mejor versi\u00f3n para una lupa.<\/p>\n

\"c\u00f3mo<\/p>\n

Nitidez en las redes sociales<\/p>\n

Facebook<\/strong>
\nInf\u00f3rmate de los tama\u00f1os que rigen en Facebook <\/a>en cada temporada y s\u00edguelos a rajatabla. Aun as\u00ed no me gusta lo mal que interpreta las l\u00edneas y gr\u00e1ficos su algoritmo. Las fotos tienen un pase, pero recuerda, siempre que respetes las medidas exactas.
\nOtras gracias que tiene: las Instagram en Facebook salen borrosas en la versi\u00f3n ordenador, probablemente porque las amplian. Y resumiendo: Facebook no es lugar para poner tus \u00e1lbums de fotos de calidad de tu negocio.<\/p>\n

Twitter<\/strong>
\nLa 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.
\nEl 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\u00f1o simple que al menos al reducir no sea confuso.<\/p>\n

Pinterest<\/strong>
\nEn Pinterest volvemos al caso de subir una imagen y que se muestre en dos tama\u00f1os a la vez. Por suerte, el algoritmo con el que manejan las im\u00e1genes en Pinterest es m\u00e1s 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\u00f3n de un post de tu blog, por ejemplo) pensando en el tama\u00f1o grande. Como Pinterest reduce bien no hay problemas.<\/p>\n

Google+<\/strong>
\nY tampoco hay problema con Google+.<\/p>\n

As\u00ed que ya lo ves: resumiendo, las im\u00e1genes se ponen borrosas cuando el blog\/la plataforma las ampl\u00eda o reduce. Cuida los tama\u00f1os y controla bien este tema y dejar\u00e1 de darte problemas.<\/p>\n

Aun hay cosas que puedes aprender sobre las fotos en los blogs y muchos otros detalles de dise\u00f1o, fotografia y Photoshop Meisi Club<\/a>. \u00c9chale un vistazo: tienes un mes gratis de prueba<\/strong>. Y cuesta solo 10\u20ac\/mes en caso de que te interese.<\/p>\n

Comparte con estos botoncitos si encontraste \u00fatil este post. \u00a1Gracias!<\/p>\n

Te dejo con el videotutorial en el que te ense\u00f1o a conocer las medidas de tu blog o web. Haz clic en la ruedita para ponerlo a alta resoluci\u00f3n, 1080p. Lo ver\u00e1s mejor a toda pantalla.<\/p>\n