Source: http://eclaravalls.es/imagenes-uso/
Timestamp: 2017-06-22 12:11:56+00:00

Document:
por Esther Claravalls | 16 05 2016 | Internet y web, Recursos | Las imágenes son un ingrediente fundamental, tanto si generas contenido para la web como si generas contenido escrito. Para poder sacarle el máximo partido debes conocer algunos conceptos básicos. En este post te hablaré de dichos conceptos, de los diferentes de tipos de archivo para esas imágenes, qué herramientas puedes utilizar para crear y retocar tus imágenes, donde puede conseguir imágenes libres de derechos y como optimizarlas para que no ocupen tanto espacio. Empecemos.
Tabla de Contenido1 Conceptos Básicos sobre Imágenes1.1 Definición de Imagen1.2 Profundidad de color1.3 Relación de Aspecto1.4 Resolución de Imagen1.5 Resolución de Impresión2 Tipos de Archivos de Imágenes y sus Usos3 Herramientas para Crear y Retocar Imágenes3.1 Herramientas de Escritorio para la Creación y Retoque de Imágenes3.2 Herramientas Web para la Creación y Retoque de Imágenes4 Bancos de Imágenes5 Captura de Pantalla6 Herramientas de Conversión y Compresión de Imágenes6.1 Compresión de Imágenes6.2 Conversión de Imágenes7 Infografía
Una imagen es un archivo de datos que representa una rejilla rectangular de píxeles o puntos de color, que se puede visualizar en un monitor, papel u otro dispositivo de representación.
Las imágenes se definen por su altura y anchura (en píxeles) y por su profundidad de color (en bits por píxel) .
Un píxel es la menor unidad homogénea en color que forma parte de una imagen digital. Es decir, es la parte más pequeña de una imagen que lleva asociado un color. Por tanto, podemos decir que una imagen es un mosaico de píxeles pintados de un color determinado. Pero ¿como indicamos el color de dicho pixel? Aquí es donde aparece el concepto de profundidad de color.
La profundidad de color se refiere a la cantidad de bits de información necesarios para representar el color de un píxel en una imagen digital. Se mide en bits por píxel (bpp).
Como seguramente ya sabrás, lo colores en pantalla se consiguen mezclando el rojo (red), el verde (green) y el azul (blue), dando origen al código RGB. Normalmente, disponemos de 8 bits para cada uno delos componentes RGB, lo que nos permite crear 16 millones de colores.
Hemos dicho que una imagen se define por profundidad de color, su alto y su ancho. A este respecto hay que tener en cuenta al relación de aspecto de la imágen, es decir, la proporción entre su ancho y su altura. Se calcula dividiendo el ancho por la altura de la imagen visible en pantalla, y se expresa normalmente como «X:Y».
Aunque hay diversas relaciones, las más conocidas con la 4:3 y la 16:9. En este enlace encontrarás más información al respecto. Si estás creando documentos escritos, este parámetro quizás no te influya mucho, pero en una web, y en especial, en un tema WordPress, no tenerlo en cuenta puede suponer que la imagen se vea cortada. Lo más difícil del tema es que no sabes ni puedes controlar el tipo de monitor que tienen los navegantes, así que te sugiero que uses imágenes donde el aspecto principal a mostrar se encuentre en el centro de la imagen.
La resolución de imagen se refiere a la cantidad de detalles que se puede observar en una imagen. A mayor resolución, mayor calidad. Se mide en píxeles de ancho por píxeles de alto. En la siguiente figura puedes observar un ejemplo.
Piensa en las cámaras digitales. Una cámara de 3 megapíxeles significa que puede hacer fotos de 2000 x 1500 píxeles, con una relación de aspecto 4:3.
Por último tenemos que considerar al resolución de impresión, que no es más que la calidad de la imagen cuando queremos llevarla al papel. La resolución de impresión se mide en puntos por pulgada (ppp o dpi). Este parámetro se define en el momento de crear la imagen.
Las resolución habitual para la web es de 72 ppp, mientras que para imprimir se suele usar 300 ppp. Para determinar el tamaño máximo en el que podemos imprimir la imagen sin que ésta se vea pixelada, puedes aplicar la siguiente fórmula:
Tipos de Archivos de Imágenes y sus Usos
Ahora que ya tenemos claros los conceptos básicos sobre las imágenes, podemos adentrarnos el los tipos de archivos y cuales son sus usos recomendados. De entrada hay que decir que existe una gran cantidad de tipo de archivos, en función del fabricante, de si se trata de imágenes de mapa de bits o vectoriales, etc.
Nosotros vamos a centrarnos en los tipos más comúnmente utilizados hoy día para las imágenes de mapa de bits: JPG, PNG y GIF. En la siguiente figura puedes ver un resumen:
Las imágenes de tipo GIF suelen tener una baja calidad, por lo que únicamente se recomienda su uso para animaciones. En cuanto a imágenes no animadas, si necesitas un fondo transparente, deberás utilizar archivos de tipo PNG. En el resto de casos, te recomiendo que uses archivos JPG ya que pesan menos que éstos últimos.
Herramientas para Crear y Retocar Imágenes
Hoy día son muchas la herramientas disponibles para crear y retocar imágenes. Las que yo te enumero a continuación tienen en común que todas son gratuitas y que no necesitas ser un experto para utilizarlas y obtener resultados fantásticos. ¡Lo único que necesitarás es creatividad, por supuesto!
Herramientas de Escritorio para la Creación y Retoque de Imágenes
A continuación te presento algunas herramientas de edición de imágenes que puedes instalar en tu ordenador.
Se trata de la alternativa de software libre a PhotoShop. Es la más compleja de utilizar, pero la más completa.
Es más sencilla que Gimp, pero bastante completa
PhotoScape te permite retocar tus fotos, crear GIF animados y hacer collage, entre otros
Se trata de una herramienta que está disponible como aplicación de escritorio y on-line. Sus funciones son similares a PhotoShape
Herramientas Web para la Creación y Retoque de Imágenes
Si no te apetece instalar aplicaciones en tu ordenador y tienes conexión a Internet, puedes utilizar las siguientes herramientas para la edición de tus imágenes.
Puedes editar y retocar tus imágenes, hacer collage y diseñar las portadas de tus redes sociales usando imágenes de tu ordenador, facebook, Dropbox y/o OneDrive
Otra herramienta similar a PicMonkey, para edición, retoque y efectos de imágenes. Disponible también para móvil y escritorio.
Esta es una de mis herramientas favoritas. Podrás hacer portadas, infografías, imágenes de perfil de redes sociales y muchas más cosas.
Editor gráfico, creación de collage y diseño de invitaciones, menús, felicitaciones, infografías, cabeceras de redes sociales, …
Conseguir imágenes de calidad y libres de derechos (Creative Commons o Dominio Público) es fácil si sabes donde buscar. Aquí te muestro las herramientas que yo uso habitualmente.
Para mí es el buscador de imágenes por excelencia. Busca imágenes en los repositorios más populares desde una única web.
Repositorio imprescindible donde todas las imágenes son de dominio público.
Otro banco de imágenes imprescindibles donde además encontrarás ilustraciones, iconos y archivos PSD.
Banco de iconos imprescindible para tus creaciones web, aplicaciones y documentos, disponibles en formato PNG, PSD, SVF y EPS.
Si el estilo plano de Flat Icon te sabe a poco y buscar iconos más elaborados, prueba con Icon Finder. Yo llevo más de usandolo desde su creación en el 2007.
Si estás preparando un artículo, guía, tutorial o simplemente tu portfolio, seguramente necesitaras capturar las imágenes que aparecen en pantalla. Mis herramientas habituales son:
Se trata de una herramienta de escritorio que te permite capturar un área de la pantalla. Para mí, una de las imprescindibles.
Se trata de un complemento para tu navegar favorito, que te permite capturar páginas web enteras, incluyendo la parte que no se ve.
Herramientas de Conversión y Compresión de Imágenes
Tan importante es tener una buena imagen como el hecho de que ésta ocupe el mínimo espacio sin pérdida de calidad. Si esa imagen vamos a usarla en una web, entonces esto será un mandamiento: por ahorrar espacio en nuestro alojamiento y para optimizar nuestra web.
A continuación te dejo algunas herramientas online de compresión, muy útiles y muy fácil de utilizar.
Herramienta que te permite comprimir las imágenes de tipo JPG.
Herramienta que te permite comprimir las imágenes de tipo PNG.
Herramienta que te permite comprimir documentos tipo PDF.
Ya hemos visto los diferentes tipos de archivo de imágenes con los que vamos a trabajar, pero no siempre la imagen deseada está en el formato que nos interesa. Aquí te dejo algunas herramientas que te permiten la conversión entre formatos, que además comprimen.
Herramienta que te permite convertir las imágenes de tipo PNG a JPG.
Herramienta que te permite convertir las imágenes de tipo JPG a PNG.
Convertir SVG a PNG
Herramienta que te permite convertir las imágenes de tipo SVG a PNG.
Espero que este artículo sea de tu utilidad y te permita manejarte con más soltura en el tratamiento de tus imágenes. Si te ha gustado el post, siéntete libre de compartirlo con tus amig@s.
About Latest Posts Sígueme enEsther ClaravallsDirector General at Spica SoftwareIngeniera. Profesionalmente vinculada a la informática industrial y a la creación de proyectos web. Buscadora incansable de conocimiento por el puro placer de aprender. Sígueme enLatest posts by Esther Claravalls (see all)	Senior development manager – Zartis – Madrid - 22/06/2017	Técnico de Sistemas Windows (PowerShell) - 22/06/2017	PROGRAMADOR PLC – Adeas RRHH – Barcelona - 22/06/2017	Te puede interesarGoogle Nik Collection. Software Gratuito de Edición FotográficaCómo empezar a planificar tu web desde ceroComunicación Web: Particularidades del Medio22 Herramientas Gratuitas para Validar Páginas WebComo asegurar la autoría de tus creaciones6 Aspectos clave para elegir un tema WordPress | Infografía	Buscar:

References: Resolución 
 Resolución 
 resolución 
 resolución 
 resolución 
 resolución