Billedoptimering for at forbedre webstedshastighed og promovering af websteder - Semalt Expert

Billeder er en af de vigtigste komponenter på nettet, selvfølgelig efter tekst. Et websted uden billeder vil normalt være kedeligt og mindre motiverende for surfere end et websted, der har billeder.

Der er også en hel del områder, hvor brugen af billeder er obligatorisk og endda nødvendig for at retfærdiggøre webstedet.

For eksempel:

Online handelssider
Porteføljesider og visning af værker
Billedsider, hvor fotos er "produktet" - for eksempel brudekjoler, fotografering af begivenheder osv.
Sociale netværk - Flere og flere undersøgelser peger på det faktum, at indlæg med fotos får meget flere kommentarer og delinger med en betydelig procentdel sammenlignet med indlæg og status uden fotos

Googles billedfremme: brug af billeder korrekt

Har du investeret og købt fotos fra fotosites/billedopbevaringssteder, eller har du endda forstørret og taget billeder selv? Du bør også maksimere dem til SEO-formål!

Google Image Promotion er en af de bedste måder at øge webstrafikken på i visse områder - især dem, der fokuserer på den visuelle side.

På trods af ovenstående kan forkert brug af billeder gøre mere skade end gavn for webstedet og endda væsentligt forringe salgsfremstød. Når vi taler om brugen af billeder i sammenhæng med organisk forfremmelse, det er vigtigt at huske nogle få regler også, forkert brug af billeder kan forringe webstedets hastighed betydeligt og kan derfor have en betydelig indflydelse på reklamen.

Grundlæggende billedoptimeringsregler:

1. Vægt og dimensioner af billedet

En af de vigtige parametre til promovering af billeder online - er billedets vægt.

På den ene side vil vi gerne bruge billeder i høj kvalitet, men på den anden side kommer det ikke på bekostning af webstedshastighed, brugeroplevelse og promovering. Anbefalingen er altid at "optimere" (fra ordet optimering) billederne til det maksimale mulige uden væsentligt at forringe kvaliteten. For at gøre dette skal du følge alle følgende regler:

Brug af et format, der passer til forskellige situationer (jpg, png, gif med mere) - fulde detaljer om de forskellige typer formater nedenfor.
Vigtigt - Indstilling af dimensionerne for hvert billede på webstedet - Undgå at vise et billede, der er mindre end den faktiske (fysiske) størrelse på billedet så meget som muligt for ikke at spilde unødvendige ressourcer. Jo større og mere mobil siden er, jo større er betydningen.
Sikring af responsiv matchning - Hvis du arbejder med WordPress og en moderne skabelon, er chancerne for, at du har lukket dette hjørne. Men hvis ikke, er det vigtigt altid at sikre, at billederne på webstedet, især billeder, der er inde i indlæg, er lydhøre og vises godt på mobile enheder, tablets osv.
Maksimal komprimering af billedets vægt uden væsentlig forringelse af kvaliteten (udvidelse af værktøjer og metoder til at gøre det - nedenfor).

Anbefalet vægt til fotos

Næsten ethvert billede kan komprimeres i en eller anden grad, så det tilrådes altid kun at bruge de dimensioner, der virkelig er nødvendige, og som fysisk vises på webstedet, og reducere vægten af billederne så meget som muligt. Dette gælder for ethvert websted. Men især for websteder med mange billeder. Der er ingen regel, der er sand i alle tilfælde, men det tilrådes at sikre, at billedvægten ikke overstiger 70-80K, medmindre det er et galleri/skyderbillede af særlig betydning.

2. Vælg et passende navn til billedet

I en Google-søgning efter billeder tages der flere parametre i betragtning for at vise det billede, der er relevant for forespørgslen. En af dem er filnavnet. Det anbefales at bruge endnu et sekund og give billedet et navn, der beskriver, hvad du ser på billedet. Det er vigtigt at holde et filnavn på engelsk og bruge mellemlinjer og ikke mellemrum. Årsagen er, at Google klarer sig bedre med mellemstreg.

Eksempler på et dårligt navn på et billede:

DSC2387.jpg

Site promoter.png

Eksempel på et godt navn til et billede:

Søgemaskine-optimizer.jpg

For de af jer, der undrer sig over - ja, Google ved også, hvordan man skal håndtere engelske billednavne til andre sprog. Da den ved, hvordan man oversætter søgestrenge og fremhæver oversatte ord i søgeresultaterne.

3. ALT til billede

Alt tag, som er en forkortelse af alternativ, er en parameter, der sigter mod at beskrive billedet. Alt-tagget er defineret i ledelsessystemet/HTML-koden for hvert billede individuelt, og dets oprindelige funktion er at betjene blinde og handicappede, der bruger speciel software, der scanner disse tags og læser, hvad der er skrevet.

Teknisk set i koden ser det sådan ud:

<imgsrc="tree.jpg" alt="tree">

Ud over tagets betydning med hensyn til tilgængelighed på hjemmesiden har det også betydning for søgemaskiner. Alt-tagget hjælper søgemaskinerne med at forstå, hvad emnet på billedet er (sammen med andre ting som filnavnet, konteksten på den side, det er på osv.), Og det påvirker naturligvis også billedsøgningen på Google.

Alt-tag er også en del af on-side optimering til alt. Når der er et eksternt link, der kommer ud af billedet, fungerer alt-tagget som en slags tekstanker ("ankertekst") for billedet.

Hvordan kontrollerer jeg, om et billede har et ALT-mærke?

Der er flere måder:

Hele vejen - klik på billedet med musen -> højreklik -> kontroller et element (ordlyden varierer i forskellige browsere).
Vi vil gerne kigge efter tagget i kommandoen <img> som illustreret tidligere.
Brug et plugin kaldet Web Developer (fantastisk til mange andre opgaver). Udvidelsen giver os mulighed for med et klik på en knap at vise alle alt-tags, som billeder har på en bestemt side.

Skrigende frø - Brug en frø, der er egnet, når vi vil udføre en grundig scanning af billeder på webstedet.

Processen er at indtaste en URL til scanning og derefter klikke på fanen Billeder.

Der vil vi se listen over billeder på webstedet, som kan sorteres efter flere parametre:

Billeder, der vejer mere end 100 kb
Billeder uden ALT-tags
Billeder med ALT-tags, der indeholder mere end 100 tegn (og du bør sandsynligvis forkorte dem en smule)

Der er selvfølgelig flere måder og flere plugins af forskellige slags, men det ser ud til, at jeg har dækket emnet her med hensyn til et punktbehov pr. Side og en gennemgribende gennemgang af webstedet.

Google billedfremme - tip til optimering af ALT-tags

Du bør ikke tvinge nøgleord, men prøv at beskrive, hvad du ser på billedet.

Hvis det er muligt at kombinere billedbeskrivelse + relevante nøgleord for at skille sig ud naturligt - hvad godt.
Ingen grund til at overdrive beskrivelsen, et 2-5-ords alt-tag er mere end nok.
Det anbefales, at alt-tagget og titelmærket for billedet ikke er identiske.
For handelswebsteder - hvis produktet har et modelnummer, anbefales det at bruge det i alt-tagget (vises i Googles billedsøgninger).

Der er ikke behov for at bruge alts til baggrunde/dekorative billeder - selv det anbefales ikke at gøre det, så Google ikke har mistanke om, at du prøver at overoptimere.

4. Titelmærket for et billede

Billedtekster eller billedtekster er en slags værktøjstip, der kan ses ved at flytte musen hen over et billede. Mange mennesker forveksler dem med ALT-tags.

Billedtitler er en anden indikation af billedets relevans og emne, der kan hjælpe Google med at forstå, hvad billedet taler om og forbedre dets billedsøgningsrangliste. I modsætning til ALT-mærket vil et titelskilt normalt være mere beskrivende og lidt længere, og dets formål er at beskrive for surferen, hvad der ses i billedet og/eller hvad der kommer efter at have klikket på billedet. Nyhedswebsteder bruger hyppigt dette tag.

Sådan ser det ud i koden:

5. Billedtyper og filtypenavne

Der er flere almindelige formater til brug af billeder online. Jeg vil kort uddybe hver af dem:

JPEG/JPG - Det ældste og sandsynligvis mest almindelige format til billeder på nettet. Fordelen ved JPG-formatet er evnen til at vise billeder af relativt høj kvalitet og lav vægt. JPG-billeder understøtter ikke opacitet.
GIF - GIF-format har også været med os i nogen tid, startende fra de dage, hvor der stadig var disketter. Gifs understøtter kun 256 farver, så de har et billedformat af mindre kvalitet og er primært beregnet til brug som ikoner eller dekorationer af forskellige slags. GIP-formatet understøtter også animation, og endda Facebook er for nylig begyndt at understøtte dette format i feedet.

Nederste linje - gifs er ikke beregnet til visning af billeder, især når det kommer til billedkvalitet, men til enklere ikoner, animationer og elementer.

PNG - Dette er det (relativt) nye format i flokken. De største fordele ved PNG-filer - højere kvalitet sammenlignet med JPG og GIF og understøttelse af gennemsigtighed. PNG-filer er opdelt i 2 formater - PNG24, som er af bedre kvalitet (og billedets vægt i overensstemmelse hermed) og PNG8, som er den mest økonomiske af dem alle.

Der er mange andre billedformater tilgængelige, men de er mindre relevante til brug på websteder.

Tip - For dem, der bruger Photoshop, anbefaler jeg altid at sammenligne billedvægte ved hjælp af Gem til web og enheder mellem de forskellige formater (der er en forhåndsvisning af billedets vægt, før filen gemmes).

Tommelfingerregler for valg af billedformater

I de fleste tilfælde vil JPG-formatet gøre jobbet. JPG-billeder giver mulighed for høj kvalitet og lav filvægt.
Brug ikke GIF'er i store filer, der indeholder mange detaljer - filens vægt vil være stor. Formatet er ikke designet til dette og er mere egnet til brug med små og enkle elementer.
Hvis gennemsigtighed spiller en vigtig rolle - brug PNG-formatet. Det tilrådes altid at sammenligne PNG24 og PNG8 for at reducere vægten af billederne til det mindst mulige.

6. Korrekt brug af miniaturer

Miniaturer (forhåndsvisning) er en vigtig og endda kritisk komponent på nogle websteder - især galleribaserede websteder og handelswebsteder. Miniaturer ("Miniaturer" af Google Translateâ) kan være gode på den ene side, men sabotere webstedet og brugeroplevelsen på den anden.

Det mest kritiske ved brugen af disse billeder er at opretholde en rimelig kvalitet og vægt så lav som muligt. På store handelswebsteder, der er afhængige af miniaturebilleder for at vise kategorisider og forhåndsvisning af produkter, er denne kendsgerning især vigtig. Vidste du, at hvert sekund af forsinkelser med at indlæse webstedet koster Amazon 1,6 milliarder dollars om året? Meget af indlæsningstiden på sådanne websteder er billederne.

Sandt nok kan de fleste af os kun drømme om at have et sted af denne størrelse. Men du ved - store ændringer starter fra bunden op og små. Jo hurtigere vi adresserer jo bedre.

Tips til korrekt brug af miniaturer

Det anbefales stærkt at oprette et miniaturebillede til miniaturebilledet og et større billede til selve produktsiden. Brug ikke det store billede som miniaturebillede! Dette indlæses flere gange belastningen på webstedet, især når der er mange miniaturer på en side. I forskellige CMS-systemer er du automatisk undtaget fra dette problem.

Når det kommer til billedoptimeringsregler, anbefales det at investere mere i store billeder i stedet for miniaturer. For eksempel - medtag ikke miniaturebillederne i Image Sitemap (udvidelse nedenfor), i nogle tilfælde skal du ikke engang indstille ALT-tags for dem. Ambitionen er, at Google indekserer de store billeder på bekostning af miniaturebillederne og ikke omvendt.

Det anbefales at indstille billedtitel til miniaturebilleder, der beskriver produktet med få ord og generelt, hvad surferen vil se efter at have klikket på billedet.

Hvis hver produktkategoriside har mange produkter (f.eks. Over 30), anbefales det at bruge et Lazy Load-script, der kun indlæser billederne, når surferen ruller til det område, hvor de er.

7. Brug af indpakningstekst

Normalt kommer billederne til at tjene teksten og ikke omvendt. Men hvad angår billedoptimering og Googles billedfremme, og hvis webstedet er et net baseret på billeder, er det meget umagen værd at ikke forsømme teksten, selvom det er grundlæggende ting.

For dem, der ønsker at opretholde et rent og minimalistisk udseende som muligt (for eksempel på en fotografs porteføljeside), anbefales det, at han i det mindste definerer følgende på hver side, der har et billede:

H1 I henhold til billedets emne
En kort beskrivelse (selv 10-20 ord er bedre end ingenting) på billedet, helst med et relevant nøgleord eller to
Titel og beskrivelse er naturligvis relevante (i tilfælde af at det er en fysisk side og ikke et billede, der dukker op fra et galleri).
Alt og fototitler - Stærkt anbefalet i dette tilfælde.

8. Sitemap til fotos

Billedsitemap (image-sitemap.xml) hjælper Google med at læse og indeksere vores billeder på webstedet bedre. I lighed med et standard XML-sitemap kan et sitemap med billeder sendes ved hjælp af Search Console i området med sitemaps.

Tilføj et sitemap i Search Console

Et sitemap med billeder er især nyttigt, når du bruger alle slags gallerier med scripts og forskellige effekter - hvilket Google har svært ved at scanne konventionelt.

Der er nogle parametre til brug af sitemaps af billeder.

Hvordan oprettes et sitemap?

WordPress - Som normalt, hvis du arbejder på WordPress, er dit liv let. Udinra All Image Sitemap-pluginet lukker hjørnet for dig. Alt hvad du skal gøre er at installere pluginet, markere nogle V i indstillingerne, oprette sitemap og starte det til Google gennem Search Console.

På enhver anden platform - det afhænger. Hvis der ikke er nogen løsning, der ikke er i boksen, som et plugin osv., Kan dette gøres ved hjælp af Screaming Frog.

Frøen kan hjælpe dig med nemt at fremstille et sitemap med billeder. Det eneste problem - det opdateres ikke automatisk (i modsætning til et plugin) og skal opdateres fra tid til anden.

Hvordan gør du det?

En fuld scanning af det ønskede sted skal udføres, og gå derefter til Sitemaps -> Opret billeder-sitemap i topmenuen i softwaren. Hvad du modtager er en kosher XML-fil, der skal bruges og startes via Search Console.

9. Tilskynd til deling af fotos

Hvis du har en masse brug af originale billeder (hvad enten det er et fysisk billede eller et grafisk element) og billederne er det vigtigste eller i det mindste en væsentlig del af webstedet, er det meget værd at opfordre brugerne til at dele billederne på social netværk og gøre det lettere for dem at gøre det.

Som sædvanlig har jeg praktiske tip til WordPress-platformen, i andre systemer anbefaler jeg at bruge en programmør eller kontrollere, om der er et dedikeret plugin til det.

WordPress har 2 gode plugins til dette formål:

Social Image Hover til WordPress - Betalt plugin (em; neglelak - $ 17).
Pinterest Pin it Button - Et plugin, der tilføjer et lille Pinterest-ikon til fotos på webstedet.

10. Billedreduktions- og optimeringsværktøjer

TinyPNG - en fremragende service, der giver dig mulighed for at komprimere billeder online med en særlig praktisk trækgrænseflade. De har også en API, der giver dig mulighed for at arbejde i større mængder og automatisk, og også et godt plugin til WordPress, der giver dig mulighed for at komprimere alle billederne på webstedet - kræver brug af deres API (gratis for 500 billeder om måneden).

Fotosizer - flot desktop-software, der giver dig mulighed for at redigere billeder i store mængder - ikke kun komprimering, men også reduktion af dimensioner, tilføj vandmærker og forskellige effekter til billeder og mange andre gode funktioner.

Konklusion

Du har lige forstået vigtigheden af at optimere billederne på et websted. Men hvis du vil vide den aktuelle tilstand på dit websted, kan du gøre det gratis takket være Semalt's SEO-konsultationer.

Semalt hjælper dig med at identificere SEO-problemer relateret til dit websted. Derudover kan du nemt med Semalt Experts forbedre effektiviteten af din online forretning til en lavere pris.

mass gmail