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 tenés…UsáPor 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 Acá 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 adentro 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 Guardá 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 «mandámelo 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 chica y más nítida; a menos dpi, más grande y más borrosa.

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

El error clásico, pero con plata 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.

Pedí 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 sacarle 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 recién al final.

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

  1. Para exportar a PDFAbrís el .html en el navegador, Ctrl+P, y elegís «Guardar como PDF». Nada más.
  2. Para medidas de imprentaPedile 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 redesPedile las medidas del formato que necesites y exportás 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 arrancás?

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

snack 6 de 6

Powered by KlugerByte