Cómo preparar imágenes para la web usando Zoner Free

A continuación voy a explicar cómo preparar una foto PARA WEB, usando un programa GRATUITO pero genial que se llama ZONER PHOTO.

El programa es GRATUITO EN SU VERSIÓN LITE, pero tiene herramientas más que suficiente para nuestros propósitos.

PASO 1 . -

Bajamos e instalamos el programa ZONER PHOTO FREE, podéis bajarlo del siguiente link, la instalación se realiza como en cualquier otro programa.

An Award-Winning Free Photo Editor: Feature-packed Zoner Photo Studio


PASO 2 . -

Abrimos el programa y seleccionamos nuestra imagen, usando el sistema de navegador por carpetas.




PASO 3 . -

Hacemos clic en la pestaña EDITOR




PASO 4 . -

Accedemos al menú EDIT > RESIZE




PASO 5 . -

Establecemos los DPI (puntos de impresión por pulgada en 72). La calidad y el tamaño de la imagen descenderán, pero será suficiente para la web.

Nota - algunos usuarios prefieren usar 92 DPI ya que hoy día los monitores soportan esa resolución.




PASO 6 . -

Ingresamos el tamaño que queramos que tenga nuestra foto en web, en mi caso voy a escoger 600 pixeles de ancho y el sistema SUPERSAMPLING que es propio de Zoner y es de los mejores que he probado hasta el momento para ampliar o reducir fotos (podéis probar otros, el más reconocido es LANCZOS):




Aceptamos haciendo clic en "OK"

PASO 7 . -

Accedemos al MENÚ > FILE > SAVE WEB JPEG...




seleccionamos un nombre para la imagen y pulsamos el botón "Guardar"

PASO 8 . -

Aparece la pantalla para tener un previo ANTES Y DESPUÉS de guardar para WEB.

Lo primero que haremos es seleccionar VISIÓN 1:1 para ver el tamaño real.




PASO 9 . -

Escogemos las opciones que mejor se adapten a nuestras necesidades:




Presets - Default/Last:

Si seleccionamos "Default" se usarán los parámetros por defecto, los cuales serán aceptables para imágenes de unos 800 pixeles.

También podemos guardar nuestros propios ajustes para otras imágenes.




Size:

Podemos especificar el tamaño máximo en kilobytes que deseamos que tenga nuestra imagen una vez guardada.




Quality:

Es la calidad mínima y máxima que queremos que tenga nuestra imagen.




Sampling:

Es cómo escaneará el algoritmo la imagen, para imágenes con patrones verticales funcionará mejor "vertical", para imágenes con patrones horizontales funcionará mejor "horizontal", por defecto, ya que no suele haber patrones en las imágenes naturales es mejor dejar "Recommend"




Progresive/Optimized encoding:

Progresive - si se activa la imagen cargará en varias pasadas online -hoy día con las conexiones de alta velocidad en imágenes pequeña ni se percibe-.
Optimized encoding - si se activa el programa uso un sistema interno para mejorar la compresión



Grayscale - activado convierte NUESTRA IMAGEN A BLANCO Y NEGRO
EXIF - si lo activamos se guarda la información interna de la cámara digital con la foto (si existía)
Preview - si lo activamos se guarda el previo de la imagen (si existía)
ICC Profile - si lo activamos se guarda el PERFIL de color de la imagen (si existía)
Remove accent marks - si lo activamos elimina las tildes del nombre del archivo para hacerlo compatible con servidores web.

EXIF/Preview/ICC profile son opciones que harán que la imagen ocupe más espacio y no son esenciales para web.



PASO 10 . -

Clic en el botón OK Y TU IMAGEN ESTÁ LISTA PARA SUBIR A LA WEB CON UN CAMBIO DE TAMAÑO, UNA CALIDAD Y UNA COMPRESIÓN IMPRESIONANTES.

Pruébalo, no te arrepentirás.

Wow, muy completo el tutorial ramon, gracias por compartir.

wong dijo:

Wow, muy completo el tutorial ramon, gracias por compartir.

Hacer clic para expandir...

A mí lo que me encanta de este programa es que puedo hacer muchas cosas sin tener que abrir Adobe Photoshop, también comprime para PNG pero tiene muchas menos opciones (nivel de compresión y número de colores), algo que le echo en falta es que no te permite establecer la imagen a modo RGB, no he hecho pruebas para ver si las imágenes cmyk las convierte... voy a probar y comento.

- - - Actualizado - - -

He revisado y el programa lanza un aviso de que no soporta el modo CMYK y se convertirá la imagen a RGB, por lo tanto también el formato para web de color queda optimizado sin tener que hacer nada, sólo con abrir la imagen

¿No lo hace con imágenes en lote?

lordskorpius dijo:

¿No lo hace con imágenes en lote?

Hacer clic para expandir...

Sí, maneja guardado por lotes también, aunque no sé si la versión free (creo recordar que sí), yo tengo instalada la versión promocional 15 en mi computadora.

gracias por el tutorial esta bien explicado estoy seguro que a muchos usuarios que trabajan con imágenes nos vendra bien un programa como este.

Gracias por el tuto, Supongo que este programa es mas ligero que Photoshop, me da mucha flojera ocupar el photoshop para este tipo de cosas sencilas ...

Yo solía usar ACdSee, pero veo que éste está mejor. Gracias por compartir. :encouragement:

dendurweb dijo:

gracias por el tutorial esta bien explicado estoy seguro que a muchos usuarios que trabajan con imágenes nos vendra bien un programa como este.

Hacer clic para expandir...

Personalmente es el programa que uso para cortar, ajustar, comprimir, etc, las imágenes a mis blogs.

Vamos que lo uso a diario. Es una lástima que hace rato que no lanzan una versión en promoción gratis, pero se puede activar la versión PRO por unos días cuando se baja la última versión.

- - - Actualizado - - -

Doroteo78 dijo:

Gracias por el tuto, Supongo que este programa es mas ligero que Photoshop, me da mucha flojera ocupar el photoshop para este tipo de cosas sencilas ...

Hacer clic para expandir...

Por supuesto es mucho más ligero que Adobe Photoshop. De hecho ahora mismo estoy escribiendo desde mi notebook que ya tiene varios años y es lento como una patata, y puedo correr el Zoner más o menos sin problemas. Además el sistema de escalado es más potente que el de Photoshop y el sistema de compresión también. Lo único que puede hacer Photoshop mejor es "cortar y escalar" al mismo tiempo, pero muchos usuarios ni saben que esa opción existe en Photoshop.

- - - Actualizado - - -

courvalant dijo:

Yo solía usar ACdSee, pero veo que éste está mejor. Gracias por compartir. :encouragement:

Hacer clic para expandir...

No sé qué tal sea la última versión de ACDSee, probé la versión free (sólo visor) y personalmente no me agradó en absoluto, se volvió muy pesado. Zoner como visor no es la gran maravilla (quizás la caché debería mejorar o el renderizado en caliente), pero cumple bastante bien para los propósitos con que lo uso.