Trabajar con ficherosDónde va y en qué formato · 9 min de lectura

Qué extensión para qué

La tabla que resuelve el 95% de las decisiones.

Si tienes…UsaPor qué
Una foto .jpg Comprime muy bien las fotos y nadie nota la pérdida. Un .png de la misma foto pesa varias veces más sin verse mejor.
Una captura de pantalla .png Aquí sí importa: el .jpg ensucia los bordes de las letras y la captura queda con basura alrededor del texto.
Un logo, un icono, un dibujo plano .svg Escala a cualquier tamaño, pesa poquísimo, y es texto — o sea, editable.
Algo que necesita fondo transparente .png El .jpg no sabe guardar transparencia: te la rellena de blanco.
Algo para imprenta .pdf Guarda vectores y texto sin degradar. Si dentro hay fotos, que estén a 300 dpi al tamaño final.
Algo para subir a una web .webp Pesa bastante menos que .jpg con la misma calidad. Si el sitio no lo acepta, .jpg.
Algo que vas a querer editar dentro de un mes el fuente Guarda siempre el archivo con el que lo construiste —el .html, el .svg— además del exportado. Sin eso, editar es rehacer.
Verde, texto. Magenta, binario.

Píxeles y dpi, en dos párrafos. Para cuando el de la imprenta te dice «mándamelo en alta».

Píxeles es cuántas casillas tiene la imagen en total: 1748 × 2480, por ejemplo. Es un número fijo, guardado en el archivo. Dpi (puntos por pulgada) no es una propiedad de la imagen sino de cómo la vas a mostrar: cuántas de esas casillas vas a meter en cada pulgada de papel.

La misma imagen a más dpi sale más pequeña y más nítida; a menos dpi, más grande y más borrosa.

La regla práctica: para pantalla vale cualquier cosa razonable; para imprenta quieres 300 dpi al tamaño final. Un folleto A5 impreso necesita unos 1748 × 2480 píxeles.

El error clásico, pero con dinero de por medio: el logo bajado de la web vive a 200 píxeles porque es todo lo que hace falta en pantalla, y en un cartel de dos metros se nota.

Pide siempre el original vectorial del logo — un .svg, un .pdf o un .ai. Con eso el tamaño deja de ser un problema para siempre, y es la razón por la que las agencias te lo mandan así.

Cómo se hace un folleto, entonces. La tentación es abrir Canva o Photoshop y empezar a dibujar. El problema aparece en el cambio número siete, cuando el cliente pide mover el precio, cambiar el verde y quitarle una línea al texto: sobre una imagen, cada cambio se hace a mano otra vez, y el siete cuesta igual que el uno.

El camino que aprovecha todo lo anterior: construir el folleto en texto —un .html con su .css— y exportarlo a imagen sólo al final.

Iterar sobre el texto no cuesta nada. Exportar se hace una sola vez. El original es el .html, no el .png: si pierdes el PNG lo vuelves a exportar en diez segundos; si pierdes el .html, perdiste el folleto.

  1. Para exportar a PDFAbres el .html en el navegador, Ctrl+P, y eliges «Guardar como PDF». Nada más.
  2. Para medidas de imprentaPídele a la IA que le ponga el tamaño exacto en milímetros y márgenes de sangrado. Es una línea de CSS.
  3. Para redesPídele las medidas del formato que necesites y exportas una imagen por cada uno — del mismo archivo de texto.
Exportar es el último paso, y no necesita nada raro.

Vas a hacer un folleto que el cliente va a corregir varias veces. ¿Por dónde empiezas?

Guarda siempre el archivo con el que construiste la cosa, no sólo la cosa exportada.

snack 6 de 6

Powered by KlugerByte