fbpx
León Desarrollo - Programación WordPress
Conceptos básicos sobre las imágenes

Conceptos básicos sobre las imágenes


Vamos a hacer un repaso rápido de conceptos básicos sobre las imágenes, ya que es necesario para entender el proceso.

Además explicaremos porqué pueden perder calidad las imágenes.

Los píxeles

El píxel es la unidad mínima en la que podemos dividir una imagen. Realmente es un pequeño cuadrado con un color uniforme en su interior.

Es uno de los conceptos básicos sobre las imágenes que debemos entender para poder trabajar con ellas.

La unión de dichos pixeles en forma de matriz (ancho x alto) compone una imagen.

Cuantos más pixeles de ancho y de alto tengamos mayor será su dimensión, y cuanto más pequeños sean dichos píxeles mayor será su calidad o resolución.

Reducir imágenes con Photoshop
Píxeles de una imagen

Las dimensiones

Las dimensiones se definen en píxeles, y es la relación de ancho x alto. Por ejemplo: 1800×1300.

Con respecto a las proporciones, podemos tener los siguientes casos:

  • Ancho > Alto: Imagen horizontal.
  • Ancho < Alto: Imagen vertical.
  • Ancho = Alto: Imagen cuadrada.

Los megapixeles

La expresión de «los megapixeles» se ha explotado hasta llegar a condicionar el precio de una cámara de fotografías o un teléfono, pero ¿qué es?

Los megapixeles sencillamente es el resultado de multiplicar la anchura por la altura (el número total de pixeles). Vamos a utilizar como ejemplo las dimensiones anteriores:

Cálculo de los megapixeles de una imagen

1800 x 1300 = 2.340.000px
2.340.000px -> 2,34mpx

Cuando compramos un dispositivo con cámara de fotos no debemos fijarnos únicamente en la resolución (los megapixeles), ya que en muchos casos lo exageran. Los conceptos básicos sobre las imágenes con respecto a la calidad, nos dicen que es más importante el sensor.

Canal Alfa

En algunos formatos de imagen (como ejemplo png y gif) además de la matriz de pixeles, también hay una capa llamada canal alfa (∝).

El canal alfa (∝) de las imágenes, es una capa que no se aprecia al ojo humano, pero que sirve para definir la opacidad de cada pixel.

Digamos, que cada pixel de la imagen puede tener una opacidad comprendida entre el 0% y el 100%. Dicho valor permite que las imágenes tengan transparencias, o que su forma no sea cuadrada (circular por ejemplo).

Reducir imágenes con Photoshop
Canal alfa

Relación de aspecto

La relación de aspecto es el resultado de dividir la anchura entre la altura de la imagen.

RELACIÓN = ANCHO / ALTO

El valor resultante nos permite calcular la relación entre la anchura y la altura, por lo que si queremos redimensionar el ancho de nuestra imagen y no queremos que se pierdan las proporciones debemos calcular la altura dividiendo la anchura actual entre la relación de aspecto.

Por ejemplo:

Imagen: 1800X1300
R. Aspecto: 1800px/1300px = 1,384...

Redimensionamos la anchura:
Nueva anchura: 1500px
Nueva altura: N.ANCHURA/R. ASPECTO = 1500px / 1,384... = 1084px (Se redondea, ya que no se puede dividir un pixel)

Redimensionamos la altura:
Nueva altura: 2000px
Nueva anchura: N.ALTURA*R. ASPECTO = 2000px * 1,384... = 2768px (Se redondea, ya que no se puede dividir un pixel)

Si no queremos que nuestra imagen se deforme, debemos hacer que la relación de aspecto se mantenga SIEMPRE. Para ello activaremos un candado que veremos más adelante.

Reducir imágenes con Photoshop
Proporciones de la imagen, cómo no se debe hacer

La resolución de imagen

Es uno de los conceptos básicos sobre las imágenes que más difíciles son de entender.

La resolución de la imagen define la cantidad de pixeles que contiene un espacio métrico. La unidad métrica utilizada en general el la pulgada (2,54cm).

Se mide en píxeles por pulgada (ppp).

Con la resolución, no solo definimos la información que se almacena por cada pulgada, si no que se define el tamaño físico del pixel.

Cuanta más resolución, más información almacena la imagen, por lo tanto tiene más calidad, y cuanta menos resolución, menos información tendrá la imagen.

Hasta ahora todo muy bonito, pero nos puede surgir otra pregunta ¿por qué no se utiliza la resolución máxima en las imágenes?:

  • Porque las imágenes ocuparán mucho espacio en el disco duro.
  • Porque el medio que lo reproduce no analiza toda la información, por lo que será despreciada.

Lo más importante es que no todos los dispositivos interpretan todos los pixeles a la hora de mostrárnoslos (por ejemplo las pantallas o las impresoras), por lo que se han definido resoluciones estándar según el dispositivo utilizado.

Resolución para web, redes sociales y pantallas en general

Por lo general se suele utilizar 72 ppp y el motivo es que en el momento de la interpretación se desprecia la información sobrante.

Si que es cierto que con con la velocidad que avanza la tecnología de las pantallas, ya admiten más resolución aunque en la mayoría de los casos no es así.

Resolución para impresión

La resolución para impresión es un poco más relativa. Para las impresoras domésticas como las que tenemos la mayoría, con 300ppp es más que suficiente.

En el caso de que la impresión se realice en una máquina profesional, es conveniente informarse previamente de la resolución máxima permitida.

Para que sirven las imágenes con más resolución

La resoluciones más altas sirven para poder aumentar el tamaño de la imagen sin perder calidad. Todo depende del dispositivo al que estén destinada. Vamos a explicarlo con un ejemplo:

DocumentoTamañoResoluciónEscala
Original1800×1300600ppp100%
Impresión3600×2600300ppp200%
Web15000×1083372ppp833,33%

Los formatos de imagen

El formato de imagen se define por una serie de estándares, aunque aquí sólo vamos a hablar de los más utilizados. También cabe destacar los formatos de imágenes vectoriales, los cuales veremos un poco por encima, ya que su comportamiento nada tiene que ver con los píxeles, y formatos luz.

EL formato de la imagen está definido por la forma que tiene de almacenarse la información y la compresión utilizada. Para identificarlos podemos comprobar la extensión del archivo.

Formatos de imagen Raster

La imágenes Raster son todas aquellas que se componen de un mapa de pixeles (lo que hemos visto anteriormente), y se pueden dividir en:

  • Formatos sin compresión.
  • Formatos comprimidos con pérdida.
  • Formatos comprimidos sin perdida.
NombreExtensiónCon pérdidaColoresTransparenciaAnimación
JPEG/JFIF.jpeg ó .jpgSi24 bitsNoNo
JPEG 2000.jp2Si48 bitsNoNo
TIFF.tiffNo48 bitsNoNo
GIF.gifSi8 bitsSiSi
PNG.pngSi24 bitsSiNo
WebP.webpSiNoNo
Formatos más utilizados

Existen muchos más formatos, pero los más utilizados son estos. Ahora voy a explicar para que se recomienda utilizar cada uno:

  • Imágenes con transparencia:
    • Poca calidad (por ejemplo logotipos a 2 colores): GIF.
    • Alta calidad (imágenes con degradado a transparente): PNG.
  • Fotografías:
    • Para web: JPEG o PNG.
    • Impresión: JPEG.
  • Símbolos, iconos o formas:
    • GIF.
  • Animaciones:
    • GIF.

Formatos de vector

Las imágenes vectoriales son aquellas que se definen a partir de fórmulas matemáticas. Dentro de aquellas fórmulas se almacenan puntos, líneas y atributos de las mismas.

Su utilización está tan extendida ya que permite la realización de gráficos a un tamaño indeterminado, ya que únicamente hay que multiplicar o dividir cada fórmula.

Los dos formatos más conocidos son SVG y AI.

Conceptos básicos sobre las imágenes
Imagen en formato vectorial

Formatos luz

Estos últimos años se creó un nuevo formato que permitía almacenar la información exactamente igual que la reciben los sensores de las caras de fotos, por lo que cuanto mejor es el sensor mejor es la calidad.

Dichos formatos permiten la edición de la fotografía como si fueran los ajustes que se realizan en las cámaras. Al no almacenar píxeles, no tienen pérdida alguna.

La compresión y la pérdida de calidad

Si hemos comprendido bien los conceptos básicos sobre las imágenes, utilizando la lógica podemos hacer que nuestro trabajo pierda la mínima calidad.

Como hemos hablado anteriormente muchos formatos de imágenes realizan una compresión de la misma, por lo que generan pérdida de información.

Elegir el formato adecuado es la parte más importante a la hora de su calidad. Voy a explicar unas pautas a seguir desde que tomamos una imagen hasta que la publicamos o la imprimimos para perder la mínima información.

  1. Configurar la cámara en formato RAW (formato luz) o en la máxima calidad JPEG.
  2. No utilizar bajo ningún concepto el zoom digital, ya que lo que hace es recortar la imagen y mostrarla más grande (se muestran más grandes los píxeles o los interpretan inventando los colores).
  3. Almacenarlas en nuestro ordenador la versión original.
  4. Realizar la edición en este orden:
    1. Ajustes de luz o color.
    2. Edición de zonas con la máxima resolución (copiar elementos, borrar parte de la foto, corregir errores).
    3. Recortar la imagen (si es necesario).
    4. Guardar los cambios como archivo nuevo.
  5. Exportación:
    1. A la hora de exportar vamos a elegir el tamaño final (ya sea para web o para imprimir).
    2. Almacenarlo en el formato más adecuado (si es fotografía JPEG).
    3. No guardar los cambios realizados en la exportación, ya que se puede perder información.

Lo que hay que tener en cuenta es que cada vez que pinchamos sobre el botón «Guardar», si trabajamos con un formato de imagen con pérdidas, se perderá información, por lo que es conveniente no guardar el archivo más que lo necesario.

Como es obvio, no podemos aumentar el tamaño más que lo que nos permita nuestra resolución, ya que los programas lo que hacen es interpretar los píxeles. A simple vista se verá bien, pero si aumentamos veremos la falta de definición.

Calidad y resolución según su utilización

Vamos a resumir un poco todo lo que hemos tratado anteriormente y vamos a ver unas buenas prácticas a seguir si queremos que nuestro trabajo se vea al 100% como nosotros queremos, y no como quiera la máquina.

Calidad para web, redes sociales y reproducción por pantalla

Las imágenes que se vayan a reproducir por pantalla tienen que cumplir los siguientes requisitos:

  • Resolución: 72ppp.
  • Dimensiones: Justo lo que necesitemos (pantalla completa 1600 o 1800px de ancho).
  • Formato:
    • Fotografías: JPEG 60% de calidad.
    • Logotipos: PNG o GIF.
    • Animaciones: GIF.

Calidad para impresión

La calidad para impresión depende de la impresora de destino. Por lo general para las impresoras domésticas 300ppp son más que suficientes.

  • Resolución: 300ppp o el máximo que admita la impresora.
  • Dimensiones: El máximo posible, el software de impresión se encarga de ajustarlo a los medios.
  • Formato: JPEG 100% de calidad.

Ya entendemos los conceptos básicos sobre las imágenes

Ahora sólo nos queda aplicarlos. Ya podemos empezar a trabajar con las imágenes al más alto nivel.

Suscríbete

Si quieres estar al día con las novedades de este sitio te recomiendo que te suscribas.

Comentarios

Deja un comentario


Puede que también te interese

2018 animaciones animación Aranda array atributos añade base de datos buscar categoría css curso diseño Duero emprendimiento fechas fiduero guía imagen imagenes inauguracion instalar Isilla javascript linux local mac node.js pagina pagina web php post problemas producto servicio servidor solución split sql sql server stock string windows woocommerce wordpress

marzo 2024
L M X J V S D
 123
45678910
11121314151617
18192021222324
25262728293031