De nuevo estoy aquí en dZoom pero hoy no os hablaré de iluminación.
Recientemente he actualizado algunas de mis herramientas de trabajo, mi ordenador y mi teléfono, y con mis nuevos dispositivos y sus pantallas de mucha mayor resolución me he dado cuenta de un error garrafal que estaba cometiendo, mi proceso de reducción para web.
Es un problema habitual que al reducir nuestras fotos para web perdamos mucha calidad, pero eso puede evitarse.
Como una imagen vale más que mil palabras, os muestro un ejemplo de como se veía una de mis fotos en mi nuevo ordenador antes y después del cambio que explico en este artículo
Seguir la evolución de las pantallas
Seamos realistas, aunque muchos puede que sigan trabajando con pantallas de 1024x768 pixeles, eso ya no es la norma.
Según este interesante artículo, podemos ver que mientras que en 2007 tan solo un 26% de los dispositivos contaba con una resolución mayor de 1024x768 hoy en día es más del 99%.
Así que sencillamente las fotos a 1024px son cosa del pasado. Si tu pantalla no tiene más resolución que esa, las pantallas del 90% de la gente que vea tus fotos sí la tiene, y ¿quién hay más importante que tu audiencia?
El Problema del Peso
En el pasado las conexiones a internet eran bastante lentas y unas fotos con calidad podían reducir la velocidad de navegación de los usuarios. Hoy en día las conexiones han mejorado mucho, y tenemos velocidades de transferencia muy altas incluso en teléfonos móviles.
El peso ya no es tan importante, pero aún debemos tenerlo en cuenta.
Adaptarse al Medio
No siempre se puede trabajar a la resolución ideal, ya que algunos medios nos limitan y hay que ser conocedor de cuáles son los requisitos de donde publicaremos nuestras fotos y adaptarlas a esa publicación.
Hoy en día cada lugar donde subimos fotos puede tener unos requisitos diferentes, es como si fuésemos a imprimir nuestras fotos para dos marcos distintos, uno de 10x50 y otro de 30x45, lógicamente sacaremos 2 fotos una para cada tamaño, pero en digital no solemos hacerlo.
Es lógico pues que saquemos diferentes tamaños de fotos según donde vaya a ser publicada y sobretodo como vaya a mostrarse.
El clásico error es conformarnos con un tamaño web que sirva para flickr, facebook, los foros etc.. pero no todos muestran las fotos igual por lo que hay que adaptarlas a cada publicación.
Mi proceso de reducción
Evidentemente este proceso no lo he inventado yo, así es como yo lo hago y es resultado de pruebas, lecturas y consejos de otros profesionales. Este formato lo uso para mi página web para mi facebook, estos medios adaptan el tamaño de sus fotos en base a la pantalla del espectador.
En mi blog sigo utilizando fotos más pequeñas ya que la plantilla no las muestra mayores, por lo que incluso con una pantalla retina no veré la foto mayor de 900px.
El Método
Lo primero es abrir nuestra imagen y una vez finalizado el procesado que queramos hacer, fusionar todas las capas visibles.
Con una imagen plana, debemos
cambiar el modo a 8 bits
Cambiado el modo, nos aseguramos que el perfil de color será el utilizado por casi todos los exploradores,
Srgb
Lo siguiente es la reducción de tamaño, en mi caso las reduzco a 2048px ya que está por encima del FULL HD y eso me garantiza que ningún monitor (ni un retina) me pixelará la imagen a pantalla completa. Es importante que en este paso marquemos la opción de bicúbica suave para ampliaciones.
Estamos reduciendo sí, pero no vamos a dejar que photoshop haga lo que quiera al reenfocar la foto, y ese tipo de procesado es el menos destructivo.
Corrección: Pablo nos indica lo siguiente. Dejar (aunque sea momentáneamente) una imagen a sólo 8 bits de profundidad por canal en un espacio extendido como es RGB, aumenta peligrosamente los espacios entre los limitados gradientes de color de una imagen a esa profundidad de bits, arriesgandote por ello a cargarte degradados suaves, así que primero reduce dicho espacio (conversión Adobe RGB- sRGB) y después reduce el número de niveles disponibles reduciendo la profundidad de bits.
Ahora nos hace falta enfocar la imagen: Hacemos una capa nueva y aplicamos a esta una máscara de enfoque, en mi caso a OJO, para este tamaño (recordar que la máscara de enfoque cambia según los píxeles de la imagen) utilizo un 100% de cantidad, entre 0'7 y 1'2 de Radio y un Umbral entre 0 y 5. Cada imagen es distinta.
Aquí os dejo un ejemplo de la diferencia de una máscara a otra, si os fijáis con un radio de 1'5 aparecen halos en la línea de la mejilla.
Hacemos el enfoque en una nueva capa ya que así podemos aplicar el enfoque selectivo en unas zonas y en otras no, con una máscara sobre la capa enfocada.
Ahora estamos listos para guardar la foto, usamos el menú guardar para web, y elegimos un JPG con una reducción al 70%. por mis pruebas esta combinación de 2048px y un 70% da un tamaño de alrededor de 500kb que me parece aceptable para los dispositivos de hoy en día, es mas, si tuviese que elegir bajaría la calidad más antes de bajar la resolución.
Recordar marcar la casilla de incrustar el perfil de color, lo último que queremos es que el perfil de color se pierda según quien vea la foto.
Os dejo otro ejemplo de un recorte de como se ve una foto al 100% en una pantalla retina, la de la izquierda es una foto a 1024px con 211kb de peso y la de la derecha a 2048 y 366kb con el proceso que hemos realizado.
Fin
Aquí tenéis la foto entera. ¿Y vosotros? ¿Pensáis que merece la pena el proceso? ¿Tienes alguna técnica alternativa?
Slayertxu dice
Me has hecho darme cuenta de que nunca me había preocupado por este tema. Yo tengo el blog en wordpress y las subo como máximo en un tamaño de 950 px, y siempre lo había hecho cambiando el tamaño en PhotoShop y guardando con la calidad más alta. Definitivamente, lo he estado haciendo mal, ¡gracias!
Como ejemplo…
https://slayertxu.wordpress.com/2013/05/03/diana/
Enrique A. Candela dice
Hola,
Me ha parecido muy interesante. ¿Como seria el equivalente en Lightroom?
Os sigo desde hace tiempo, felicitaros por vuestro trabajo.
Gracias
jj_lop dice
Otra alternativa es utilizar un software específico de reducción de imágenes, yo uso RIOT, que se puede descargar gratuito en este enlace http://luci.criosweb.ro/riot/download/
Simplemente le dices el tamaño en pixeles y el tamaño que quieres que ocupe el archivo final y el programa se encarga de todo lo demás.
El resultado es muy bueno como podréis comprobar:
http://lagranilusionfoto.com
http://blog.lagranilusionfoto.com
jslsvg dice
Tu artículo me ha hecho cambiar de opinión. Normalmente estaba reduciendo a 1650px lado largo, para flickr, pero tienes razón en los 2048px, creo que cambiaré.
Yo utilizo lightroom y tengo varios perfiles definidos según sean para un sitio u otro. Limito el tamaño en px por el lado largo, la calidad al 100%, con 72 px por pulgada de resolución y en enfoque para salida le pongo pantalla y calidad estandar. Hasta ahora no tengo queja.
Saludos
matutiten dice
Jon, particularmente he notado que facebook me destruye las imágenes, aplicándole una aparente mayor compresión (bajada de calidad) al JPG que estoy subiendo, con la consecuente aparición de los clásicos artefactos del JPG (esos cuadrados como si la imagen estuviera pixelada) sobretodo en los tonos azules y rojos o bien en las aristas. Con esto que has aportado, se mitiga un poco ese efecto?
Te cuento que mis fotos las trabajo en RAW desde Lightroom y luego exporto a JPG, redimensionando a 1024px por el lado más largo de la foto, calidad 100%, enfoque para pantalla estandar.
Para que te des una idea, las mismas fotos las subo a mi sitio web y se ven una locura, casi te diría que se ven mejor que desde Lightroom :P
Saludos, y felicitaciones por el casamiento (soy seguidor de tu blog)!!!
Jon Hernandez dice
Hola Gracias!
esa fue una de las principales razones para cambiar de forma.. facebook parece tener unos algoritmos que la unica logica que le encuentro es diferenciar fotos «buenas» de las fotos subidas por usuarios del montón.
Si una foto pesa muchisimo o muy poco facebook directamente interpreta que es mala. Y esta configuración que uso parece pasarse el filtro por alto.
Como digo esto es conclusión de pruebas y lecturas pero no es que nadie en facebook me haya contado eso ! si la subes mas grande de 500kb te la estropeará y si la subes de mucho menos peso también.. prueba con este método y dime si te funciona!
Chad Santos dice
Yo tenía el mismo problema como Matutien en Facebook (único lugar donde me daba problema), todo resuelto, mil gracias, aquí mi primer ejemplo.
dobleonadaE dice
Hola Jon, te sigo en tu blog y, como todos los artículos que escribís, son muy útiles. Hay varias cosas que no sabía qye que ya me pongo a probarlas.
Gracias por compartir tantos conocimientos.
Saludos desde Argentina
Marga dice
Hola Jon, pues yo lo que hago es reducir el tamaño (dimensiones) con el Photoshop. Y en algunos casos he probado a guardar como… Jpg con resolución 8._ alta. No se si es lo correcto pero al menos me resulta más rápido.
Nape10 dice
Hola,
Gracias por tu explicación.
Yo utilizo una acción en CS con el sistema que tu sigues o similar.
J M Mellado explica lo mismo en su libro y en su web se puede bajar una acción similar pero para 1024. Hay que cambiarla a 2048×1536 (por cierto para verticales yo las guardo a 1536 y para horizontales a 2048 con dos acciones diferentes)
La acción de Mellado además termina con una máscara de enfoque.
Saludos
http://www.flickr.com/photos/nape10/9019741736/
Taus dice
Una pregunta. Creo que en general la resolución de muchas pantalles actuales es la de full HD, es decir 1920×1080.
Entonces, ¿por que reducir a 2048? Eso, ¿no acabarà implicando que en destino haya una reducción addicional no controlada? ¿No es major reduir directamente a full HD o la más pròxima según la proporción de la imagen? (es decir «loquesea»x1080)?.
Gracias y saludos.
MrFloyd dice
Me parece que pensar que TODO hoy supera los 1024×768 es olvidarse que existe un enorme universo de dispositivos móviles, que no llegan ni por casualidad a esa relación de aspecto.
Además, para subir a Facebook existen otras medidas (googleen un poco y las encontraran), si las usan, el servidor del Face no las recomprimirá.
SGC dice
Muchas gracias por este trabajo bien confeccionado.
Está claro que hay varios caminos que conducen a soluciones muy parecidas y con resultados similares, pero no está de más conocer nuevas variantes.
A modo anecdótico me llama la atención que sugieras usar el espacio de color sRGB para subir fotos a intertet y resulta que la que tu has subido, la final entera, lleva incrustado el perfil Adobe RGB. Ya digo, pura anécdota.
Yo tampoco soy de la opinión de superar la resolución horizontal de 1920 pixeles ya que en monitores con ese tamaño de pantalla se tendrá que reducir desde 2048, por lo que el pretendido control sobre la visualización se pierde en cierta manera.
Saludos.
Jon Hernandez dice
macho estáis en todo eh!
repeti el proceso manualmente para tomar los pantallazos para el articulo y al parecer no realicé ese paso tras tomar la impresión de pantalla :)
Lo de reducir es principalmente ya que los retina reducen igualmente la resolución ya que no suelen venir predefinidos a full HD si no a menos pero con doble pixel por pixel.
Además todos los ipad retina son 2048 de resolución y me temo que el ipad es uno de los principales gadgets desde donde se ven webs.
con lo cual esta resolución es perfecta para ipads retina y valida para todo lo demás.
pero en cualquier caso no creo que hubiese mucha diferencia en usar 1920.
Ronerto dice
Me parece correcto, pero me gustaria saber como hacer esto para ligthroom 4
Diegolgo dice
Yo suelo usar 1280 borde largo, con un 75-85 % de calidad . Algo que no se menciona en el artículo es el valor de pixels, que tambien reduzco y para publicaciones web disminuye mucho el tamaño que si no son para imprimir, en pantalla no se notará gran diferencia 240 > 180 e inclusive menos aunque esa es mi config
Jon Hernandez dice
Hola diego!
si te refieres a los PPP son unicamente un valor de salida, pero no modifican en nada la imagen ni su tamaño, unicamente alteran el aspecto de salida en CM.
Es decir si cogemos una imagen a 300ppp y la convertimos a 72ppp en digital no cambia nada pero le define un tamaño fisico en CM para la impresión. Mismos pixeles mas repartidos.
Se suele hacer porque al imprimir esa imagen directamente se verá mal en papel, pero como digo no te cambiará el tamaño físico de la imagen.
Sergio López dice
Gracias por un artículo tan útil e interesante dada la situación de la fotografía hoy en día, donde casi todo va a través de ordenadores y, cada vez más, dispositivos móviles.
Bielva Tejera Carlos dice
Este es el mismo proceso que utilizo yo y que leí en su dia a Mellado. Cierto es que muchas veces en el ultimo paso de destroza todo sino se hace bien.
http://misfotoscbt.blogspot.com.es
Jasonmirandes dice
Yo suelo tocarlas todas, en función de donde voy a poner mis fotos. En mi http://www.flickr.com/photos/jasonmirandes antes lo ponía a tamaño pequeño, y ahora adapto la firma y el tamaño de la foto.
Aún así este artículo sirve de mucho ya que se puede entender mejor el por que hay imágenes que se ven mejor o peor
Antonio Torres Nulez dice
leyendo el artículo y los comentarios, he conseguido coger bastantes consejos de utilidad, muchas gracias. Me he dado cuenta que tengo que organizar mejor mis imágenes y tener más cuidado con ellas al publicarlas en el blog.
Emanuel Pardo dice
Te gusta la fotografia? pues visita nuestra pag,. en facebook, pronto videos de tutoriales, photoshop, y mas http://www.facebook.com/pages/Photo-Creative/350693851679625 te esperamos, unete a esta comunidad y diviertete
shoponline dice
Simplemente sencillo y facil. Me parecen buenas estrategias para mejorar el rendimiendo y en especial tal como lo mencionas en el ultimo paso. A ver si me tomo un descanso y empiezo a continuar colaborando con este website: http://www.sex-shoponline.net/ A ver si alguien me da una mano.
mabeneyto dice
Gracias por el articulo, soy diseñador gráfico y os puedo asegurar que la mayoria de nosotros no damos estos pasaos cuando subimos imagenes o diseñamos una pagina web para un cliente, por lo tanto os aconsejo que siempre que entregueis material para su publicacion lo hagais vosotros mismos. Un saludo.
consoladoreseu dice
Excelente trabajo! Desde hace un buen tiempo he estado buscando acerca de retoques en 8 y 16 bits para PS6. A ver si un diseñador capacitado me indica como realizar una campaña publicitaria para esta website http://www.consolador.eu/ ya que diversos efectos son algo complicados. Muchas gracias.
guva dice
encuentro quela fotografia esmuy bonita y con laedioción ha quedado fantástica
pero…. y la fotografia natural?, me refiero a no tener edición, he observado que se valoran las fotos que están editadas y algunas mucho,…. osea quien no tengamos photoshop no tenemos nada que hacer.
Lo veo muy injusto y por supuesto antinatural, lo que se tendria que hacer para valorar una fotografia, y me refiero también a los concursos, es que se vea el antes y el después.
sigo apoyando la fotografia natural, sin esa exageración de edición
filmantres dice
Hola Jon, queria preguntarte , cuando hablas del reducir calidad, 80%, 70% sin reducir resolción, ¿que es lo que se reduce? gracias
gordillo dice
Hola y gracias por todos los consejos. Les cuento que tengo un blogspot en weebly y uno de los reclamos era la falta de resolución, ya que el sitio las acomoda a su gusto, así que como alternativa subo a Flickr las originales. El blog esta en http://www.santafe-fotos.com.ar y en Flickr https://www.flickr.com/photos/santafefotos/ así que ahora voy a seguir tus consejos para exportar fotos según el destino, gracias!
PeterBlack dice
¿Habrá alguna acción para ahorrarse algunos pasos?
Como que es mucho rollo para hacer cosa por cosa para una sola fotografía :/
Roberto Martinez dice
Bicúbica más suavizada, esa es la clave. Mira que llevo buscando esto tiempo. Muchas gracias por el artículo!
Fran Nieto dice
Hola. Muy interesante. Creo que cuando dices:
, «es mas, si tuviese que elegir bajaría la calidad más antes de bajar la resolución»
Te refieres a cambiar el tamaño de la imagen. Cómo bien comentas a una consulta bajar la resolución no modifica el tamaño del archivo.
Un abrazo y gracias por tu tiempo.
mineta dice
Por lo que leo parece que no hay vida más allá de Photoshop. Yo creo que sí que hay mucha vida a descubrir y no estar siempre apegados a lo mismo y no conocer nada maś.
Tina Tatay dice
Como te hemos contestado en el otro comentario donde nos decías lo mismo, aquí tienes:
– Los 30 Mejores Programas para Editar Fotos: https://www.dzoom.org.es/programas-para-fotos/
– Los 20 Mejores Programas para Editar Fotos Online Gratis: https://www.dzoom.org.es/mas-de-20-programas-para-editar-fotografias-online-gratis/
– 4 Programas para Fotos RAW Totalmente Gratis: https://www.dzoom.org.es/4-programas-para-fotos-raw-gratis/
– Serie Conociendo Capture One, programa de revelado RAW: https://www.dzoom.org.es/capture-one-efectos-estilos-ajustes/
– Descubriendo Luminar 4: Edita Tus Fotos en Pocos Pasos: https://www.dzoom.org.es/descubriendo-luminar-4-edita-tus-fotos-en-pocos-pasos/
– Los 5 Programas de Revelado RAW Más Populares: Comparativa: https://www.dzoom.org.es/mejores-programas-raw/
– Introducción a Gimp: La Alternativa Gratuita a Photoshop https://www.dzoom.org.es/introduccion-gimp-alternativa-gratuita-photoshop/
mineta dice
¿Ay vida más allá de Pothoshop?
Tina Tatay dice
¡Por supuesto! Si nos leyeras más lo sabrías. Aquí los probamos todos toditos. Otra cosa es que esos sean los más utilizados jeje ¡Un saludo!
– Los 30 Mejores Programas para Editar Fotos: https://www.dzoom.org.es/programas-para-fotos/
– Los 20 Mejores Programas para Editar Fotos Online Gratis: https://www.dzoom.org.es/mas-de-20-programas-para-editar-fotografias-online-gratis/
– 4 Programas para Fotos RAW Totalmente Gratis: https://www.dzoom.org.es/4-programas-para-fotos-raw-gratis/
– Serie Conociendo Capture One, programa de revelado RAW: https://www.dzoom.org.es/capture-one-efectos-estilos-ajustes/
– Descubriendo Luminar 4: Edita Tus Fotos en Pocos Pasos: https://www.dzoom.org.es/descubriendo-luminar-4-edita-tus-fotos-en-pocos-pasos/
– Los 5 Programas de Revelado RAW Más Populares: Comparativa: https://www.dzoom.org.es/mejores-programas-raw/
– Introducción a Gimp: La Alternativa Gratuita a Photoshop https://www.dzoom.org.es/introduccion-gimp-alternativa-gratuita-photoshop/
Alberto dice
Soy seguidor de tu canal, en tu anterior video de YouTube el guardar era diferente, pero iguale daba buenos resultados, voy a probar este cambio, saludos
sergio dice
Yo no me preocuparia en subir fotos deexcelente calidad a las redes ya que despues los pillos tienen como apoderarse de ellas y tener fotos de buena calidad robadas.