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.

Conceptos Básicos sobre Imágenes

Definición de Imagen

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.

 

imagen digital
pixel

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.

profundidad de color

Relación de Aspecto

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.

relacion de aspecto

Resolución de 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.

resolucion de imagen

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.

Resolución de Impresión

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:

resolucion de impresion

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:

tipo de archivos de imagenes

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.

gimp

Gimp

Se trata de la alternativa de software libre a PhotoShop. Es la más compleja de utilizar, pero la más completa.

paint.net

Paint.Net

Es más sencilla que Gimp, pero bastante completa

PhotoScape

PhotoScape

PhotoScape te permite retocar tus fotos, crear GIF animados y hacer collage, entre otros

fotor

Fotor

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.

PicMonkey

PicMonkey

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

Pixlr

Pixlr

Otra herramienta similar a PicMonkey, para edición, retoque y efectos de imágenes. Disponible también para móvil y escritorio.

Canva

Canva

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.

BeFunky

Be Funcky

Editor gráfico, creación de collage y diseño de invitaciones, menús, felicitaciones, infografías, cabeceras de redes sociales, …

Bancos de Imágenes

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.

All The Free Stock

All The Free Stock

Para mí es el buscador de imágenes por excelencia. Busca imágenes en los repositorios más populares desde una única web.

pixabay

Pixabay

Repositorio imprescindible donde todas las imágenes son de dominio público.

pixabay

Freepik

Otro banco de imágenes imprescindibles donde además encontrarás ilustraciones, iconos y archivos PSD.

FlatIcon

Flat Icon

Banco de iconos imprescindible para tus creaciones web, aplicaciones y documentos, disponibles en formato PNG, PSD, SVF y EPS.

IconFinder

IconFinder

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.

Captura de Pantalla

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:

jing

Jing

Se trata de una herramienta de escritorio que te permite capturar un área de la pantalla. Para mí, una de las imprescindibles.

Fireshot

Fireshot

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

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.

compress jpg

Comprimir JPG

Herramienta que te permite comprimir las imágenes de tipo JPG.

compress png

Comprimir PNG

Herramienta que te permite comprimir las imágenes de tipo PNG.

compress jpg

Comprimir PDF

Herramienta que te permite comprimir documentos tipo PDF.

Conversión de Imágenes

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.

png a jpg

Convertir PNG a JPG

Herramienta que te permite convertir las imágenes de tipo PNG a JPG.

jpg a png

Convertir JPG a PNG

Herramienta que te permite convertir las imágenes de tipo JPG a PNG.

svg a png

Convertir SVG a PNG

Herramienta que te permite convertir las imágenes de tipo SVG a PNG.

Infografía imágenes

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.

Esther Claravalls
Sígueme en

Esther Claravalls

Ingeniera. 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.
Esther Claravalls
Sígueme en

Uso de cookies

Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continuas navegando estas dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de lapolítica de cookies, pincha el enlace para mayor información.

ACEPTAR

Pin It on Pinterest

Share This