Como preparar las imagenes para tus artículos

Llevo algunos años escribiendo para este excelente blog y eso me ha dejado muchas cosas interesantes, mucha experiencia. Esta experiencia viene en varias situaciones, como escribir, como enfocar mejor los artículos, incluso mejoró mi ortografía (aunque sigo teniendo muchos errores, soy humano). Pero hay algo que en este tiempo he aprendido y hoy quiero compartir con ustedes bloggers nuevos o experimentados, como preparar las imágenes para tus artículos.

Tal vez para muchos parecerá estúpido escribir sobre este tema, pero aunque no lo crean, hay veces que es bueno repasar algunos conceptos y tal vez retomar buenas prácticas.

Lo que veremos ahora es como guardar imágenes para subirlas y mostrarlas en nuestros sitios.

Lo primero

Lo que debemos saber es que hay por el momento la resolución aceptable sigue siendo 72 dpis para mostrar imágenes en web. Hay muchas personas que creen que entre mayor resolución tenga la imagen se mostrará más nítida, pero no es verdad, la nitidez con mayor cantidad de puntos solo se verá reflejada en dispositivos que soporten esta resolución, por ejemplo, el ipad retina, macbook retina o la chromebook pixel, por citar algunos ejemplos.

salvar para web and Devices en Photoshop

Por la versatilidad hoy trabajaremos en los ejemplos con Photoshop. La forma correcta de salvar los archivos para web es con la opción “Save for Web and Devices” que se encuentra en la parte superior del menú del programa.

screen-shot-2013-05-17-at-2-19-56-am

Al seleccionar esta opción nos mostrará una ventana con varias opciones que nos darán las herramientas necesarias para guardar correctamente las imágenes para web.

Hay que tomar en cuenta que hoy en día las imágenes que se guardan y suben a web siguen teniendo los formatos comunes desde hace muchos años “jpg, png, gif”. Cada uno de estos formatos tiene sus ventajas y desventajas.

Guardar JPG para web and Devices en Photoshop

Al guardar imágenes en JPG para web lo que más nos interesará son las primeras opciones que aparecen en la parte derecha debajo del formato JPG.

La primera opción que tenemos es la calidad de la imagen con que deseamos guardar el archivo. Hay cinco calidades (Low, medimum, high, very high, maximum). Como ya lo platicamos a nosotros nos interesa guardar nuestros archivos con una porcentaje de pixeles o puntos por pulgada de 72, este porcentaje recae en la opción High.

Haciendo lo anterior es lo mínimo que necesitamos para poder exportar una imagen para web con resolución para web, esto es, imagen del tamaño que necesitamos, pero comprimida y optimizada.

Si lo quisiéramos en este paso podríamos dar click en el boton Save y sería todo, pero hay algunas opciones que seguro te servirán.

screen-shot-2013-05-17-at-2-24-57-am

Debajo de las opciones anteriores tenemos cinco más que afectan a la imagen (Calidad: Progresivve o Optimized, embed color profile, blur y matte) Cada una de estas opciones

La calidad se divide en dos, progressive y Optimized. Lo que se refiere a la calidad progresiva, es cuando la imagen se despliega en diferentes capas que separan a una misma imagen dos diferentes calidades básicamente, calidad baja y normal. Esto se hace para mostrar las imágenes en draft o calidad baja mientras el navegador descarga toda la información para mostrarla de la calidad final. El problema con esta opción es que algunos navegadores no lo aceptan.

La calidad optimizada crea un jpg con la mejor compresión posible, pero no tiene la opción progresiva.

Blur. Lo que hace esta opción básicamente es agregar un desenfoque a la imagen.

Embed color. Esta opción toma el perfil del color definido en el archivo y lo optimiza. Esto se hace ya que algunos navegadores reconocen la corrección de color en los archivos.

En el siguiente artículo te mostrare como guardar en formato GIF y PNG-8, mientras te muestro para que sirve cada opción de manera fácil.