Una imatge gran comprimida continua sent gran
Un espai petit no redueix el fitxer descarregat. Si tots els visitants reben la mateixa foto completa, un mòbil pot descarregar píxels que el disseny no fa servir. La compressió i la selecció adaptativa resolen parts diferents del problema.
El flux per a webs explica la preparació, i la guia de lliurament d’imatges la relaciona amb els diagnòstics de rendiment. Aquí seguim una foto fins a la tria real del navegador, sense prendre una puntuació com a resultat.
Prepara les variants i observa el navegador
Vam crear còpies proporcionals en un editor extern abans de comprimir; Bitinz no les va redimensionar. El 2026-10-29 cada còpia es va processar localment amb Equilibrat. Dimensions, bytes i suma identifiquen la variant usada al navegador.
La pàgina local oferia variants amb srcset i una regla sizes adequada. Vam registrar amplada de finestra, densitat i recurs triat. Es mesura el pes de la imatge, no una càrrega completa ni una xarxa mòbil simulada. La política editorial descriu les proves.
Els fitxers preparats entre els quals triar
Compara les mides aquí i consulta el registre del navegador enllaçat a les fonts. Només pot triar entre els fitxers realment oferts per la pàgina.
| Imatge | Píxels | Sortida | Nivell | Abans | Després | Estalvi |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | Equilibrat | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | Equilibrat | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | Equilibrat | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | Equilibrat | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB equival a 1000 bytes.
Què ha descarregat realment el navegador
| Finestra (CSS px) | Densitat de píxels | Amplada visible (CSS px) | Amplada triada (px) | Dades de la imatge |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
Cada fila ha fet servir un context nou del navegador amb la memòria cau desactivada. El cas més ample d’alta densitat ha triat la variant més gran perquè hi havia un salt considerable entre les mides ofertes. Val la pena provar una variant intermèdia; el navegador només pot triar fitxers presents a la llista.
Revisa la imatge triada a una escala útil
Detall de la foto original
Detall de la foto comprimida
Revisa la foto en una pantalla petita i en una d’alta densitat. La variant més petita no és millor si es veu borrosa. Tampoc es justifica una de gran només per un percentatge de compressió impressionant.
El registre és una instantània de l’entorn indicat. La memòria cau i les decisions del navegador poden afectar visites posteriors. Per repetir la prova, obre un context nou i inspecciona el fitxer demanat en lloc de deduir-lo de les dimensions visibles.
Connecta preparació i lliurament
Passa les còpies preparades pel compressor d’imatges i deixa que el web o gestor de continguts ofereixi variants adequades. Si el marcatge envia totes les pantalles a un fitxer gran, comprimir no canvia aquesta decisió.
Mantén sizes d’acord amb el disseny CSS. El navegador combina aquest indici amb les variants disponibles i la densitat de pantalla; el nom del fitxer no revela la teva intenció. Comprova el recurs triat després de canviar el disseny.
En un flux repetit, l’API per a desenvolupadors pot comprimir els fitxers preparats durant la publicació. Redimensionar continua sent un pas previ independent. La guia de qualitat explica com comparar els detalls abans de substituir una imatge.
Comprova un espai d’imatge de la pàgina
- Mesura l’espai i tria les amplades proporcionals necessàries.
- Prepara i comprimeix les còpies conservant l’original editable.
- Ofereix les variants amb una regla
sizesque coincideixi amb el disseny. - Revisa el recurs triat i la foto visible en diverses pantalles.
Preguntes freqüents
- Reduir l’amplada visible redueix la descàrrega?
- L’amplada CSS canvia el disseny, no els bytes d’un fitxer. Ofereix variants adequades i comprova quina tria el navegador.
- Per què un mòbil d’alta densitat tria una imatge més ampla?
- Una pantalla d’alta densitat pot fer servir més píxels en el mateix espai visible. Hi influeixen les dimensions de les variants i l’indici de mida de la pàgina.
- L’experiment mesura la velocitat de la pàgina?
- Registra compressió i selecció d’imatges. La càrrega completa també depèn dels altres recursos, de la xarxa i del renderitzat.