GUARDAR IMÁGENES PARA WEB8 min read

Para guardar imágenes para web, primero vamos a conocer qué es una publicación electrónica y multimedia:

Una publicación electrónica o multimedia es un producto gráfico o el método para distribuir cualquier tipo de información a través de medios digitales e internet fundamentalmente. 
Por tanto las publicaciones que para ser vistas, tenga que ser reproducida por un dispositivo electrónico como un ordenador, smartphone, tablet, libro electrónico o similares 📱💻…

Las publicaciones multimedia se componen de los siguientes elementos:

  1. Imágenes
  2. Textos
  3. Sonido
  4. Vídeo
  5. Animaciones
  6. Enlaces (links)

Para comenzar a trabajar en cualquier producto gráfico multimedia, hay que conocer fundamentalmente la preparación especial que requieren las imágenes, ya que es con diferencia el archivo más extendido y lo usaremos en múltiples trabajos.

IMÁGENES EN MAPA DE BITS

GIF
Ventajas: Pesa poco. Para imágenes con pocos degradados y tintas planas es perfecto. Permite transparencia pero my cutre. Es el único archivo de imagen que puede ser animado.
Inconvenientes: Las transparencias quedan con los bordes poco definidos. En los difuminados se pixela. Sólo 256 colores como máximo.

PNG
Ventajas: Es el de más calidad de imagen. Permite transparencia con los bordes perfectos (mejor en su versión 24 que 8).
Inconvenientes: Pesa mucho. No válido para fotos muy grandes y con mucha información de colores y detalles (para esto último es mejor el JPG por su bajo peso).

JPG
Ventajas: Es el más usado y es por algo, ya que pesa poco en relación a la calidad. Bueno, bonito y barato. Cuando es una foto muy grande, podemos comprimirlo hasta que dé un buen peso y se verá bien o muy bien. Tampoco hay que venirse arriba con la compresión porque puede quedar la imagen pixelada y con una sensación de mala calidad.
Inconvenientes: No permite transparencia ni animación.

En general usaremos JPG para las fotografías y PNG para las fotos con transparencia (y en algunos casos para logos o botones). El GIF lo dejamos para pequeñas animaciones, y para fotos con masas de color que compararemos con el JPG: la que pese menos, será la elegida. (pero en colores planos suele ser mejor el GIF).
Debemos tener claro que una imagen que pese más de un megabyte, es considerada grande (Aunque para fondos a pantalla completa pueden pesar más incluso). Lo ideal siempre es cuanto menos mejor, pero jugaremos con valores de hasta 1MB y poco más.

IMÁGENES VECTORIALES
Usaremos el formato vectorial para logotipos, botones, animaciones e iconos, ya que son totalmente escalables y siempre se ven nítidos y perfectos. El formato .SVG (Scalable vector graphics) es el elegido. Tiene la ventaja de que es muy ligero, vectorial y por tanto sus bordes se ven perfectos y además es reproducible sólo por código html. Pero por contra, tiene el inconveniente de que su modo de color es difícil de controlar y suele dar problemas si queremos un color exacto. Ojo con las medidas porque se le va la pinza, y hay veces que hay que especificarle mediante código qué medidas debe llevar la imagen.

¿CÓMO TRATAMOS LAS IMÁGENES DE MAPA DE BITS PARA WEB?
Lo primero que debemos saber es qué tamaño y resolución debemos tener en nuestra imagen. La solución más fácil es saber que con una resolución de 72 ppi, nuestra imagen se va a ver bien en cualquier pantalla. Aunque actualmente con las pantallas retina (Apple) o HiDPi (Google/Android), las imágenes deberían tener una resolución mayor, ya que este tipo de dispositivos pueden tener hasta 5x (cinco veces más resolución. Aquí más información), pero de momento seguiremos preparándolas a 72 ppi y seguirán viéndose correctamente.



Por tanto vamos a fijarnos en cuántos píxeles queremos que tenga nuestra imagen de ancho por alto, y si visualizamos en Photoshop al 100% de su tamaño (podéis verlo en el panel de zoom: Navegador) y la vemos bien, no necesitamos nada más.
Aún así, el 99% de las imágenes de internet están a 72 ppi ya que en su guardado para web, Photoshop usa esa resolución… Que no tiene mucho sentido si conoces un poco de historia, pero bueno, aceptaremos barco.

Las imágenes para web deben pesar como este pajarito.

¿POR QUÉ TIENEN QUE PESAR POCO?
Pues por varios motivos. Hoy tenemos unas conexiones de lujo, pero tú no sabes quién va a ver tu publicación y desde dónde. Lo mismo es un usuario que vive en un pueblo con una conexión mala, o alguien que tiene un teléfono móvil muy antiguo. La navegación móvil es mucho mayor que la de ordenador o tablet, así que teniendo en cuenta eso, cuando prepares una imagen para web o una publicación electrónica, optimízala.
Así el usuario podrá descargarla más rápido, y no se generará carga, que hará que entre 2 y 4 segundos nuestro visitante se vaya 😭. Además en el posicionamiento SEO es mejor que nuestra web pese menos a que pese más: Lo dice San Google.

CÓMO GUARDAMOS PARA WEB
Si estás en Photoshop, recuerda que debes guardar tus imágenes mediante la opción “archivo > Guardar para web…“, y después: (En las versiones nuevas es Archivo>Exportar>Guardar para web (Heredado)): En primer lugar selecciona arriba a la derecha el formato en el que quieres exportar (gif, png o jpg). Si utilizas las pestañas superiores podrás ver hasta cuatro copias para comparar diferentes formatos o compresiones y ver su relación calidad/peso.

Carga de una imagen «baseline» (25%, 50% y 100%). La imagen carga en calidad alta por saltos.
Carga de una imagen «progresiva» (25%, 50% y 100%). La imagen carga entera en baja y la calidad sube hasta que carga del todo.

Si exportas en JPG, ten en cuenta:
La barra de calidad, de 0 a 100, siendo 0 compresión máxima y 100 casi sin compresión, es decir calidad alta.
La opción “progresivo”. Si la pulsas, el jpg guardará diferentes capas a diferentes calidades de manera que a la hora de cargarse en el servidor la  imagen se verá en baja calidad e irá mejorando su definición a medida que vaya cargando. Si no, la imagen aparecerá directamente en alta e irá cargando por trozos.

Si exportas en PNG, ten en cuenta: 
¿PNG-8 o PNG-24?  La principal diferencia es que PNG-8 comprime un máximo de 256 colores, como un GIF, mientras que PNG-24 alcanza los 16 millones de colores. Normalmente usarás este último.
 Transparencia.   Bastante obvio, si lo activas el fondo de la imagen será transparente (siempre que no exista una capa sólida en el fondo de Photoshop).
La opción   «entrelazado”  es muy similar al “progresivo” en JPG, hace referencia al tipo de carga. Dependerá de nuestras preferencias y de las capacidades del navegador donde vaya a cargarse la imagen.

El primer Bob es un PNG 24. El segundo un GIF a 256 colores. Como se ve en la imagen, el fondo es negro para resaltar los bordes perfectos del PNG, y los «dientes de sierra» del GIF. Así que siempre que necesites una imagen sin fondo: PNG POWER ✊.

Si exportas en GIF, ten en cuenta:
– Perceptual para crear una tabla de colores personalizada.
– Selectiva para crear una tabla de colores similar, pero favoreciendo amplias áreas de color y la conservación de los colores Web. Esta tabla de colores normalmente produce imágenes con la máxima integridad del color. (Selectiva es la opción por defecto.)
– Adaptable para crear una tabla de colores personalizada realizando muestras de colores del espectro que aparece con más frecuencia en la imagen. Por ejemplo, una imagen con sólo tonos de verde y azul produce una tabla de colores compuesta principalmente por verdes y azules. La mayoría de las imágenes concentran los colores en áreas determinadas del espectro.
– Restrictiva utiliza el estándar, de 256 colores, tabla de color seguro para la Web común a los paneles de 8 bits (256 colores) de Windows y Mac OS. Esta opción garantiza que ningún tramado de navegador se aplica a los colores cuando la imagen se muestra el uso de color de 8 bits. Si la imagen tiene menos de 256 colores, los colores no utilizados se eliminan de la tabla.

Los colores que podrás elegir irán desde 2 a 256, que el programa utiliza para intentar reproducir el color más exacto. Obviamente cuanto menos colores actives, menos pesará la imagen. Además debes recordar tener activa la casilla de «transparencia» en el caso que quieras que la imagen no tenga fondo. Y ya si quieres un GIF con animación, decidle abajo del todo cuántas veces queréis que se repita o infinito.

Fuentes: http://www.40defiebre.com/optimizar-imagenes-web/mancerareyes.es/como-solucionar-los-problemas-de-las-imagenes-en-las-pantallas-retina/

Este sitio web utiliza cookies para tengas la mejor experiencia de usuario. Si continúas navegando estás aceptándolas y también nuestra política de cookies. Más info aquí.

ACEPTAR

Aviso de cookies