En el diseño web es muy importante el manejo de las imágenes. Hay que considerar que su uso y tratamiento es completamente distinto de cuando se usarán para medios impresos. Para trabajar imágenes en web es importante que éstas tengan el peso y dimensiones adecuadas.

1. USO DE IMÁGENES
EN DISEÑO WEB

2. UNA IMAGEN DICE MÁS QUE
MIL PALABRAS
UNA IMAGEN DICE MÁS QUE MIL PALABRAS

3. 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

4. UNA IMAGEN DICE MÁS QUE MIL PALABRAS
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.

5. UNA IMAGEN DICE MÁS QUE MIL PALABRAS
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

6. 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

7. TENDENCIAS

8. TENDENCIAS EN EL USO DE IMÁGENES
USO DE MONOCROMAS

9. TENDENCIAS EN EL USO DE IMÁGENES
GRÁFICOS, INFOGRAFÍAS, INFOGRAFÍAS ANIMADAS

10. TENDENCIAS EN EL USO DE IMÁGENES
HIPERREALIDAD

11. TENDENCIAS EN EL USO DE IMÁGENES
IMÁGENES EN 360

12. DISEÑO WEB RESPONSIVE
TENDENCIAS EN EL USO DE IMÁGENES
▸ Imágenes responsivas
▸ Uso de zonas “Hero”
▸ Uso de imágenes como fondo de pantalla “Background
image”

13. HERO IMAGE

14. IMÁGENES RESPONSIVAS

15. TENDENCIAS EN EL USO DE IMÁGENES
MENOS USO DE IMÁGENES DE STOCK Y MÁS INTEGRACIÓN DE IMÁGENES DE PERSONAS
Y SITUACIONES “REALES”

16. BANCOS DE IMÁGENES
BANCOS DE IMÁGENES
▸ Shutter stock
▸ Bigstock
▸ Adobe Stock
▸ Dreamstime
▸ Pexels
▸ Pic Jumbo

17. 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

18. CREATIVE
COMMONS

19. 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/

20. 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!
http://www.creativecommons.mx/

21. 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.
http://www.creativecommons.mx/

22. CREATIVE COMMONS
HTTPS://SEARCH.CREATIVECOMMONS.ORG/

23. CONCEPTOS
BÁSICOS

24. 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.

25. 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.

26. 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.

27. FORMATOS DE
IMAGEN

28. ¿Te has preguntado cuál es la diferencia entre un archivo JPEG, GIF o PNG?
FORMATOS DE IMAGEN
Como 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.

29. FORMATOS DE IMAGEN
FORMATOS DE IMAGEN
▸ TIFF
▸ BMP
▸ RAW
GIF
JPG
PNG
SVG

30. 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.

31. 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%

32. 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.

33. 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.

34. 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

35. 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.

36. 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.

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

38. OPTIMIZACIÓN Y COMPRESIÓN
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.

39. OPTIMIZACIÓN Y COMPRESIÓN
OPTIMIZACIÓN Y COMPRESIÓN
▸ 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).

40. OPTIMIZACIÓN Y COMPRESIÓN
OPTIMIZACIÓN Y COMPRESIÓN
▸ 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.

41. OPTIMIZACIÓN Y COMPRESIÓN
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.

42. OPTIMIZACIÓN Y COMPRESIÓN
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