Optimitzar imatges per a web: mida, format i qualitat
Descobriu com optimitzar les fotografies per al vostre lloc web per millorar la velocitat de carrega i l'experiencia d'usuari sense perdre qualitat d'imatge.
Prova la nostra eina gratuïta
No cal registrar-se, processament 100% local.
La velocitat de carrega d'un lloc web esta directament relacionada amb la mida de les imatges que s'hi utilitzen. Les imatges sense optimitzar poden alentir significativament el vostre lloc.
L'optimitzacio correcta de les imatges inclou triar la mida, el format i el grau de compressio adequats per aconseguir un equilibri entre qualitat i rendiment.
En aquesta guia aprendreu a triar els parametres correctes per als diferents tipus d'imatges del vostre lloc web.
Taula de continguts
Per que l'optimitzacio d'imatges es important
Les imatges representen de mitjana entre el 60 i el 65 per cent de la mida total de les pagines web.
Google te en compte la velocitat de carrega com a factor de classificacio en els resultats de cerca.
Les imatges mes petites redueixen el consum d'amplada de banda i els costos d'allotjament.
Els llocs que carreguen rapidament tenen una taxa de rebot inferior i una taxa de conversio mes alta.
Mides optimes per a diferents elements
Imatges de capcalera: 1920x1080 pixels per a banners d'amplada completa, 1440x600 per a mes compactes.
Imatges en articles: Una amplada de 800 a 1200 pixels es suficient per a la majoria de dissenys de blocs.
Miniatures de productes: 400x400 o 600x600 pixels per a fotografies de productes quadrades.
Imatges de fons: 1920x1080 pixels amb bona compressio per reduir la mida.
Triar el format de fitxer correcte
JPEG es ideal per a fotografies amb molts colors i gradients amb bona compressio.
PNG es millor per a imatges amb transparencia, text i vores nitides.
WebP ofereix una compressio del 25 al 34 per cent millor que JPEG i PNG amb qualitat similar.
SVG es perfecte per a icones i grafics vectorials, ja que s'escala sense perdre qualitat.
Eines per mesurar el rendiment
Google PageSpeed Insights analitza les vostres imatges i dona recomanacions concretes.
GTmetrix proporciona informes detallats sobre la mida de les imatges i el temps de carrega.
Chrome DevTools permet monitoritzar la mida dels fitxers en temps real.
Lighthouse a Chrome mesura el rendiment global i dona una puntuacio d'optimitzacio.
Eines recomanades
Redimensiona les teves imatges en píxels o percentatge. Manté les proporcions o ...
Com fer-ho en 3 passos
Determineu la funcio de la imatge i la seva ubicacio a la pagina.
Trieu les mides en pixels adequades d'acord amb el disseny i l'amplada de la columna.
Seleccioneu JPEG, PNG o WebP en funcio del tipus d'imatge.
Comprimiu la imatge fins a la mida minima sense perdua de qualitat visible.
Proveu la velocitat de la pagina despres d'afegir les imatges optimitzades.
Consells professionals
- Conserva l’original.
- Prova diversos nivells de qualitat.
- Utilitza WebP quan sigui possible.
- Tria un nom de fitxer descriptiu.
Errors comuns a evitar
- ✗Penjar imatges amb mides molt mes grans que les que es mostren realment a la pantalla.
- ✗Utilitzar PNG per a fotografies en lloc de JPEG, cosa que augmenta la mida del fitxer.
- ✗Descuidar el carregament diferit per a imatges fora de la zona visible.
- ✗Manca de text alternatiu per a les imatges, que perjudica el SEO i l'accessibilitat.
Preguntes freqüents
A punt per provar-ho?
La nostra eina és gratuïta, no requereix registre i respecta la teva privadesa.
Fes servir Redimensionner imageArticles relacionats
Descobreix les nostres guies i tutorials per a Redimensionner imageCom canviar la mida de les imatges per a les xarxes socials
Apreniu a canviar la mida de les imatges per a Instagram, Facebook i Twitter amb les dimensions corr...
Relacio amplada-alcada en imatges digitals: guia completa
Enteneu les relacions amplada-alcada mes comunes com 16:9, 4:3 i 1:1 i apreneu a triar la proporcio ...
Canvi de mida per lots: com processar centenars d'imatges rapidament
Apreneu a canviar la mida de centenars d'imatges alhora amb eines de processament per lots. Estalvie...