uso de imágenes en diseño web

USO DE IMÁGENES EN DISEÑO WEB

UNA IMAGEN DICE MÁS QUE MIL PALABRAS



USO DE IMÁGENES ▸ Sin duda las imágenes son cruciales en el diseño web pero

esto sólo se puede lograr si cada imagen colocada está ahí por una razón.

▸ Deben tener un propósito claro


USO DE IMÁGENES

▸ Tener consistencia con el concepto, objetivo, organización y estilo de la página web.

▸ Enriquecer el diseño sin desviar la atención.

▸ Ayudar al usuario a ubicar contenido importante en la página.


USO DE IMÁGENES Evitar:

▸ Usar imágenes que no relación

▸ Usar demasiadas imágenes que impliquen un mayor tiempo de carga de la página

EN LA CONSTRUCCIÓN DE UN SITIO WEB USANDO HTML Y CSS

USO DE IMÁGENES Recomendaciones:

▸ Optimizar las imágenes.

▸ Proporcionar un texto alterno que indique el contenido de la imagen.

▸ Evitar sustituir texto por imágenes

TENDENCIAS

TENDENCIAS EN EL USO DE IMÁGENES

USO DE MONOCROMAS


GRÁFICOS, INFOGRAFÍAS, INFOGRAFÍAS ANIMADAS


HIPERREALIDAD


IMÁGENES EN 360

DISEÑO WEB RESPONSIVE


▸ Imágenes responsivas

▸ Uso de zonas “Hero”

▸ Uso de imágenes como fondo de pantalla “Background image”

HERO IMAGE

IMÁGENES RESPONSIVAS


MENOS USO DE IMÁGENES DE STOCK Y MÁS INTEGRACIÓN DE IMÁGENES DE PERSONAS Y SITUACIONES “REALES”

BANCOS DE IMÁGENES

BANCOS DE IMÁGENES

▸ Shutter stock

▸ Bigstock

▸ Adobe Stock

▸ Dreamstime

▸ Pexels

▸ Pic Jumbo

20 BANCOS DE IMÁGENES GRATIS DE GRAN CALIDAD Y ALTA RESOLUCIÓN

BANCOS DE IMÁGENES

▸ #11-. Super Famous

▸ #12.- Every Stock Photos

▸ #13.- Flickr

▸ #14.- Foter

▸ #15.-Morgue File

▸ #16.- Photogen

▸ #17.- Picjumbo

▸ #18.- Pixabay

▸ #19.- Stockvault

▸ #20.- Death to the Stock Photo

▸ #1.- Designer Pics

▸ #2.- Foddies Feed

▸ #3.- New Old Stock

▸ #4.- Unplash

▸ #5.- Little Visual

▸ #6.- Gratisography

▸ #7.- Picography

▸ #8.- Public Domain Archive

▸ #9.- Startup Stock Photos

▸ #10.- Pexels

CREATIVE COMMONS

CREATIVE COMMONS

¿QUÉ ES CC?

▸ Creative Commons es una organización sin fines de lucro que permite el intercambio y uso de la creatividad y el conocimiento a través de herramientas legales gratuitos.

▸ Nuestras licencias de derechos de autor además de fáciles de utilizar, de manera gratuita proporcionan una manera sencilla y estandarizada para dar el permiso para compartir y utilizar su trabajo creativo en condiciones de tu elección. Las licencias CC permiten cambiar fácilmente los plazos del copyright del incumplimiento de “todos los derechos reservados” a “algunos derechos reservados”.

▸ Las licencias Creative Commons no son una alternativa al copyright.

▸ Trabajan junto a los derechos de autor y le permiten modificar los términos de los derechos de autor que mejor se adapte a sus necesidades.

http://www.creativecommons.mx/

CREATIVE COMMONS

¿CÓMO FUNCIONA CC?

▸ Es el sistema del derecho de autor que promueve la libertad creativa que plantea un esquema en el que no hay que pedir permiso para usar las obras.

▸ ¡Porque el permiso ya ha sido otorgado!


CREATIVE COMMONS

¿CUÁNDO DEBO DE UTILIZAR LAS LICENCIAS CC?

▸ Si deseas dar a la gente el derecho a compartir, usar, e incluso construir sobre una obra que has creado, debes considerar publicarlo bajo una licencia Creative Commons.

▸ CC le da la flexibilidad (por ejemplo, puedes prohibir o permitir únicamente los usos comerciales) y protege a las personas que utilizan tu trabajo, por lo que no tienes que preocuparse acerca de la infracción de derechos de autor, siempre y cuando cumplan con las condiciones que tiene especificado.


CREATIVE COMMONS

HTTPS://SEARCH.CREATIVECOMMONS.ORG/

https://search.creativecommons.org/

CONCEPTOS BÁSICOS

CONCEPTOS BÁSICOS

PIXEL▸ El píxel es la unidad mínima de visualización de una

imagen digital.

▸ Si aplicamos el zoom sobre ella observaremos que está formada por una parrilla de puntos o pixeles.

▸ Las cámaras digitales y los escáneres capturan las imágenes en forma de cuadrícula de píxeles.

CONCEPTOS BÁSICOS

RESOLUCIÓN DE IMAGEN▸ Es el grado de detalle o calidad de una imagen digital ya sea

escaneada, fotografiada o impresa.

▸ Este valor se expresa en ppp (píxeles por pulgada) o en inglés dpi (dots per inch).

▸ Cuantos más píxeles contenga una imagen por pulgada lineal, mayor calidad tendrá.

▸ La resolución de un monitor se refiere al número de píxeles por pulgada que es capaz de mostrar.

▸ La resolución de una pantalla es de 72 ppp.

CONCEPTOS BÁSICOS

RESOLUCIÓN DE IMAGEN▸ En una impresora se habla del número de puntos por

pulgada que puede imprimir: 600, 1200, etc.

▸ Las cámaras digitales prestan una calidad que se expresa en MegaPíxels. Así por ejemplo una cámara de 8 MP es aquella capaz de tomar una fotografía con 8 millones de píxeles.

FORMATOS DE IMAGEN

¿Te has preguntado cuál es la diferencia entre un archivo JPEG, GIF o PNG?

FORMATOS DE IMAGENComo diseñador - y en especial como diseñador web - es importante saber la diferencia entre los diferentes formatos de imagen y saber cómo usarlos en cada situación.

FORMATOS DE IMAGEN

FORMATOS DE IMAGEN

▸ TIFF

▸ BMP

▸ RAW

GIF

JPG

PNG

SVG

GRAPHICS INTERCHANGE FORMAT

FORMATO GIF ▸ Diseñado específicamente para comprimir imágenes digitales.

▸ Reduce la paleta de colores a 256 colores como máximo (profundidad de color de 8 bits).

▸ Admite gamas de menor número de colores y esto permite optimizar el tamaño del archivo que contiene la imagen.

▸ No es recomendable para fotografías de cierta calidad ni originales ya que el color real o verdadero utiliza una paleta de más de 256 colores.

GRAPHICS INTERCHANGE FORMAT

FORMATO GIF ▸ Los archivos GIF son reconocidos por los llamados GIFs

animados.

▸ Cuando se combinan varias imágenes mostrándose consecutivamente pueden crearse pequeñas escenas.

▸ La compresión de este tipo de archivos es la que permite soportar la animáción.

▸ Permite trabajar con transparencias pero únicamente al 100%

JOINT PHOTOGRAPHIC EXPERTS GROUP

FORMATO JPG-JPEG ▸ A diferencia del formato GIF, admite una paleta de hasta 16 millones de

colores.

▸ Es el formato más común junto con el GIF para publicar imágenes en la web.

▸ La compresión JPEG puede suponer cierta pérdida de calidad en la imagen. En la mayoría de los casos esta pérdida se puede asumir porque permite reducir el tamaño del archivo y su visualización es aceptable. Es recomendable utilizar una calidad del 60-90 % del original.

▸ Cada vez que se modifica y guarda un archivo JPEG, se puede perder algo de su calidad si se define cierto factor de compresión.

JOINT PHOTOGRAPHIC EXPERTS GROUP

FORMATO JPG-JPEG ▸ Las cámaras digitales suelen almacenar directamente las

imágenes en formato JPEG con máxima calidad y sin compresión.

▸ Es ideal para publicar fotografías en la web siempre y cuando se configuren adecuadamente dimensiones y compresión.

▸ Si se define un factor de compresión se pierde calidad. Por este motivo no es recomendable para archivar originales.

PORTABLE NETWORK GRAPHICS

FORMATO PNG ▸ Basado en un algoritmo de compresión sin pérdida para

bitmaps no sujeto a patentes

▸ Desarrollado para solventar las deficiencias del formato GIF

▸ Permite almacenar imágenes con una mayor profundidad de contraste y otros importantes datos.

▸ Una de las principales características de los archivos PNG es la capacidad de manejar transparencias

FORMATO RAW

FORMATO RAW ▸ Formato de archivo digital de imágenes que contiene la

totalidad de los datos de la imagen tal y como ha sido captada por el sensor digital de la cámara fotográfica.

▸ Generalmente lleva aplicada compresión de datos sin pérdida de información.

▸ El gran inconveniente de este formato es la falta de estandarización: cada fabricante de cámaras usa su propia versión del formato.

SCALABLE VECTOR GRAPHICS.

FORMATO SVG ▸ Especificación para describir gráficos vectoriales

bidimensionales, tanto estáticos como animados.

▸ Los gráficos SVG se construyen a partir de puntos, ángulos y distancias.

▸ Escalable

▸ Por ser un lenguaje vectorial, SVG permite crear imágenes complejas.

OPTIMIZACIÓN Y COMPRESIÓN DE IMÁGENES PARA WEB

OPTIMIZACIÓN Y COMPRESIÓN


▸ Al crear una página web interesa que los archivos que contienen las imágenes sean lo menos pesados posibles para agilizar su descarga y visualización por Internet.



▸ El tamaño de un archivo gráfico viene determinado por las dimensiones de la imagen, su resolución, el número de colores y el formato (JPG, GIF, PNG).



▸ Crea y guarda imágenes en resolución no superior a 72 ppp. Es la resolución que se suele usar en las pantallas de ordenador.


ORGANIZACIÓN Y COMPRESIÓN▸ Conviene utilizar un programa de edición gráfica para

definir las dimensiones concretas de la imagen antes de insertarla en la página web.

▸ Lo más conveniente es guardar los originales de las imágenes sin comprimir. A partir de ellas se puede crear una copia en formato GIF (PNG) o JPEG con las dimensiones, resolución y paletas adecuados para publicarlas en la web.


HERRAMIENTAS PARA COMPRESIÓN

▸ Además de las herramientas más conocidas como Photoshop e Illustrator podemos encontrar herramientas que específicamente nos ayudarán a optimizar imágenes

▸ Kraken Image Optimizer

▸ JPEG Optimizer

▸ Opti PNG

https://kraken.io/web-interface

http://jpeg-optimizer.com/

http://optipng.sourceforge.net/