Dani Maeztu

Navigation Menu

Sobre los formatos de imagen para web

Posted by on Mar 6, 2013 in Blog, Tutoriales | 0 comments

Existen muchísimos formatos de todo tipo para los archivos gráficos. Pero sólo unos pocos suelen ser compatibles con los navegadores. Ahora comentaré los formatos más estándarizados y que menos problemas dan para ser vistos en páginas HTML. A saber:     .jpg .gif .png .svg Cada uno de ellos tiene sus características propias y sus ventajas. Pero también tienen una serie de características comunes. Básicamente es que no son formatos pensados para editarse, por lo que no tendrán opciones de guardar capas o temas similares (aunque se pueden editar, claro está), se comportan muy bien a baja resolución sobre todo, y ocupan poca información porque normalmente tienen compresión de serie, por lo que su tamaño disminuye enormemente.   JPG (Joint Photographic Experts Group) El rey de reyes de los formatos de imagen. Sustituyó al bitmaps y otros por su gran compresión. Es un formato de imagen que da muy buenos resultados en imágenes de baja y media resolución y unos aceptables resultados en alta calidad. Se suele usar para casi todo tipo de imágenes aunque no sean para web, sobre todo a nivel doméstico. Pero ahora veremos que tiene unas características especiales que lo hacen ideal para visualizarlo en un navegador. Fue el primer formato en usar compresión de serie. Esto hace que imágenes de media calidad se vean muy bien sin ocupar demasiado. Por poner un ejemplo, la imagen que uso de cabecera pesa en .jpg 35,5 KB, mientras que en .tiff (sin compresión) ocupa 148 KB. Soporta la descargar progresiva, es decir, que en vez de descargarse de golpe (cuando vemos que una imagen grande se va formando fila a fila) lo hace en pases (primero se forma una a baja resolución, luego va mejorando hasta formarse la imagen tal como es), tantos como le configuremos. Esto era importante cuando las velocidades de conexión son bajas, para hacerse una idea de la foto sin llegar a descargarla entera. Hoy en día con las lineas de alta velocidad actuales no se suele usarse a no ser que sean imágenes realmente grandes.   GIF (Graphics Interchange Format) De muy pequeño tamaño, este formato está pensado para imágenes pequeñas y con colores planos. No...

Read More

Modos de color, esos grandes desconocidos

Posted by on Feb 26, 2013 in Blog, Tutoriales | 0 comments

Hace muy poco hablábamos de la resolución y como hay que verla y tenerla en cuenta según el soporte para el que querías usar la imagen: en pantalla o en soporte físico. Pues bien, en los modos de color no nos quedamos cortos y aunque hay multitud de ellos, explicaré los 2 más comunes y necesarios y un tercero derivado. Pero para elegir el modo de color vamos a tener que tener en cuenta lo mismo que en la entrada sobre las resoluciones, solo que ésta vez lo llamaremos de otra forma: Luz reflejada: Cuando la luz no proviene del propio soporte. Es decir, cualquier soporte físico en el que la imagen está impresa y la luz proviene del entorno. Luz emitida: Cuando la luz o el color provienen del propio soporte. Es decir, las pantallas en todas sus formas. La luz proviene del ellas aunque el entorno esté a oscuras. En el primer caso se usa el CMYK y en el segundo el RGB, ahora veremos por qué.   ¿Qué modos de color hay? Esto depende un poco, pues podría haber tantos como quisiéramos tomando diversos puntos de referencia del espectro de color que percibimos los seres humanos. Pero salvando estas disertaciones científicas podemos decir que hay unos pocos comunes de los cuales podemos apañarnos con dos. Tres será lo normal que lleguemos a usar y es raro que usemos más de los cuatro o cinco principales a lo largo de nuestra vida. En el Photoshop los modos de color que aparecen son estos: De aquí nos vamos a quedar con los principales y más usados aunque en profundidad solo veremos unos pocos: Escala de grises: Compone la imagen usando un canal en toda su escala: el negro. Son las imágenes en blanco y negro, usa blanco, negro y toda la escala de grises. Pero no admite el color. Duotono: Usa los dos tonos que tú le digas para componer la imagen. Pensado (imagino) para impresiones en dos colores. Color indexado: Proveniente de formatos como el .GIF, lo que hace es que cada color que aparece en la imagen es un color en la información del archivo, no están formados por mezclas de colores sino por...

Read More

Resolución, esa gran desconocida

Posted by on Feb 21, 2013 in Blog, Tutoriales | 0 comments

Desde el punto de vista del diseñador gráfico, o simplemente de cualquiera que manipule cualquier tipo de imagen, el tema de la resolución es un punto importante. No, más que importante es fundamental, sobre todo depende de qué uso le vayas a dar. Para empezar hay dos ámbitos diferentes en los que la resolución va a tener que ser tomada de maneras distintas:   Para web o dispositivos. Para su impresión en formato físico. Aunque para ambos casos hay aspectos muy similares, no es lo mismo y deberemos tener en cuenta diversos parámetros.   Imágenes para web o dispositivos El tamaño de una imagen viene medido en píxeles (que son el producto de su resolución x tamaño). Cada píxel equivale a un punto de color, y es ovbio señalar que a más píxeles, mejor se verá la imagen… Pues esto en las páginas web  y dispositivos no es verdad al 100%. Aquí el número de píxeles de una imagen no equivale a mayor calidad de imagen, sino a mayor tamaño. Un píxel en pantalla es igual a un punto en la resolución de la pantalla. La foto la veras de un tamaño u otro dependiendo de las pulgadas y la resolución de esa pantalla. La experiencia puede variar de un usuario a otro. Concluimos pues, que si el tamaño depende de factores externos al creador de la imagen, las dimensiones físicas no deberían ser relevantes en estos casos. Por eso para medirse se usa el “número de píxeles a lo alto” x “número de píxeles a lo ancho”. En el caso de la imagen que uso para ilustrar es 200 x 200. La densidad de píxeles por pulgada se pone en 72ppp por convención en imágenes para web, pero como he dicho, suele ser irrelevante. ¿Cómo sé que resolución tiene una imagen? Fácil, normalmente se puede de un vistazo si tienes activado los detalles de archivo, no importa el sistema operativo que uses.   ¿Y si no tengo activado el ver las propiedades de archivo de forma rápida? En tal caso click derecho sobre el archivo y propiedades. En casi todos los sistemas operativos el acceso a esta información...

Read More