Com funciona el redimensionament d'imatges al navegador?
Resposta ràpida: Utiliome descodifica la imatge original a la RAM local del navegador, crea una superfície HTML5 Canvas 2D amb l'amplada i alçada exactes i remostreja la quadrícula de píxels mitjançant interpolació bicúbica accelerada per maquinari, sense pujar res al servidor.
Tota imatge ràster digital està formada per una quadrícula bidimensional fixa de píxels (per exemple, una foto de 12 megapíxels d'un telèfon intel·ligent mesura 4000 × 3000 píxels). Quan insereixes una fotografia de 4000 píxels d'amplada en un contenidor web que només en fa 800 d'amplada, el navegador del visitant ha de descarregar igualment els 12 milions de píxels abans d'encongir-la a la pantalla.
Utiliome remostreja la matriu de píxels real directament a la pestanya del teu navegador:
- Interpolació de passos d'alta qualitat: Amb
imageSmoothingQuality = 'high' al context HTML5 Canvas 2D, els valors dels píxels veïns es promitgen suaument perquè la tipografia reduïda, els retrats i les vores dels productes es mantinguin nítids.
- Bloqueig proporcional de la relació d'aspecte: Quan Lock Ratio està actiu, Utiliome preserva la proporció exacta d'amplada i alçada (
Alçada = Amplada ÷ RelacióAspecte), evitant qualsevol distorsió.
- Reencodificació local instantània: Exporta en el format original o converteix a l'instant a
WebP, JPG o PNG.
Matriu de dimensions estàndard en píxels per a web, xarxes socials i comerç electrònic
Resposta ràpida: Utilitza 1920×1080 px per a banners hero Full HD, 1200×630 px per a previsualitzacions d'enllaços Open Graph, 1080×1080 px per a publicacions quadrades, 1080×1350 px per a feeds verticals i 2000×2000 px per a catàlegs de productes ampliables.
Ajustar les dimensions de la imatge al contenidor exacte de visualització evita desplaçaments de disseny i estalvia ample de banda innecessari. Consulta la taula de referència següent quan redimensionis continguts per a plataformes web i xarxes socials:
| Cas d'ús / Plataforma |
Dimensions de destí (px) |
Relació d'aspecte |
Format recomanat |
Pes típic del fitxer |
| Banner web Full HD / Miniatura de YouTube |
1920 × 1080 px |
16:9 |
WebP o JPG |
150 KB – 320 KB |
| Open Graph (OG) / Targeta destacada de blog |
1200 × 630 px |
1.91:1 |
WebP o JPG |
80 KB – 160 KB |
| Publicació quadrada d'Instagram / LinkedIn |
1080 × 1080 px |
1:1 |
JPG o PNG |
120 KB – 250 KB |
| Feed vertical d'Instagram / Facebook |
1080 × 1350 px |
4:5 |
JPG |
140 KB – 280 KB |
| Portada d'Històries, Reels i TikTok |
1080 × 1920 px |
9:16 |
JPG o WebP |
180 KB – 350 KB |
| Zoom de producte per a Amazon / Shopify |
2000 × 2000 px |
1:1 |
JPG (fons blanc) |
250 KB – 450 KB |
Necessites canviar la forma de la teva foto (per exemple, convertir un paisatge 16:9 en un quadrat 1:1 sense deformar el motiu)? Enquadra-la primer amb la nostra eina Retallar imatge abans de canviar-ne la mida.
Reducció vs. ampliació d'imatges ràster: com evitar la pixelació
Resposta ràpida: Reduir la mida (disminuir l'amplada i l'alçada en píxels) consolida les dades existents i manté les vores nítides alhora que redueix el pes fins a un 80%. Ampliar una imatge ràster petita estira els píxels en una quadrícula més gran; fes servir un escalador per IA si necessites ampliar imatges de baixa resolució.
Comprendre com funciona la interpolació de píxels t'ajudarà a aconseguir el resultat més nítid possible:
- Reducció (p. ex.,
4000×3000 → 1200×900 o 50%): Reduir les dimensions al 50% disminueix el nombre total de píxels en un 75% (de 12 megapíxels a 3 megapíxels), baixant dràsticament el pes en bytes i mantenint un detall perfecte.
- Ampliació (p. ex.,
300×200 → 1200×800): El remostratge estàndard en canvas interpola entre píxels existents, la qual cosa pot suavitzar les vores definides si s'amplia més enllà del 120%. Si has de reconstruir el detall d'una foto petita o borrosa, utilitza el nostre Escalador d'imatges amb IA.
Vols mantenir exactament les dimensions actuals en píxels i reduir només el pes del fitxer en KB o MB? Utilitza la nostra eina dedicada Comprimir imatge.
Redimensionament per lots: dimensions per pestanya vs. sincronització global
Resposta ràpida: Utiliome aïlla els ajustos de mida per pestanya perquè puguis definir dimensions personalitzades per a cada imatge, o fer clic a «Aplica les dimensions a totes les imatges» per escalar carpetes de productes proporcionalment en un sol clic.
En preparar recursos per al llançament d'un lloc web o un catàleg, sovint es combinen banners horitzontals, retrats verticals i miniatures quadrades. L'espai multipestanya d'Utiliome admet fluxos de treball individuals i massius:
- Ajustos encapsulats per pestanya: Cada pestanya d'imatge recorda el seu mode de redimensionament (
Per píxels vs. Per percentatge), l'amplada/alçada de destí, l'estat del bloqueig de proporció i el format de sortida.
- Sincronització global proporcional: Fes clic a Apply dimensions to all images en mode percentatge (p. ex.,
50%) o en mode d'amplada amb proporció bloquejada (p. ex., 1200 px d'amplada) i Utiliome calcularà automàticament l'alçada proporcional de cada foto del lot.
Necessites comprovar els DPI exactes, els megapíxels o la relació d'aspecte abans o després d'escalar? Inspecciona'ls amb el nostre Inspector de mida d'imatge, o converteix formats en lot amb Convertir imatge.
