Una imagen de mapa de bits guarda una rejilla. Cada celda es un píxel con un color. Si la rejilla es de 800 por 600, hay
800 × 600 = 480 000 píxeles, no una descripción de «un círculo». Al ampliar, el programa no inventa detalle: agranda los cuadrados. Por eso una foto se ve bien a su tamaño y se rompe en un cartel de pasillo. JPEG comprime tirando información (y genera bloques); PNG comprime sin pérdida y aguanta transparencias. Ninguno de los dos se vuelve vector por cambiarle la extensión.
Una imagen vectorial guarda instrucciones: mueve el lápiz, traza una curva, rellena de ámbar. El círculo es centro, radio y color. Al ampliar, se recalcula el borde. Por eso el logotipo del aula y el plano de las mesas viven mejor en SVG. El SVG es texto: se puede abrir en un editor y leer las etiquetas. No es magia infinita: un vector con diez mil nodos de una foto calcada pesa, se edita mal y sigue sin ser una foto convincente.
Foto del patio, retrato, captura de pantalla, textura de madera escaneada: bitmap. Logotipo, icono, plano, gráfica de barras que vas a reimprimir a otro tamaño: vector. Un cartel puede mezclar los dos: foto de fondo en PNG y título en trazos. Si el título va dentro de la foto, ya es píxel y no podrás cambiar la falta sin repintar. El bloque B empieza por esta decisión porque todo lo que sigue (nodos, logo, extrusión) hereda el error si eliges mal el tipo.
La resolución se dice en píxeles, no en «calidad». 72 ppp o 300 ppp solo significan algo cuando hay un tamaño físico de impresión. Una imagen de 300 píxeles de ancho no se vuelve nítida porque alguien escriba 300 ppp en los metadatos. Para pantalla basta ver el tamaño en píxeles. Para una lona, hace falta calcular píxeles = centímetros × puntos por centímetro. Si no vas a imprimir, no finjas una resolución de imprenta.
Vectorizar una foto automática («calco de imagen») produce manchas, no un dibujo editable. Solo compensa en un original de tinta muy contrastado, y aun así hay que limpiar nodos. En esta materia, si necesitas la foto, déjala en PNG. Si necesitas el signo, dibújalo con pocos nodos.
Decisión de esta lección. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento.
El aula taller del IES Duero, en Aranda de Duero, quiere enseñar el proyecto del curso sin depender de una plataforma. El encargo del bloque B es el entorno donde vive ese proyecto: la imagen de la marca, el espacio donde se cuenta y las condiciones con las que se comparte. No es un dibujo suelto ni una cuenta en una red social. Es una carpeta que otra persona del centro puede abrir.
La marca no es el escudo oficial del instituto. Es el signo del proyecto, con iniciales reconocibles, tres variantes y un original en vector. La foto del patio, si hace falta, va aparte, en PNG, y no se calca para «hacerla logo». El plano de mesas y la lámpara de la maqueta son piezas del espacio, no adornos del cartel. El paseo es una lista de cámaras para quien no pueda entrar al aula ese día. La ficha de micromecenazgo, si se escribe, no cobra dinero: deja por escrito la meta, las recompensas y qué pasa si no se llega. La licencia dice qué puede hacer el siguiente grupo con los archivos. El portfolio reúne las tres piezas con una nota de proceso en cada carpeta.
Cada lección decide una capa y deja quietas las demás. Si en la lección del logo cambias el plano, o en la de la licencia redibujas el signo, mezclas entregas y no se sabe qué estás demostrando. El criterio 2.1 mira el logotipo en 2D. El 2.2 mira el espacio en 3D, aunque aquí el 3D sea una extrusión y una planta, no un parque de atracciones. El 2.3 mira el micromecenazgo como proceso, no como una campaña colgada de verdad. Licencias y EPA no son un criterio aparte en el resumen del curso, pero sin ellos el portfolio miente: o no se puede reutilizar, o no se encuentra.
Materiales que no entran: bancos de iconos «gratis» sin leer la licencia, el escudo del centro calcado, música, caras de compañeros, y cualquier botón que prometa publicar o cobrar. Lo que sí entra es tu trazo, tu planta, tu ficha y tu atribución. Si una pieza está en borrador, se dice. Un portfolio honesto con una planta incompleta vale más que una carpeta de PNG ajenos renombrados.
La carpeta, al final del bloque, se llama epa/. Dentro, index.html enlaza tres notas. Esas notas no repiten el archivo: dicen qué decidiste (vector y no foto, todo o nada y no una meta absurda, CC BY y no un «libre» sin apellido). Quien lea solo el index tiene que entender el proyecto. Quien abra la subcarpeta tiene que poder seguir el proceso. Las dos lecturas se escriben. No se espera a tener el dibujo perfecto para crear la carpeta: la carpeta existe desde esta lección y se va llenando.
Píxel. Celda de color. La rejilla de píxeles es el mapa de bits.
Resolución. Cantidad de píxeles, no un adjetivo. Los ppp solo importan al imprimir.
JPEG. Compresión con pérdida. Aparecen bloques al abusar.
PNG. Compresión sin pérdida. Sirve para captura, icono raster y transparencia.
Vector. Instrucciones de trazo y relleno. Se recalcula al cambiar de tamaño.
SVG. Formato vectorial en texto. Se puede leer y editar.
Calco. Conversión automática de bitmap a nodos. En una foto, suele ensuciar.
Original. El archivo editable. En un logo, el SVG, no el PNG de prueba.
El logo del proyecto está en PNG de 180 px y hay que ponerlo en una lona de dos metros. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento.
La foto del patio se quiere «pasar a vector» con un calco automático para que pese menos. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento.
Una captura del escritorio se guarda como SVG porque «el SVG es mejor». En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento.
En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento.
Situación. El logo del proyecto está en PNG de 180 px y hay que ponerlo en una lona de dos metros.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. La foto del patio se quiere «pasar a vector» con un calco automático para que pese menos.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. Una captura del escritorio se guarda como SVG porque «el SVG es mejor».
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. El plano de aulas se exportó a JPEG y al hacer zoom las cotas se parten en bloques.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. Un icono de 32 px se amplía a 512 estirando el PNG para el favicon del portfolio.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. El cartel mezcla foto y título, y el título va quemado dentro del JPEG.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. Alguien cambia la extensión de foto.jpg a foto.svg y espera nodos editables.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. Para impresión se escribe 300 ppp en un archivo de 400 px de ancho y se da por nítido.
400 ÷ 300 = 4 ÷ 3 = 1,333… pulgadas → 1,33 pulgadas
2,54 × 4 = 10,16
10,16 ÷ 3 = 3,3866… → 3,39 cm.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. El mismo signo debe ir en la web y en una fotocopia en negro: solo existe la versión a color en PNG.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. Una textura de madera escaneada se redibuja con diez mil nodos para «tenerla en vector».
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. El archivo se llama logo-final.png y nadie guarda el SVG con el que se hizo.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. Dos versiones, una de 72 ppp y otra de 300 ppp, tienen los mismos píxeles y se discuten como si fueran distintas.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. Hay que enseñar el patio lloviendo y también el signo de la marca: se meten los dos en un solo SVG.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. Un compañero traza el escudo oficial del centro encima de una foto para «tener el logo del instituto».
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. La entrega es un ZIP con solo JPEG porque «el vector no lo abre el móvil».
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. Al ampliar el bitmap en el laboratorio a ×8 se ve la rejilla y se culpa al navegador.
Criterio. En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento. Se deja constancia en la nota de proceso de la carpeta de esta pieza, con una frase que otra persona del IES pueda aplicar sin preguntarte. Si la salida consiste en cambiar la extensión, estirar, dar por publicado o escribir «libre», la ficha vuelve atrás.
Comprobación. Ábrelo con file:// o míralo en el laboratorio de esta misma página. Si solo se entiende en tu sesión, con un blob o con una cuenta, no está entregado. El bloque B se archiva en local.
Situación. El plano de aulas se exportó a JPEG y al hacer zoom las cotas se parten en bloques.
No conviene. Resolverlo cambiando el nombre del archivo o dejando la duda.
Decisión. Aplicar el criterio de la lección y escribirlo en la nota.
Por qué: Un plano de aulas con cotas es línea, no fotografía. El JPEG parte esas líneas en bloques en cuanto haces zoom, porque ya no guarda vectores sino una rejilla comprimida. Para cotas que se van a ampliar, el archivo tiene que seguir siendo vectorial.
Situación. Un icono de 32 px se amplía a 512 estirando el PNG para el favicon del portfolio.
No conviene. Resolverlo cambiando el nombre del archivo o dejando la duda.
Decisión. Aplicar el criterio de la lección y escribirlo en la nota.
Por qué: Estirar un PNG de 32 px hasta 512 no inventa detalle: agranda los cuadrados que ya había. El favicon del portfolio se verá pixelado justo donde la marca debería estar nítida. Si el icono tiene que crecer, se redibuja en vector y se exporta al tamaño nuevo.
Situación. El cartel mezcla foto y título, y el título va quemado dentro del JPEG.
No conviene. Resolverlo cambiando el nombre del archivo o dejando la duda.
Decisión. Aplicar el criterio de la lección y escribirlo en la nota.
Por qué: Quemar el título dentro del JPEG ata las letras a la foto. Corregir una falta obliga a reexportar toda la imagen, y el texto deja de ser seleccionable. La foto puede ser mapa de bits; el título tiene que vivir aparte, en vector o en el HTML.
Situación. Alguien cambia la extensión de foto.jpg a foto.svg y espera nodos editables.
No conviene. Resolverlo cambiando el nombre del archivo o dejando la duda.
Decisión. Aplicar el criterio de la lección y escribirlo en la nota.
Por qué: Cambiar la extensión de foto.jpg a foto.svg no crea nodos. El archivo sigue siendo la misma rejilla, con otro nombre, y un editor de vectores no tiene curva que mover. El formato se elige al exportar, no al renombrar.
| Criterio | Aún no | En proceso | Conseguido | Notable |
|---|---|---|---|---|
| Concepto | Se nombra mal | Se duda | Se usa el término de la lección | Se explica con un caso del aula |
| Laboratorio | No se abre | Se abre y no se decide | Hay un resultado en la página | Otra persona puede repetirlo |
| Nota | No hay | Repite el nombre del archivo | Dice la decisión | Cabe en la carpeta epa/ |
| Límites | Se finge publicación o hardware | Se duda | Se dice que es local | No hay datos de pago ni obra ajena sin licencia |
| Original | Solo una captura opaca | Falta variante o leyenda | Se guarda lo editable | El PNG, si existe, es prueba y está nombrado |
En esta lección la nota de proceso dice bitmap o vector, el formato (PNG, JPEG o SVG) y el tamaño al que se va a ver. Si no puedes escribir esas tres cosas, todavía no hay archivo, hay un intento.
Responde en el cuaderno y abre después. El párrafo «Por qué» es lo que se estudia.
Respuesta. No. Es un mapa de bits usado por encima de su tamaño.
Por qué: Si al ampliar el logo se ven cuadrados, el fallo no es del monitor: el monitor enseña los píxeles que hay. Un mapa de bits usado por encima de su tamaño no gana resolución. El signo que debe crecer se guarda en vector, no se estira.
Respuesta. Porque cambiar la extensión no cambia el tipo de información.
Por qué: El SVG de una foto calcada o es un envoltorio de la misma rejilla o es una mancha de nodos. La foto sigue siendo bitmap. El formato se elige por el encargo, no por el prestigio de las siglas.
Respuesta. No. Si no hay píxeles, no hay detalle que los puntos por pulgada puedan colocar.
Por qué: Subir los puntos por pulgada no arregla un archivo pequeño. 300 ppp sobre pocos píxeles de ancho son pocos centímetros nítidos, y el número en los metadatos no inventa información. En el caso de 400 px a 300 ppp:
400 ÷ 300 = 4 ÷ 3 = 1,333… pulgadas → 1,33 pulgadas
2,54 × 4 = 10,16
10,16 ÷ 3 = 3,3866… → 3,39 cm. Se exporta al tamaño de verdad o se rehace el original.
En la vida real
Editas y dibujas aquí. No hay salto a otro módulo. La misma herramienta está en l13-imagen-bitmap-vs-vectorial.html y, debajo, en un marco.
Elige tres encargos reales o verosímiles (foto, signo, plano). Para cada uno escribe bitmap o vector, el formato y por qué. Amplía en el laboratorio el círculo hasta ver la rejilla y pega en el cuaderno qué ha pasado. Una buena entrega no llama SVG a un JPEG renombrado.
reto_id: bach1-tic-L13