Presentación general de tipos de imágenes en la web, partiendo de conceptos básicos para terminar con un listado de bancos de imágenes y herramientas de edición y tratamiento de imágenes.

1. Biblioteca/CRAI – Formación de usuarios
Tratamiento de
Imágenes para la Web

2. Tipos de imágenes

3. Tipos de imágenes
Mapa de bits (Bitmap o Raster)
Los archivos de las imágenes se guardan normalmente en forma de mapa de bits o mosaico de
píxeles (cámara de fotos, escáner…). Cada píxel guarda la información de color de la parte de
imagen que ocupa.
Son imágenes creadas pixel a pixel (cada uno con un valor).
Ocupan más memoria que las vectoriales.
Inconveniente: Al ampliarse se distorsiona la imagen, mostrándose el mosaico (los píxeles) y se
aprecia una degradación en los colores ”efecto de pixelación”.
Encontramos tres tipos de BMP: JPG (fotos), GIF/PNG (iconos, dibujos, esquemas,…) que
comprimen con calidad y menos peso.
www.taringa.net

4. Tipos de imágenes
Ejemplos de imágenes de Mapa de Bits
www.prepressure.com www.liax.com
umaine.edu

5. Tipos de imágenes
Ejemplos de Efecto de Pixelación:
http://recursostic.educacion.es/observatorio/web/eu/software/software-general/293-lorena-arranz

6. Tipos de imágenes
GIF
Es un tipo de mapa de bits.
Formato de archivo sin pérdida, es decir, se conserva cada pixel de la imagen original, lo que
implica que el tamaño suele ser mayor que en formatos .JPG.
Para gráficos sencillos con pocos colores es muy eficiente  puede contener hasta 256 colores.
Permite crear animaciones: una secuencia de imágenes GIF se almacena en un único archivo.
www.ionlitio.com

7. Tipos de imágenes
JPEG
Es un tipo de mapa de bits.
Comprime mucho el archivo pesa menos Ideal para Web
Excelente para fotografías de muchos colores y texturas, mantiene la calidad con pesos de
imagen realmente bajos.
Inconveniente pierde algo de información y puede afectar a su calidad.
www.immaginize.net

8. Tipos de imágenes
PNG
Es un tipo de mapa de bits.
Surgió como alternativa al GIF.
Permite transparencias y con ello permite hacer montajes más creativos frente al JPG que el
fondo es blanco.
Comprime menos que el JPG.
www.nintento.wikia.com

9. Tipos de imágenes
Vectoriales
El concepto de imagen vectorial está vinculado a la imagen digital.
Son gráficos formados a base de curvas y líneas a través de elementos geométricos definidos
como vectores (no por píxeles) Las características de estos objetos están definidas por atributos
matemáticos (color, posición…).
Ventaja no sufren pérdida de resolución al producirse una ampliación de los mismos. Se
utiliza mucho para trabajos de rotulación, rótulos, iconos, dibujos, logotipos de empresa etc.
Esta clase de imagen tiene poco peso como archivo informático.
www.nintento.wikia.com
www.behance.net www.behance.net

10. Tipos de imágenes
Ejemplos de imágenes vectoriales
www.serif.com www.liax.com
umaine.edu

11. Tipos de imágenes
Mapa de bits vs Vector
www.nintento.wikia.com
www.inksterinc.com

12. Tipos de imágenes
Mapa de bits vs Vector
www.liax.com www.liax.com
http://www.newdimensionlabels.com

13. Tipos de imágenes
Mapa de bits vs Vector
www.indiana.edu.com
jessicastengrim.com

14. Herramientas de edición
de imágenes

15. Herramientas de edición de imágenes

16. Herramientas de edición de imágenes
Enlaces herramientas online:
Pho.to http://editor.pho.to/es/
Befunky https://www.befunky.com/es/
Ribbet Photo Editor http://www.ribbet.com/
Canva https://www.canva.com/
Fotor http://www.fotor.com/es/
Getloupe http://www.getloupe.com/

17. Herramientas de edición de imágenes
Enlaces Software principiante:
Photoscape http://www.photoscape.org/ps/main/index.php
Paint.net http://www.getpaint.net/index.html
Microsoft https://www.microsoft.com/es-es/
Office Picture Manager
Powerpoint
Word
Paint
Enlaces Software Profesional:
Photoshop http://www.adobe.com/es/products/photoshop.html
Gimp http://www.gimp.org.es/
Pixelmator http://www.pixelmator.com/mac/
Corel Paintshop Pro http://www.paintshoppro.com/en/products/paintshop-pro/

18. Herramientas de edición de imágenes
Enlaces Banco de Imágenes:
Creative commons http://es.creativecommons.org/blog/licencias/
Freepik http://www.freepik.es/
Iconfinder https://www.iconfinder.com/
Iconarchiver http://www.iconarchive.com/
Pixabay https://pixabay.com/es/
Britannica Image Quest http://0-quest.eb.com.athenea.upo.es/
Microsoft Word/PowerPoint
Themeyourself http://es.themeyourself.com/bancos-de-imagenes-gratis/
Unsplahs https://unsplash.com/explore
Foter http://foter.com/
Dreamstime https://es.dreamstime.com/
123RF http://es.123rf.com/freeimages.php
Freeimages http://es.freeimages.com/
Picjumbo https://picjumbo.com/
Gratisography http://www.gratisography.com/

19. Herramientas de edición de imágenes