Billeder er et af de vigtigste elementer i et anstændigt websted. De tager fat i besøgernes opmærksomhed, gør dit indhold mere delvist og tvinger dine brugere til at gribe ind (f.eks. Købe dine produkter).

Hvis du tilføjer billeder med høj opløsning eller dem med store filstørrelser, kan det gøre din hjemmeside langsom og levere dårlig brugeroplevelse til slutbrugeren. Der er virkelig ingen undskyldning for at levere en dårlig brugeroplevelse med den overflod af værktøjer derude, der kan hjælpe dig med at komprimere dine billeder uden mærkbart tab i kvalitet og endda automatisere processen for dig.

I denne artikel vil jeg vise dig mange måder at optimere billeder til brug på internettet og mere specifikt på WordPress-websteder.

Vælg det rigtige filformat

JPEG og PNG er to af de mest populære billedfilformater på internettet. JPEG er et komprimeret format, der typisk bruges til billeder, der indeholder mange farver, mens PNG'er er meget bedre for billeder med tekst, illustrationer, logoer, skærmbilleder og gennemsigtige billeder. Et andet fælles format er den GIF, der passer bedst til billeder med få farver eller billeder med store områder af samme farve. GIF bruges mest til animerede billeder på nettet i dag.

De fleste billedredigeringssoftware giver dig mulighed for at gemme din fil i mange forskellige formater. Hvis du vælger det rigtige format, sikrer du, at du får det skarpeste billede, som skal forbedre brugeroplevelsen på dit websted.

Brug den rigtige størrelse og opløsning

Du skal være forsigtig, når du tilføjer billeder til dit websted. Det anses for den bedste praksis at gemme dine billeder i samme bredde og højde, at den vil blive vist på hjemmesiden og i den mindste filstørrelse som muligt uden at miste kvaliteten.

Komprimere dine billeder før upload

Der er mange værktøjer derude, der hjælper dig med at komprimere dine billeder, før du uploader dem til din server. Photoshop har f.eks. En praktisk "Gem til Web & enheder" -funktion, der giver dig mulighed for at vælge indstillinger for format og kvalitet. Du vil også se filstørrelsen for dit billede, når du anvender en bestemt indstilling. Andre billedbehandlingsværktøjer som GIMP tilbyder lignende muligheder.

Der findes også online komprimeringsværktøjer, som Picresize, Kraken.io og TinyPNG, hvor du kan uploade dine højopløsningsbilleder, optimere dem og downloade det komprimerede format til brug på internettet.

Komprimere billeder efter upload

Der er flere plugins til dette formål, og en af ​​de mere populære er WP Smush, som hjælper med at optimere JPEG, PNG eller GIF formater enkeltvis eller i bulk ved hjælp af dedikerede servere. Det fjerner blot metadata og ubrugte farver fra filerne for at sænke filstørrelsen. Med den gratis version er du begrænset til billeder 1 MB og derunder, men du kan fjerne denne begrænsning ved at opgradere til Pro-versionen, der tillader op til 5 MB.

Et andet stort plugin med lignende funktioner er EWWW Image Optimizer, som kan hjælpe dig med at konvertere dine billeder til det format, der producerer den lavest mulige filstørrelse.

Der er andre tilgængelige på WordPress-depotet, så tag det fri at udforske. Det er de to, jeg tidligere har brugt, og de arbejder begge fint, så de skal være gode nok til dig også.

Tag dine billeder korrekt

Udover at ændre størrelsen på dine billeder, er en god måde at give en god oplevelse på dit websted ved at mærke dine billeder korrekt. Dette betyder altid at bruge attributten " alt ", hvis dit billede ikke kunne læses eller til skærmlæsere, så dine besøgende får en tekstbaseret beskrivelse af billedet. Det hjælper også søgemaskiner indeksere billeder bedre på dit websted og kan hente dig en betydelig mængde søgetrafik.

Tilføjelse af billedtekster, hvis det er nødvendigt, er en anden god måde at hjælpe dine website besøgende med at forstå billedet bedre. Serring ordentlige beskrivende titelkoder og billedfilnavne hjælper på samme måde. Så i stedet for at gemme dine billeder som " FXSCSUYE.jpg ", brug en beskrivende titel og navn med søgeord, der er relevante for dit emne og dit websted. Dette er også godt fra et SEO-synspunkt.

Lazy-Loading

Lazy Loading er en teknik, som mange websites bruger til at spare båndbredde ved kun at indlæse billeder, når en bruger ruller til billedets synsfelt. De første få billeder vil blive indlæst med det samme, men andre vil vente, indtil brugeren er i nærheden af ​​billedet inden indlæsningen. Tilføjelse af denne funktion til dit websted vil spare båndbredde for dig og din bruger og forbedre hastigheden på dine websider. BJ Lazy Load er et godt plugin for at tilføje Lazy Loading til din WordPress hjemmeside.

Brug et Content Delivary Network

Brug af et Content Delivery Network (CDN) reducerer belastningen på din server betydeligt og øger ydeevnen på dit websted. En CDN vil simpelthen tjene ressourcer fra serveren nærmest placeringen af ​​den bruger, der anmoder om det. Hvis en besøgende fra Beijing for eksempel anmoder om et billede, og CDN'en du bruger, har en server i Seoul og Sydney, vil billedet blive serveret fra serveren i Seoul.

MaxCDN er en højt ratede CDN, som du kan prøve, og der er andre som CloudFlare, CDN.net og meget mere.

Bundlinie

Optimering af billeder til brug på internettet er en af ​​de største måder at forbedre dit websites sideindlæsningstid og generelle brugeroplevelse. Hvis du har andre optimeringsteknikker, du gerne vil dele, så gør du det i kommentarerne nedenfor.