Slik optimaliserer du bilder i Magento: Startpakken din for raskere websider
Netthandel handler om bilder. Du kan bare ikke unngå det. Produktbilder, elegante temaer, brukergenerert innhold fra sosiale medier – nettkunder ønsker å se hva de kjøper og engasjere seg med nettstedet ditt.
Men det er ett stort problem med bilder: de bremser nettstedet ditt. Faktisk, jo større antall og størrelse på bildene dine, desto høyere er lastetiden til nettstedet ditt.
Det er en måte å levere både raske og attraktive sider - bildeoptimalisering. I denne artikkelen skal vi utforske åtte ultimate måter på hvordan du kan optimalisere bilder i Magento og de beste nettleserutvidelsene for å gjøre det.
8 måter å få bildene dine til å lastes raskere
Bilder utgjør 70 % av nettsidevekten og er følgelig en av de avgjørende faktorene når det kommer til lastehastighet. Heldigvis er det ikke så vanskelig for Magento å optimalisere produktbilder, du må bare vite hvilke verktøy du skal bruke. Her er de 8 beste måtene du kan øke innlastingstiden for bilder på.
#1 Komprimer og endre størrelse
En av de vanligste måtene å optimalisere bilder på Magento 2 er å komprimere og endre størrelsen på bildet.
Endre størrelse på bilder betyr vanligvis å senke antall piksler, oppløsningen på bildet. Det påvirker bildekvaliteten drastisk hvis antall piksler er for lavt.
Komprimering av bilder betyr å stappe mer data på mindre plass. Det kan gjøres på en tapsmessig måte der du tar bort biter av piksler eller nyanser, eller på en tapsfri måte hvor du bare reduserer filstørrelsen, uten endringer i kvaliteten.
Det beste du kan gjøre er å kombinere endring av størrelse og komprimering. På denne måten vil du redusere antall piksler til det punktet hvor kvaliteten ikke er perfekt, men fortsatt anstendig, og deretter bruke tapsfri komprimering.
Magento tilbyr innebygde komprimeringsverktøy og komprimerer bilder til 80 % som standard. Det er en populær praksis fordi hvis du velger en enda lavere prosentandel, vil brukerne være misfornøyde med produktbilder av lav kvalitet.
#2 Bruk en CDN
Bildeinnholdsleveringsnettverk (CDN) er grupper av servere over hele verden som jobber sammen for å gi raskere levering av nettinnhold. Så når brukere får tilgang til et bilde, trenger de ikke å vente på svar fra serveren på et ekstremt fjernt sted. CDN-er bruker serveren som er nærmest brukeren.
Det finnes også smarte CDN-er som gir enda mer rom for optimalisering. De oppdager brukerenheten og utfører sanntids bildeoptimalisering, tilpasset for hver enhet. For eksempel, hvis en bruker laster inn en side på smarttelefonen, trenger de ikke en oppløsning på 2048 x 1536, et bilde av lavere kvalitet vil være nok og CDN-er skalerer bildet automatisk.
CDN er den enkleste måten å effektivt optimalisere bilder i Magento 2, siden alt gjøres automatisk og ikke krever din aktive involvering.
#3 Se opp for bildefilformater
Regelen er å bruke JPEG-format for bilder og komplekse illustrasjoner, og PNG eller SVG for logoer og enkle illustrasjoner. Imidlertid er det et mindre kjent format - WebP. Grunnen til at dette formatet blir stadig mer populært i webutvikling er at det tilbyr samme kvalitet som JPEG eller PNG, men filstørrelsene er mindre. Så bildene og sidene dine lastes inn raskere.
WebP støttes av store nettlesere som Chrome, Edge, Opera, Firefox osv. Du bør imidlertid være oppmerksom på at WebP-filer ikke vises på Safari og IE.
Vi anbefaler å bruke JaJuMa WebP-optimaliserte bilder utvidelse på Magento 2. Du kan laste opp et bilde i både JPEG- og WebP-formater, og denne WebP-bildeutvidelsen for Magento 2 vil velge riktig format basert på hvilken nettleser en besøkende på nettstedet bruker.
#4 Bruk vektorbilder når det er mulig
Vektorbilder består ikke av piksler. Når du zoomer dem inn, vil du ikke se uskarpe kanter eller direkte firkanter. Så du lagrer et bilde med liten filstørrelse og kan endre størrelsen på det så stort du vil - det vil forbli den samme høye kvaliteten og filstørrelsen. Derfor anbefales det å bruke vektorbilder i stedet for rasterbilder så mye du kan for å øke kvaliteten på bildene dine uten å senke nettstedets ytelse.
Det er bemerkelsesverdig at vektorbilder kun brukes til enkle illustrasjoner og logoer.
#5 Erstatt unødvendige bilder med fonter og ikoner
Ja, bilder er nyttige når det gjelder å tiltrekke brukere og øke konverteringsfrekvenser. Men det er en fin linje mellom nok bilder og for mange. Krysser du den, får du en vakker (kanskje for tett), men treg nettside. Brukere vil ikke bry seg om bildene dine hvis de ikke kan laste inn nettstedet, så det er bedre å erstatte unødvendige bilder med fonter og ikoner.
#6 Aktiver Fastly IO
Rask bildeoptimalisering i Magento 2 er et innebygd verktøy for automatisk bildeoptimalisering: det endrer størrelse, beskjærer, justerer forholdsformat uten eller med minimal menneskelig innblanding. Verktøyet støtter følgende formater: JPEG, WebP, PNG, GIF og animert GIF. Adobe anbefaler å bruke dette verktøyet med Magento-nettsteder siden e-handel er full av bilder og det er slitsomt å optimalisere dem alle manuelt.
#7 Bruk lazy-load bilder
Lazy image loading er praksisen som forsinker lasting av visuelle elementer til brukeren ruller til den delen av nettsiden der de faktisk er nødvendig. Det forbedrer nettstedets ytelse betydelig og viser innhold til brukeren mye raskere. Tatt i betraktning at brukere ikke vil vente hvis nettstedet tar mer enn 3 sekunder å laste, er lat-lastede bilder en flott redning for enhver e-handelsbedrift.
#8 Utnytt kraften til SEO med Alt-attributter
Alt-attributter, aka alt-tagger, er et tekstalternativ for et bilde, tekstbeskrivelsen av hva som skjer på et bilde. De er en viktig Magento SEO-innstilling, øke siderangeringen og hjelpe brukere med nedsatt øyne til å forstå konteksten til et bilde.
Søkemotorer tar også hensyn til alt-tagger. I tilfelle det er søkeord som er relevante for innholdet på siden, vil webcrawlere finne siden din enda mer relevant.
Alternativ tekst er imidlertid ikke opprettet for søkeordstopping. Det er bedre å bruke sunn fornuft mens du beskriver et bilde: vær spesifikk om hva som faktisk er avbildet. Ikke bruk ord som "På bildet kan vi se" eller "Det er ... på bildet". Bare skriv hva som er representert i bildet som i eksemplet nedenfor:
Beste Magento bildeoptimaliseringsutvidelser
Å bruke pålitelige Magento-bildeoptimaliseringsutvidelser er en fin måte å sikre rask innlastingstid for bildene dine uten mye manuelt arbeid.
Image Optimizer av Apptrian
Image Optimizer av Apptrian har begrensede funksjoner og betalt tilgang til støtte, men det er gratis å bruke. Du kan optimere en rekke bilder med ett klikk og redusere størrelsen med ubetydelig kvalitetstap. En betalt versjon tilbyr imidlertid mer konfigurasjon for optimalisering.
Ytelsesoptimaliseringstjeneste for Magento 2
Ytelsesoptimaliseringstjeneste for Magento 2 tilbyr mer enn bildeoptimalisering. Du kan også slå sammen CSS- og JS-filer, minimere størrelsen, analysere JavaScript, minimere HTML, spore CPU og minnebruk osv. Når det gjelder bildedelen, kan du søke etter alle bildene på Magento, beskytte nettstedet ditt mot over- optimalisering, optimaliserer JPEG-, PNG- og GIF-filer automatisk. Løsningen koster $699.
Bildeoptimerer for Magento 2
Med Bildeoptimerer for Magento 2, vil du kunne komprimere og optimere PNG-, JPG-, GIF-, TIF- og BMP-formater, velge mellom tapsfri og tapsfri komprimering, automatisere optimalisering og gi rom for original bildesikkerhetskopiering, og tildele kun spesifikke kataloger til utvidelsen av du ikke ønsker å optimalisere hvert bilde i butikken. Løsningen koster $99.
Partner opp for å forbedre sideinnlastingshastigheten
Magento 2-bildeoptimalisering er en viktig del av enhver e-handelsbutikk. Siden e-handelsnettsteder aktivt bruker bilder for å vise frem produktene sine og bildene er svært trege å laste, kan brukere ende opp med å forlate virksomheten din før de i det hele tatt får et glimt av hva du har å tilby.
Bildeoptimalisering er en av mange aspekter ved Optimalisering av Magento -ytelse. Du trenger ikke å skrive om koden eller revurdere e-handelsarkitekturen din.
Men hvis bildeoptimalisering ikke er nok, eller du bare er for opptatt til å håndtere nettstedhastigheten, er det bedre å overlate de komplekse tekniske detaljene til eksperter (eller ytelsesoptimaliseringsfreaks som vi er hos Elogic!).
CTA: Samarbeid med et sertifisert Magento-byrå og gjør et uforglemmelig førsteinntrykk med en lynrask lastehastighet.
Partner opp med et sertifisert Magento-byrå
Optimaliser bildene dine og gjør et uforglemmelig førsteinntrykk med en lynrask lastehastighet
Vanlige spørsmål om Magento bildeoptimalisering
Komprimerer Magento 2 bilder?
Ja, det er standard Magento-bildekomprimeringsinnstillinger. Verktøyet er imidlertid langt fra perfekt. Automatisk komprimering fra en innebygd Magento-funksjon er for aggressiv og du vil ende opp med bilder av lav kvalitet. Det fungerer også bare for produktbilder, ikke for blogger eller landingssider. Vi anbefaler enten å bruke en utvidelse eller å kontakte fagfolk hos Elogic for å utføre oppgaven for deg.
Vil bildeoptimalisering virkelig forbedre ytelsen til en Magento-butikk?
Ja. Bilder står for 70 % av sidestørrelsen. Hvis du klarer å redusere størrelsen på bildene, kan du også redusere størrelsen på siden betraktelig og følgelig få bedre nettsideytelse.
Hva er de beste bildeformatene for optimalisering?
Tradisjonelt bruker nettsteder JPEG for bilder og PNG for logoer og enkel grafikk. Det letteste formatet med kvaliteten på tidligere formater er imidlertid WebP. Vi anbefaler å laste opp bilder i både JPEG- eller PNG- og WebP-versjoner siden ikke alle nettlesere støtter det nye formatet.
Påvirker bildeoptimalisering SEO?
Ja, på to måter. Først og fremst kan du øke ytelsen til nettstedet med bildeoptimalisering, og det er ikke en hemmelighet at Google tar hensyn til lastehastigheten. For det andre kan du optimalisere bilder med alternativ tekst, slik at Google kan lese bildene dine. Hvis et bilde og dermed alt-teksten er relevant for innholdet, kan du få ekstra relevanspoeng.
- "
- &
- 67
- 7
- adgang
- Logg inn
- Handling
- aktiv
- Adobe
- Alle
- tillate
- arkitektur
- rundt
- Artikkel
- Backup
- BEST
- blogger
- øke
- nett~~POS=TRUNC leseren~~POS=HEADCOMP
- virksomhet
- kjøpe
- hvilken
- Chrome
- kode
- Felles
- innhold
- Kostnader
- avlinger
- dato
- avtale
- forsinkelser
- levering
- Utvikling
- e-handel
- Edge
- etc
- eksperter
- utvidelser
- øye
- FAST
- Trekk
- Egenskaper
- slutt
- Firefox
- Først
- format
- Gratis
- fullt
- gif
- flott
- her.
- Høy
- Hvordan
- Hvordan
- HTTPS
- bilde
- Øke
- IT
- Javascript
- kit
- lag 1
- Layer 2
- Leverage
- Begrenset
- linje
- laste
- plassering
- større
- Media
- nettverk
- tilby
- Tilbud
- på nett
- Opera
- partner
- ytelse
- bilde
- Populær
- makt
- Produkt
- Produkter
- fagfolk
- beskytte
- kvalitet
- sanntids
- redusere
- svar
- Safari
- Søk
- forstand
- SEO
- innstilling
- shoppere
- Enkelt
- Størrelse
- liten
- Smart
- smarttelefon
- So
- selskap
- sosiale medier
- Rom
- fart
- oppbevare
- støtte
- Støttes
- Støtter
- verden
- tid
- topp
- spor
- Brukere
- vente
- Se
- web
- Nettsted
- nettsteder
- Hva er
- ord
- Arbeid
- virker
- verden
- X
- zoom