Per què les imatges del teu lloc web han d'estar comprimides | Bulk Image Compressor
Si el teu lloc web triga més d’uns pocs segons a carregar, la gent marxa. Això no és una opinió. La pròpia investigació de Google mostra que les taxes de rebot augmenten un 32% quan el temps de càrrega de pàgina passa d’un a tres segons. I les imatges gairebé sempre són la raó més gran per la qual les pàgines carreguen lentament.
La majoria de llocs web serveixen imatges que són molt més grans del que haurien de ser. Una sola imatge hero directa d’una càmera o d’un lloc de fotos d’estoc pot ser fàcilment de 5MB o més. En una connexió de banda ampla decent, aquest fitxer sol triga un parell de segons a carregar. En una connexió mòbil 3G, estàs mirant uns 15 segons només per a una imatge. Ara imagina una pàgina amb cinc o sis imatges com aquesta.
Com de grans són realment les teves imatges?
Aquí tens una comprovació de realitat ràpida. Obre les eines de desenvolupador del teu navegador (F12), ves a la pestanya Network, recarrega la pàgina i filtra per “Img.” Mira les mides. Probablement trobaràs almenys unes quantes imatges de més d’1MB.
Per a referència, aquí tens com són les imatges típiques sense comprimir:
- Una foto de càmera DSLR utilitzada com a bàner hero: 4 a 8MB
- Una foto de producte d’un smartphone: 2 a 5MB
- Una foto d’estoc descarregada a resolució completa: 3 a 10MB
- Una infografia o il·lustració desada com a PNG: 1 a 4MB
Després d’una compressió adequada, aquestes mateixes imatges poden ser de 100KB a 300KB sense pèrdua visible de qualitat. Això és una reducció del 90% o més en la mida del fitxer.
Velocitat de pàgina i Core Web Vitals
Google utilitza els Core Web Vitals com a senyal de posicionament, i les imatges afecten directament dues de les tres mètriques.
Largest Contentful Paint (LCP) mesura quant de temps triga a carregar l’element visible més gran. A la majoria de pàgines, aquest element més gran és una imatge. Si la teva imatge hero és de 5MB, el teu LCP serà terrible. Google considera qualsevol valor superior a 2,5 segons com una puntuació LCP pobra. Les imatges comprimides porten l’LCP per sota d’aquest llindar de manera habitual.
Cumulative Layout Shift (CLS) mesura l’estabilitat visual. Les imatges sense dimensions definides provoquen canvis de layout mentre es carreguen. Això té més a veure amb els atributs HTML que amb la compressió, però les imatges sobredimensionades que carreguen lentament empitjoren el problema perquè la pàgina renderitza contingut al voltant d’un espai reservat que pot no coincidir amb la mida final de la imatge.
Pots comprovar les teves puntuacions actuals amb Google PageSpeed Insights. Executa’l a la teva pàgina d’inici i a unes quantes pàgines internes. Si la teva puntuació de rendiment és per sota de 90, les imatges probablement són una gran part del problema.
La connexió amb el SEO
La velocitat de pàgina és un factor de posicionament confirmat de Google. Ho ha estat des de 2010 per a escriptori i 2018 per a mòbils. La introducció dels Core Web Vitals el 2021 ho va fer encara més directe.
Però l’impacte va més enllà del senyal de velocitat. Les pàgines lentes són rastrejades amb menys freqüència per Googlebot. Google assigna un “pressupost de rastreig” a cada lloc, i si les teves pàgines són lentes, el bot gasta el seu pressupost esperant respostes en lloc d’indexar més del teu contingut. Per a llocs més grans amb centenars o milers de pàgines, això importa molt.
També hi ha un efecte indirecte a través del comportament de l’usuari. Quan la gent rebota de pàgines lentes, Google ho nota. Les taxes de rebot altes i el poc temps a la pàgina envien senyals d’engagement negatius que poden afectar el teu posicionament amb el temps.
Experiència d’usuari i taxes de rebot
La gent és impacient en línia. Un estudi de Portent va trobar que les taxes de conversió baixen una mitjana del 4,42% per cada segon addicional de temps de càrrega. Si el teu lloc de comerç electrònic triga cinc segons a carregar en lloc de dos, podries estar perdent un percentatge significatiu de vendes.
Els usuaris mòbils són encara menys pacients. Més de la meitat de tot el trànsit web prové de dispositius mòbils, i les connexions mòbils solen ser més lentes que les d’escriptori. Les teves imatges han de ser prou petites per carregar ràpidament en un telèfon que utilitzi una xarxa mòbil.
També hi ha el factor de percepció. Un lloc ràpid se sent més professional i fiable. Un lloc lent se sent defectuós, fins i tot si tot es carrega eventualment. Les primeres impressions passen en mil·lisegons.
Els costos d’ample de banda s’acumulen
Si estàs en un allotjament compartit o un pla bàsic, potser no penses en l’ample de banda. Però per a llocs amb trànsit real, l’ample de banda costa diners.
Fem alguns càlculs. Diguem que la teva pàgina mitjana té 3MB d’imatges i reps 100.000 visualitzacions de pàgina al mes. Això són 300GB de dades d’imatge transferides mensualment. Després de la compressió, aquestes mateixes pàgines podrien tenir 400KB d’imatges, reduint la transferència a 40GB. Això és una reducció significativa en costos d’allotjament i factures de CDN.
Per a llocs d’alt trànsit, empreses de mitjans o botigues de comerç electrònic amb grans catàlegs de productes, aquesta diferència pot estalviar centenars o milers de dòlars al mes.
Com comprimir les imatges del teu lloc web per lots
Podries comprimir imatges una per una a Photoshop o GIMP, però si tens dotzenes o centenars d’imatges, això no és pràctic. La compressió per lots és el camí a seguir.
Amb Bulk Image Compressor, pots posar totes les imatges del teu lloc web alhora i comprimir-les juntes. Aquí tens un flux de treball pràctic:
-
Exporta les teves imatges actuals. Si ja són al teu lloc, descarrega-les. Si estàs construint un lloc nou, reuneix totes les imatges que planejis utilitzar.
-
Tria el teu format. Per a fotografies, JPEG o WebP funcionen millor. Per a gràfics amb transparència, utilitza PNG o WebP. Si no estàs segur de quin format triar, consulta la nostra guia de formats d’imatge per al rendiment web.
-
Estableix el teu nivell de qualitat. Per a la majoria d’imatges web, una configuració de qualitat del 75 al 85% et dona un bon equilibri entre mida de fitxer i qualitat visual. Pots baixar per a miniatures o imatges de fons. Per a més detall sobre aquest compromís, consulta el nostre article sobre reduir la mida del fitxer sense perdre qualitat.
-
Comprimeix i descarrega. L’eina processa tot al teu navegador, així que les teves imatges mai surten del teu ordinador. Substitueix els originals al teu servidor per les versions comprimides.
-
Estableix dimensions també. No serveixis una imatge de 4000px d’amplada en un contenidor que només té 800px d’amplada. Redimensiona les teves imatges perquè coincideixin amb la seva mida de visualització abans o durant la compressió. Només això pot reduir dràsticament les mides dels fitxers.
Un exemple ràpid d’abans i després
Aquí tens com es veu la compressió a la pràctica per a un lloc web típic:
| Imatge | Abans | Després | Estalvi |
|---|---|---|---|
| Bàner hero (JPEG) | 4,2MB | 210KB | 95% |
| Foto d’equip (JPEG) | 3,1MB | 185KB | 94% |
| Logotip (PNG) | 890KB | 95KB | 89% |
| Miniatura de blog (JPEG) | 1,8MB | 120KB | 93% |
| Total | 10MB | 610KB | 94% |
Aquesta és la diferència entre una pàgina que carrega en un segon i una que carrega en vuit.
No t’oblidis del contingut nou
Comprimir les teves imatges existents és una solució única, però també necessites un procés per al contingut continu. Cada vegada que tu o el teu equip afegiu una nova entrada de blog, pàgina de producte o pàgina d’aterratge, aquestes imatges s’han de comprimir abans de publicar-se.
Fes de la compressió d’imatges part del teu flux de treball de publicació de contingut. Porta un parell de minuts i l’impacte en la velocitat del teu lloc i el SEO és real i mesurable.
Les imatges del teu lloc web són probablement la millora de rendiment individual més gran que pots fer. Les eines són gratuïtes, el procés és ràpid i els resultats es mostren immediatament a les teves puntuacions de velocitat de pàgina.
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor