Decía Oscar Wilde que “no hay una segunda oportunidad para una primera impresión”.
Aplicado a un blog, esto quiere decir que no todo es el contenido, sino que las primeras sensaciones de una persona cuando visita tu blog determinarán en gran medida si se queda o no. Y estas primeras sensaciones son inevitablemente en gran medida visuales.
Para concienciarse de en qué medida esto puede ser importante, me parece muy interesante el estudio que se cita en este post de HubSpot. En este estudio la psicóloga e investigadora Dra. Elizabeth Sillence pidió a un grupo de personas que revisasen una serie de sitios web hipertensión. A continuación, evaluaron si confiaban o desconfiaban del sitio web.
El estudio obtuvo el sorprendente resultado de que el 94% de los encuestados desconfiados atribuían su actitud al diseño del sitio web.
Por suerte, hoy en día contamos con miles de temas para WordPress, muchos vienen de fábrica con un diseño atractivo. Pero es fácil echarlo todo a perder con los detalles y uno de ello es utilizar luego imágenes de mala calidad en los contenidos: imágenes pixeladas, borrosas, con unas dimensiones mal elegidas que hacen imposible de reconocer su contenido, etc.
De hecho, en los posts de invitado, hemos tenido muchos más problemas con las imágenes que con el contenido escrito, sobre todo, cuando se trata de capturas de pantalla. En las imágenes de paisajes o personas no se nota tanto, pero los contenidos de capturas de pantalla tienen típicamente contornos mucho más marcados y eso hace que los defectos de calidad se noten mucho más.
Y es una pena porque es muy fácil hacer capturas de pantalla que transmitan una sensación de excelente calidad. Sin embargo, la mayoría de la gente hace capturas de pantalla realmente malas que perjudican la impresión que dejan sus contenidos. Son errores totalmente innecesarios.
7 Consejos para crear capturas de pantalla bien hechas
Por ese motivo voy a dar en este post un repaso a todos estos vicios de mal acabado que nos hemos ido encontrando y cómo corregirlos. Empezamos viendo cómo hacer capturas de pantalla de muy buena calidad.
1. Escoge unas dimensiones coherentes con el formato de tu blog
Este punto es muy simple, veámoslo con un ejemplo: supongamos un post que hable del posicionamiento en Google del Corte Inglés y su competencia.
En un momento dado el autor inserta esta captura de pantalla con datos relevantes de la herramienta SEMrush para analizarlos:
¿Eres capaz de leer algo en esta imagen? Yo no…
Seguro que has visto imágenes así muchas veces, es un error muy típico. Aparte de desagradables por el hecho de forzar la vista, se convierten en un elemento absurdo por inútil. ¿Qué aporta esta imagen, aparte de una mala impresión, si no se puede reconocer nada de su contenido?
El problema ha sido que se ha capturado tal cual, sin pensar lo que se estaba haciendo, con una ventana maximizada en una resolución de pantalla Full HD (1920x1080 pixeles), una resolución cada vez más habitual en monitores de equipos de sobremesa.
Sin embargo, el ancho de columna de los posts de este blog es de 800 pixeles. Es decir, el ancho original de 1920 pixeles se ha tenido que reducir a menos de la mitad para visualizar la imagen en este post.
La consecuencia ha sido que el contenido ha menguado tanto que se ha vuelto ilegible, tanto por tamaño como por pérdida de calidad, porque por mucho que quieras, 1920 pixeles “no se pueden meter” en 800, no hay manera. Los contornos originales quedan totalmente difuminados.
Esto es algo que, por cierto, ocurre también mucho en vídeos de YouTube. Mucha gente hace sus vídeos con una resolución Full HD cuando mucha gente los va a ver en un portátil con la típica resolución 1366x768, o incluso con resoluciones aún menores en una Tablet o en un móvil.
Y pasa lo que tiene que pasar: lo ves fatal. O mejor dicho: no lo ves. Y no digamos ya las personas con problemas de vista…
¿No sería mucho más razonable haber hecho esta misma captura con unas dimensiones de ventana más pequeñas?
O, aplicado a los vídeos de YouTube, ¿no sería más razonable grabarlos con una resolución de pantalla HD básica de 1280*720 pixeles (que es, por cierto, la que personalmente te recomiendo y usamos nosotros en todos nuestros vídeos).
Aquí tienes un ejemplo de una captura con unas dimensiones de algo más de 1000 pixeles y cómo queda reducida a un ancho de 800. Verás que ya se muchísimo mejor:
Como ves, esta captura ya se le mucho mejor, aunque las letras siguen siendo pequeñas. Pero ahora, al menos, la imagen tiene la calidad suficiente. Una persona con problemas de vista que no pueda leer una letra a este tamaño, ahora, al menos puede ampliar la imagen desde su navegador con Ctrl +, cosa que antes habría sido inútil porque la imagen en sí estaba completamente difuminada.
La clave para que el resultado de reducir las dimensiones de una imagen sea bueno es la herramienta utilizada, el algoritmo que usa esa herramienta en el proceso de reducción.
[activecampaign form=317 css=1]
En nuestro caso, los mejores resultados hasta la fecha los hemos conseguido con la herramienta gratuita Free Online Picture Resizer (Picresize). Al final del post hablaré de ésta y más herramientas útiles.
Y para poner un ejemplo de un vídeo con resolución de 1280*720, te pongo también un vídeo reciente de nuestro canal de YouTube que explica cómo contratar el hosting de Webempresa con un descuento especial:
2. Centra la captura en lo que importa
Si te has fijado bien en la última captura, te habrás dado cuenta de un detalle: no está la ventana del navegador, la imagen se ha limitado a la información que es la relevante para el lector.
Eso no solamente es un poco más estético y bueno por quitar elementos innecesarios como la ventana del navegador que no aportan nada, sino que ayuda también a reducir aún más las dimensiones de la captura y conseguir unas dimensiones más adecuadas de cara a su publicación en el blog.
Además, en la parte de herramientas un poco más abajo en este post verás, que no necesitas editar la imagen capturada para recortar y cosas por estilo, sino que la puedes capturar para que salga directamente así.
3. Normaliza las dimensiones para tu blog
Un fallo de diseño muy frecuente que aplica tanto a las capturas de pantalla como a las imágenes en general es no normalizar las dimensiones de las imágenes utilizadas.
Es decir, ir insertando las imágenes tal como vienen en su estado original, una con 624x345 pixeles, otra con 387x201 pixeles y así sucesivamente. Esta sucesión de tamaños desiguales y arbitrarios es algo que queda simplemente mal en un contenido.
Mi consejo es que normalices las imágenes para que sean todas de un tamaño(s) estándar(es).
Por ejemplo, en nuestro caso hemos usado siempre un ancho de 800 pixeles para ancho completo o un ancho de 300 pixeles que irían alineadas a la izquierda o la derecha, según quede mejor en cada caso.
Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos y contenido que mantendrá a tus lectores enganchados:
- 77 Plantillas de títulos probados que multiplicarán los clics.
- Sacarás infinitas ideas para crear tus propios títulos.
- Con las palabras "mágicas" redactarás textos irresistibles.
- Vale para todo: blogs, tiendas online, redes sociales, etc.
Anímate, ¡que ya somos +50.000!
Cualquier imagen tiene que corresponder a estos tamaños y esa coherencia de las dimensiones utilizadas le sienta muy bien al resultado estético del contenido. Pero es más, hace poco hemos decidido que ya sólo vamos a usar imágenes de ancho completo con 800 pixeles porque realmente nos gusta más que sean todas de ancho completo, aunque lógicamente aquí ya entramos también en un terreno de gustos.
4. Si es posible, intenta que sea “pixel-perfect” o, al menos, lo más nítida posible
El único “pero” que se le puede poner a la imagen anterior es que no es “pixel-perfect”. Es decir, como la imagen original era de algo más de 1000 pixeles, al reducirla a 800 pixeles en el blog, los pixeles ya no se pueden corresponder a los originales. El algoritmo de reducción intenta conseguir el mejor resultado posible, pero es inevitable que la imagen se vuelva algo borrosa debido a este proceso de ajuste.
Por tanto, habría sido mejor haber reducido la ventana hasta llegar a unos 800 pixeles de ancho para capturar su contenido. Pero el problema era que esa página concreta no lo permitía, al hacerlo se cortaba parte del contenido, algo que te pasará a ti también más de una vez. Por tanto, no hubo más remedio que quedarse en unas dimensiones un poco mayores.
Para que aprecies mejor el efecto, compara esta versión “pixel-perfect” de la captura anterior, es decir, dónde el número de pixeles usado en la visualización corresponde exactamente al número de pixeles usado en la propia captura. En nuestro caso para demostrar el efecto, la captura la hemos recortado a 800 pixeles asumiendo que se corta por la derecha (porque la página web no permite reducir su ancho a 800 pixeles):
En la práctica no nos valdría esta captura por el trozo de la derecha que se ha cortado, pero me sirve para que veas la diferencia entre una imagen que sea “pixel-perfect” y otra que no lo es. No es una diferencia flagrante, pero la versión “pixel-perfect” tiene una nitidez perfecta que le da un plus de calidad que se nota.
Con esta captura en concreto nos hemos tenido que aguantar porque las limitaciones de la página web capturada impidieron hacerla con un ancho de 800 pixeles, pero en otras ocasiones vas a poner reducir la ventana perfectamente a unas dimensiones que te permitan una captura perfecta a nivel de pixeles. Así que, siempre que sea posible, hazlo.
5. Evita efectos de pixelado usando el formato PNG
El pixelado de capturas de pantalla es algo que ocurre con mucha frecuencia y que queda realmente mal, transmite una sensación que no puedo calificar más que cutre y que desmerece mucho.
Casi siempre la razón es que se ha utilizado el formato de imagen digital JPG en vez de PNG.
La diferencia fundamental entre estos dos formatos es que PNG usa una compresión lossless (sin pérdida de información) y permite trabajar con trasparencias, mientras que JPG no soporta transparencias, pero permite trabajar con pérdida de información, ajustable por el usuario.
A mayor grado de pérdida de información, o lo que es lo mismo: peor calidad, más pixelada saldrá la imagen, pero también más pequeño será el fichero JPG.
Para que nos entendamos, echa un vistazo al siguiente ejemplo, una captura bien capturada que es "pixel-perfect" y guardada en formato PNG. Su tamaño de fichero es de 29,9 Kbytes:
Y ahora un ejemplo de la misma imagen, pero en un formato JPG y guardada con una calidad muy pobre, es decir, con un alto grado de pérdida de información. El tamaño de fichero es de 16,8 Kbytes:
Como puedes ver, hemos reducido el tamaño del fichero a casi la mitad, pero la calidad de la captura en formato JPG con baja calidad es nefasta. Fíjate, en particular, como alrededor de las letras y números aparecen “artefactos”, pixeles que no deberían estar ahí y producen esa sensación de calidad nefasta.
El quid de la cuestión es que este tipo de desperfectos se notan mucho más en capturas de pantallas (por sus contornos muy definidos) que en otro tipo de imágenes donde los contornos no sean tan geométricos y marcados como imágenes de paisajes o personas.
Por eso el formato JPG simplemente, en general, no es un buen formato para hacer capturas de pantalla, salvo que éstas contengan precisamente fotos de imágenes, personas, etc. Es decir, imágenes sin los contornos muy marcados típicos de las capturas de pantalla.
Ojo, esto no quiere decir, que no se puedan hacer capturas perfectas en JPG. Se puede si se guardan con pérdidas cero o con muy pocas pérdidas, pero para eso casi siempre va a ser mejor opción utilizar el formato PNG que se suele adaptar mejor a este tipo de imágenes y producir incluso tamaños de fichero más pequeños en este caso (si se optimiza como veremos luego).
Por tanto, como regla general, no hagas capturas de pantalla en formato JPG. Hazlas en formato PNG.
En cualquier caso, te animo a probar y experimentar y con esa experiencia vas a intuir perfectamente qué formato es el mejor en cada caso concreto.
6. Evita cortes anti-estéticos
Aquí tienes un ejemplo de una imagen con cortes anti-estéticos:
Como ves, no solamente se ha cortado la cara de Pat Flynn por la mitad, sino también el botón verde del lado izquierdo.
La misma captura queda mucho mejor así:
A veces es muy complicado conseguir imágenes sin cortes feos, en ese caso puede ser un buen truco editar la imagen para rellenar las partes cortadas con el color del fondo que rodea esa parte.
De hecho, esto lo he hecho en las imágenes del punto 4. Compáralas con ésta que tiene cortes:
A primera vista seguramente te cueste ver la diferencia, pero vuelvo a poner aquí la imagen anterior en la que se han rellenado las zonas con cortes para que veas la diferencia:
¿Ves ahora la diferencia?
Fíjate en la esquina superior izquierda y en la esquina inferior derecha y compáralas entre ambas imágenes.
Este ejemplo es especialmente sutil, pero, aun así, salvo personas visualmente muy insensibles, nos damos cuenta incluso subconscientemente, percibimos la segunda como más estética, incluso sin saber muy bien por qué.
Y aquí te dejo otro ejemplo típico de recorte feo versus recorte bien hecho.
Recorte mal hecho:
Recorte bien hecho:
7. Plantéate añadir una leyenda
El último consejo es muy simple: plantéate utilizar siempre leyendas, en toda y cada una de tus imágenes, salvo en casos en los que por razones específicas no sea lo más conveniente.
En primer lugar, una leyenda es siempre una buena manera de añadir un poco más de valor resaltando algún aspecto particularmente importante de la imagen y, en segundo lugar, es un elemento que estéticamente también suele quedar muy bien.
Además, ayuda a romper el flujo de lectura a lo largo de los párrafos y hacer esto ayuda a conseguir una lectura más entretenida y contribuye con ello a mantener la atención del lector.
Qué formatos imagen usar para qué cosas
Vistas las buenas prácticas que te he comentado, no puedo cerrar un post como éste sin hablar también un poco de los principales formatos de imágenes y cuándo usarlos, y recomendar algunas herramientas que te ayudarán mucho en todo esto.
En cuanto a los formatos voy a ser breve. Hay básicamente dos importantes en este contexto:
Cuando usar el formato PNG
Como decía antes, PNG es un formato con compresión sin pérdidas. Funciona especialmente bien cuando la imagen contiene muchas formas muy geométricas, como es el caso para las capturas de pantalla (por las ventanas, letras, etc.).
Además, este tipo de imágenes son especialmente sensibles a los artefactos que generan las imágenes JPG por lo que conviene usar el formato PNG para ellas.
Cuando usar el formato JPG
De lo anterior se deduce que es más apropiado para fotos sin contornos muy marcados, es decir, de personas, paisajes, etc.
El formato JPG permite la compresión con pérdidas de información, lo que quiere decir que si bajas la calidad (la cual la puede ajustar el usuario) lo suficiente se suprime información uniendo pixeles con tonalidades de color parecidas entre sí, etc. Se pierden los detalles de la imagen.
La ventaja es que se pueden conseguir tamaños de fichero muy pequeños, pero si no se usa con buen criterio, los resultados pueden realmente malos como has visto antes. Por tanto, no suele ser una buena opción para capturas de pantalla.
Herramientas recomendadas
En cuanto a herramientas, por suerte, hay muchas, casi todas gratuitas y de mucha calidad.
Para hacer capturas de pantalla
Las capturas a pantalla completa se pueden con las herramientas del sistema operativo, en el caso de Windows, por ejemplo, la tecla de “Impr Pant” o “Alt” + “Impr Pant” para capturar la ventana activa.
Esto lleva la captura al portapapeles y de ahí se puede pegar en el programa “Paint”, que viene incorporado en todas las versiones de Windows, y desde Paint ya se guarda como fichero PNG o JPG.
En el caso de Mac, las posibilidades son un poco más sofisticadas como puedes ver en este post.
Pero la mayoría de las veces harás capturas dentro de un navegador web. Aquí nos interesa muchas veces capturar sólo la página web en sí o una parte de ella, no toda la pantalla con la ventana del navegador, etc.
Mi herramienta favorita para es la herramienta integrada en Firefox (se activa desde el menú de Desarrollador o con Ctrl + M + mayus). Es muy simple y práctica de usar y tiene todo lo que necesitas.
Lo que la hace tan práctica son tres cosas:
- Que crea un pequeño área de captura dentro del cual se visualizad la página web que puede ser mayor que el tamaño del navegador, tanto en sentido horizontal como vertical. Esto permite capturar páginas muy altas que se salen de la zona visible del navegador de una sola acción.
- Puedes especificar directamente la dimensión en pixeles. Eso hace de la creación de capturas “pixel-perfect” una tarea trivial.
- Con el botón de la cámara fotográfica te guarda la zona de captura directamente como una imagen PNG.
Si prefieres usar otros navegadores, existen, por ejemplo, extensiones para Google Chrome como Awesome Screenshot que funcionan de una manera parecida.
Para reducir las dimensiones de una imagen
La herramienta que más nos gusta es Picresize. Nos gusta porque reduce con muy buena calidad y es muy cómoda tenerla en la web de modo que no necesitas instalar nada y la tienes en un simple marcador de tu navegador web.
Además, permite trabajar por lotes. Es decir, puedes subir 10 imágenes y reducirlas a un mismo ancho con una sola acción, la herramienta ajustará automáticamente le alto que corresponda en cada una.
Por otra parte, existen plugins para WordPress que hacen esto mismo de manera automática, pero, en nuestra experiencia, no llegan a la calidad que llega Picresize. Por tanto, invertir ese minuto o dos que te puede llevar ajustar las dimensiones de tus imágenes merece la pena.
Para recortar imágenes
El recorte de imágenes y, en general, toda la edición de imágenes, la hacemos con la aplicación libre Paint.net (no confundir con la aplicación Paint de Windows, son aplicaciones diferentes). Además, de la funcionalidad estándar que es completísima, existen muchas extensiones que permiten añadir funcionalidad muy avanzada.
Y si prefieres una herramienta en web, también te podemos recomendar Pixlr. Es mucho más simple que Paint.net, pero aun así tiene realmente todo lo que cualquier blogger puede necesitar.
Para optimizar el tamaño de los ficheros
La herramienta que más nos gusta para esto es TinyPNG. A pesar de su nombre, funciona también con imágenes JPG y nos gusta porque reduce mucho el tamaño sin perder nada de calidad.
Al igual que Picresize permite funcionar con lotes de imágenes y llega a un nivel de reducción que no hemos conseguido obtener con plugins de WordPress equivalentes.
Conclusiones
Ha sido un post largo, pero no pienses por ello que las acciones que te he propuesto aquí te vayan a consumir mucho tiempo, son cosas en las que vas a tardar apenas unos minutos y, sin embargo, el impacto de unas imágenes con una buena calidad frente a imágenes mala calidad en un contenido es grande.
Si tenemos en cuenta que idealmente deberías procurar hacer contenidos lo más “evergreen” posible, es decir, contenidos que traigan visitas durante años, invertir unos pocos minutos adicionales en una experiencia mejor para el lector debería merecer la pena sobradamente.
Y, por último, piensa siempre en cómo las imágenes grandes penalizan los tiempos de carga de la web. Optimízalas en dimensiones y tamaño de fichero para evitar este problema. Siguen siendo muchas las webs que usan imágenes sin optimizar, a veces, con tamaños de fichero de varios megabytes.
Una página con varias imágenes así mata tus tiempos de carga, aunque tengas el servidor de hosting más potente del mundo. Y es que el problema ya no es el lado servidor, sino el lado del lector que cuenta con limitaciones en ancho de banda que te ponen un techo en el tamaño razonable para tus páginas.
No es razonable subir una foto hecha con tu móvil de, por ejemplo, 4000x3000 pixeles, cuando el ancho de tu página es de 800 pixeles, La calidad de los 4000 pixeles de ancho se pierde visualizándolos dentro de los 800 pixeles que vas a tener disponibles en la página web.
Sin embargo, la penalización en tamaño de fichero persiste, penalizando con ello fuertemente la carga de la página y disparando el espacio consumido en tu hosting.
Una imagen así puede ocupar fácilmente 5 o 6 megabytes, una barbaridad si tenemos en cuenta que una página web, para que cargue rápido, no debería sobrepasar un tamaño total de 1-2 megabytes.
Sin embargo, la misma imagen reducida a 800x600 pixeles y optimizada en tamaño con TinyPNG no debería ocupar más de 150-200 kbytes como mucho. ¡Estamos hablando de hasta 30 veces menos!
Así que ya sabes, merece hacer un pequeño esfuerzo para usar las imágenes bien en tu blog 🙂
Me ha parecido muy interesante. Yo se poco sobre todo esto, pero si es bueno saber a que programa recurir para disminuir el tamaño de las imágenes de mi blog.
Gracias
Gran artículo. Me sorprende que no hayas dicho nada de Recortes (incluido en Windows)
Hola Miguel,
Por una parte, me quería centrar más en las capturas dentro de los navegadores web y, por otra parte, la verdad es que no me gusta demasiado esa herramienta.
A mo juicio le faltan cosas imprescindibles, principalmente, que cuando hagas el recorte, tengas la oportunidad de ajustar sobre cuadrado de selección, ya que de lo contrario tienes que tener muuucho pulso para acertar cuando el recorte no es trivial. Hasta dónde es imposible ajustar nada, marcas el recorte y lo captura inmediatamente en cuando sueltas el ratón.
¡Un saludo!
Berto
Hola Berto, ja,ja, yo también cometí esos errores con vuestra entrevista.
Algo que parece tan trivial como capturar una pantalla tiene su ciencia... 😉 Al final el diablo vive en los pequeños detalles.
Gracias por compartir estos trucos. Se ve que cuidáis todos los detalles.
Un abrazo,
Marcos
Hola Marcos,
!Qué alegria ver tu comentario! Espero que todo vaya muy bien 🙂
¡Un abrazo!
Berto
Me ha encantado tu post, muchas gracias por esta información tan útil, seguiré tus pasos! ?
Me alegro Marta 🙂
¡Un saludo!
Berto
Como siempre, un grandísimo artículo, dando muchísimas posibilidades, no conocía el truco de Firefox, me lo apunto, y también picresize .
Un abrazo y gracias.
Me alegro de que te haya gustado, Javi 🙂
¡Un saludo!
Berto
Hola Berto.
No me canso de agradecerte la calidad de los regalos que nos das a tus lectores.
Por lo general uso el JPG para las capturas y no me habia dado cuenta del por que no han sido de muy buena calidad.
Valioso tu post.
Gracias.
Sí, eso es una piedra por la que tropieza muuuucha gente 🙂
Un saludo,
Berto
Gracias Berto.
Precisamente estaba teniendo problemas con ciertas presentaciones y con este post se me solucionaron de manera perfecta.
Me alegro 🙂
¡Un saludo!
Berto
Hola Berto, interesante como siempre.
Recientemente he estado utilizando Tinypng para comprimir todas las imágenes que subo a mi blog. Ante esto, antes cada vez que cargaba una imagen, el plugin Wp smush-It me daba la opción de comprimir la imagen, pero ahora ya no lo hace.
Tu cuentas con un plugin de optimización de imágenes? Quizá haciendo este procedimiento me puedo dar el lujo de remover este plugin para liberar espacio, aunque sea poco.
Una ultima pregunta es: Leer tu blog es muy cómodo a la vista y he estado revisando prácticas para hacer la lectura de mi blog más cómoda, como disminuir el ancho de la línea, el espacio entre líneas y párrafos, el contraste de la letra con el fondo blanco, el tipo de letra para h1, h2 y párrafos, etc. Si puedes decírme, ¿qué fuente de letra usas y en qué tamaño y color?
Creo que sería valioso para tus lectores si haces un post enseñando esto.
Hola Diego,
Con esta el inspecto que se explica aquí en este post, lo puedes ver tú mismo en cada apartado del blog:
https://www.c2cerodes.bertolopez.com/aprender-css-basico-desde-cero/
¡Un saludo!
Berto
Buen día, gracias por este excelente post. quisiera saber si puedo hacer capture de pantalla a algunos videos de youtube para obtener imagenes para el blog de mi empresa, estos videos por lo general son en un idioma diferente al español pero con el mismo fin,
Hola Juan,
Entiendo que te refieres al lado jurídico del tema, en ese caso te recomiento este post:
https://www.c2cerodes.bertolopez.com/derechos-imagenes-internet-copyright-copyleft-fair-use/
¡Un saludo!
Berto
Hola:
Me encantó el post. Si bien uso la aplicación web befunky para reducción de tamaños, no conseguía solucionar que se quitarán esos restos grises de mis capturas. Acabo de darme cuenta por qué: las guardaba en formato JPG.
Me guardo en mi bitácora de herramientas algunas aplicaciones que no conocía.
¡Mil gracias!
Gracias a ti por leer el blog 🙂
¡Un saludo!
Berto
Hola Berto!!
Gran artículo, la verdad, pensaba que la forma en que estaba haciendo las capturas de pantalla era la forma correcta, y con este articulo me he dado cuenta del error que estaba cometiendo. Utilizaba el formato JPG y cuando les bajaba la calidad se notaba muchísimo!!
Gracias por esta valiosa información
Me alegro de haber podido sacarte de la confusión 🙂
¡Un saludo!
Berto
Gracias me ayudan mucho los post y cada vez aprendo más cosas sobre los blogs, redes sociales, webs, imágenes.
Me alegro 🙂
¡Un saludo!
Berto
No utilizo capturas de pantalla en el blog, pero sí para otras cosas, así que me ha parecido un contenido muy útil, sobre todo por las herramientas que mencionas. Gracias, Berto 😉
Hola Yolanda,
Aunque he puesto lo de las capturas de pantalla en el título, efectivamente, el ámbito de aplicación es mucho más amplio 🙂
¡Un saludo!
Berto
Muy buen post , como siempre
Utilizo a menudo las capturas de pantalla y ahora se como optimizarlas mejor
Muchas gracias
Hombre Sergio,
Una alegría verte por aquí 🙂
¡Un fuerte a Ponferrada a los dos y también de Raquel!
Berto
Berto eres un artista.
Me ha encantado tu artículo, yo siempre he tenido muy en cuenta el recortar la imagen de una forma adecuada para que no se vean los cortes, pero la idea de la calidad de la imagen me ha encantado.
Muchas gracias
Genial, me alegro un montón de que te haya servido el post 🙂
¡Un saludo!
Berto
Yo uso Snagit, un programa que permite hacer capturas con scrolling (para coger toda la página), recortar los bordes con efecto rasgado, marcar y dibujar sobre el pantallazo. Hasta la fecha, me parece la mejor herramienta que he encontrado.
Gracias por la referencia Paula, echaremos un vistazo 🙂
¡Un saludo!
Berto
Un post super interesante Berto.
Yo utilizo mucho las capturas de pantalla y aunque creía que lo estaba haciendo bien, gracias a tu post he descubierto que cometo un montón de fallos.
Gracias!
Me alegro 🙂
¡Un saludo!
Berto
Hola Berto, qué bueno que hayas hecho este post.
Doy Fé que utilizar el navegador Firefox para hacer las capturas de pantalla es muy útil y consigues realmente imágenes nítidas.
Eso lo aprendí gracias a ti 😉
Utilizar imágenes de calidad en una web es fundamental para impactar desde un primer momento. Cuando empleas imágenes mal diseñadas o borrosas, puedes espantar a una visita.
Yo utilizo Photoshop para optimizar el tamaño de las imágenes y que la web vaya bien. TinyPNG es una buena alternativa para quienes no lo utilizan.
Un saludo.
Hola Susana,
Es una excelente opción, no cabe duda. Pero por suerte hay también opciones gratuitas para quienes no se pueden permitir o simplemente no les compensa trabajar con herramientas profesionales de pago.
¡Un saludo!
Berto
Opción gratuita: Gimp.
Para un bloguero, nada que envidiar a PhotoShop.
Saludos.
Hola Jesús,
Sí, pero no en mi opinión. Yo he sido usuario intensivo de Gimp y está muy bien, es muy potente y una alternativa muy seria incluso para profesionales.
El problema que le veo para el usuario tipo medio es que no resulta suficientemente intuitivo, no es fácil de usar. Pero eso para más o menos parecido también a Photoshop.
Para el usuario blogger típico es mucho mejor tener herramientas especializadas separadas que hacen una cosa o, a lo sumo, dos y que se ven clárisimo como usarlas. Eso es para mi realmente la gran ventaja de herramientas como Picresize o TinyPNG. No hay pérdica con ellas y lo que hacen, lo hacen muy bien.
Un saludo,
Berto
Muy buen post y consejos en general Berto.
Me quedo sobre todo con la recomendación de picresize que no la conocía y parece que promete. Gracias.
Es simple y hace muy bien lo que tiene que hacer, seguro que no te defraudará 🙂
¡Un saludo!
Berto
Hola Berto!
Muy muy bueno tu post, muchas cosas las sabía pero las herramientas me las apunto para probarlas. Qué bueno que hayas tocado este tema.
Siempre he tenido una duda, y es que si las hacemos 'pixel-perfect'... qué pasa con las pantallas 4K, 5K o Retina? Se suelen ver muy borrosas porque reescalan... alguna idea?
Muchas gracias!
Hola Daniel,
Aquí las resoluciones ya no son "reales" por así decirlo. De estos casos no he querido hablar porque ya liaría la mayoría de los lectores 🙂
Quizás lo trate en un segundo post, pero la cuestión es que si lo tienes perfecto en el sentido que se describe aquí, saldrán muy bien también.
La cuestión es que no aprovechas al 100% el potencial, pero la diferencia ya es pequeña. Es como cuando se proyecta una película Full HD en una pantalla 4k, pero si la fuente Full HD es realmente buena (muchas veces "HD" no es un HD salchichero por una compresión excesiva, etc.), el resultado en 4k sigue siendo muy bueno también. Y si la tele hace la interpolación bien, casi indistinguible de una fuente 4k original. Te lo dice un propietario de una tele 4k 🙂
Puedes ver el efecto en cualquier smartphone de gama media-alta. El ancho "virutal" de la pantalla suele ser de 320 pixeles cuando en número de pixeles real de la pantalla es el doble o triple. Y las imágenes quedan estupendas igualmente.
Total, no me preocuparía excesivamente, salvo en casos especiales como web de fotografía, por ejemplo, donde se justifica que las resoluciones de las imágenes sean más altas, aunque cuidado en ese caso con que no se dispare el peso de las páginas.
¡Un saludo!
Berto