Kako optimizirati slike v Magentu: Vaš začetni komplet za hitrejše spletne strani
Pri e-trgovini gre le za vizualne elemente. Temu se enostavno ne moreš izogniti. Slike izdelkov, elegantne teme, uporabniško ustvarjena vsebina iz družbenih medijev – spletni nakupovalci želijo videti, kaj kupujejo, in sodelujejo z vašim spletnim mestom.
Toda s slikami obstaja ena velika težava: upočasnijo vaše spletno mesto. Večje kot je število in velikost vaših slik, daljši je čas nalaganja vašega spletnega mesta.
Obstaja način za zagotavljanje hitrih in privlačnih strani – optimizacija slike. V tem članku bomo raziskali osem najboljših načinov za optimizacijo slik v Magentu in najboljše razširitve brskalnika za to.
8 načinov za hitrejše nalaganje slik
Slike predstavljajo 70% teže spletne strani in so posledično eden od odločilnih faktorjev pri hitrosti nalaganja. Na srečo za Magento ni tako težko optimizirati slike izdelkov, le vedeti morate, katera orodja uporabiti. Tukaj je 8 najboljših načinov za podaljšanje časa nalaganja slik.
#1 Stisni in spremeni velikost
Eden najpogostejših načinov optimizacije slik Magento 2 je stiskanje in spreminjanje velikosti slike.
Spreminjanje velikosti slik običajno pomeni znižanje števila slikovnih pik, ločljivosti slike. Prenizko število slikovnih pik drastično vpliva na kakovost slike.
Stiskanje slik pomeni strpati več podatkov v manj prostora. To je mogoče storiti na način z izgubo, kjer odvzamete delčke slikovnih pik ali odtenkov, ali na način brez izgube, kjer samo zmanjšate velikost datoteke, brez sprememb v kakovosti.
Najboljše, kar lahko storite, je kombiniranje spreminjanja velikosti in stiskanja. Na ta način boste zmanjšali število slikovnih pik do točke, ko kakovost ni popolna, vendar še vedno spodobna, nato pa uporabite stiskanje brez izgub.
Magento ponuja vgrajena orodja za stiskanje in privzeto stisne slike na 80 %. To je priljubljena praksa, ker če izberete še nižji odstotek, bodo uporabniki nezadovoljni s slikami izdelkov nizke kakovosti.
#2 Uporabite CDN
Omrežja za dostavo slikovne vsebine (CDN) so skupine strežnikov po vsem svetu, ki skupaj zagotavljajo hitrejšo dostavo spletnih vsebin. Torej, ko uporabniki dostopajo do slike, jim ni treba čakati na odgovor strežnika na zelo oddaljeni lokaciji. CDN-ji uporabljajo strežnik, ki je najbližje uporabniku.
Obstajajo tudi pametni CDN-ji, ki ponujajo še več prostora za optimizacijo. Zaznajo uporabniško napravo in izvajajo optimizacijo slike v realnem času, po meri za vsako napravo. Na primer, če uporabnik naloži stran na pametni telefon, ne potrebuje ločljivosti 2048 x 1536, dovolj bo manj kakovostna slika in CDN samodejno spremeni velikost slike.
CDN je najlažji način za učinkovito optimizacijo slik v Magento 2, saj se vse naredi samodejno in ne zahteva vaše aktivne udeležbe.
#3 Pazite na formate slikovnih datotek
Pravilo je, da za fotografije in kompleksne ilustracije uporabite format JPEG, za logotipe in preproste ilustracije pa PNG ali SVG. Vendar pa obstaja manj znan format - WebP. Razlog, zakaj ta format postaja vse bolj priljubljen pri spletnem razvoju, je, da ponuja enako kakovost kot JPEG ali PNG, vendar so velikosti datotek manjše. Tako se bodo vaše slike in strani naložile hitreje.
WebP podpirajo glavni brskalniki, kot so Chrome, Edge, Opera, Firefox itd. Vendar morate upoštevati, da datoteke WebP ne bodo prikazane v Safariju in IE.
Priporočamo uporabo JaJuMa WebP optimizirane slike razširitev za Magento 2. Sliko lahko naložite v formatih JPEG in WebP, ta slikovna razširitev WebP za Magento 2 pa bo izbrala pravi format glede na brskalnik, ki ga obiskovalec spletnega mesta uporablja.
#4 Uporabite vektorske slike, kadar koli je to mogoče
Vektorske slike niso sestavljene iz slikovnih pik. Ko jih povečate, ne boste videli zamegljenih robov ali čistih kvadratov. Tako shranite sliko majhne velikosti datoteke in ji lahko spremenite velikost, kolikor želite – ostala bo enake visoke kakovosti in velikosti datoteke. Zato je priporočljivo, da uporabite vektorske slike namesto rastrskih, kolikor je le mogoče, da povečate kakovost svojih slik, ne da bi zmanjšali učinkovitost spletnega mesta.
Omeniti velja, da se vektorske slike uporabljajo samo za preproste ilustracije in logotipe.
#5 Zamenjajte nepotrebne slike s pisavami in ikonami
Da, slike so koristne, ko gre za privabljanje uporabnikov in spodbujanje menjalni tečaji. Vendar je tanka črta med dovolj slik in preveč. Če ga prekrižate, boste dobili lepo (morda preveč zatohlo), a počasno spletno stran. Uporabnikom bo vseeno za vaše slike, če ne morejo naložiti spletne strani, zato je bolje, da nepotrebne slike zamenjate s pisavami in ikonami.
#6 Omogoči Fastly IO
Fastly image optimization v Magento 2 je vgrajeno orodje za samodejno optimizacijo slike: spreminja velikost, obrezuje, prilagaja format razmerja brez ali z minimalnim človeškim vmešavanjem. Orodje podpira naslednje formate: JPEG, WebP, PNG, GIF in animirani GIF. Adobe priporoča uporabo tega orodja s spletnimi mesti Magento, saj je e-trgovina polna slik in jih je utrujajoče ročno optimizirati.
#7 Uporabite leno nalaganje slik
Leno nalaganje slik je praksa, ki odloži nalaganje vizualnih elementov, dokler se uporabnik ne pomakne do dela spletne strani, kjer jih dejansko potrebuje. Bistveno izboljša delovanje spletnega mesta in hitreje prikaže vsebino uporabniku. Glede na to, da uporabniki ne bodo čakali, če se spletno mesto naloži več kot 3 sekunde, so slike z odloženim nalaganjem odličen prihranek za vsako e-trgovino.
#8 Izkoristite moč SEO z atributi Alt
atributi alt, aka alt oznake, so besedilna alternativa za sliko, besedilni opis dogajanja na fotografiji. So pomembna Nastavitev Magento SEO, izboljša uvrstitev strani in pomaga uporabnikom z okvarami oči razumeti kontekst slike.
Iskalniki upoštevajo tudi oznake al. Če obstajajo ključne besede, ki ustrezajo vsebini strani, bodo spletni pajki našli vašo stran še bolj relevantno.
Vendar pa nadomestno besedilo ni ustvarjeno za polnjenje ključnih besed. Bolje je, da pri opisovanju slike uporabite zdrav razum: natančno povejte, kaj je dejansko prikazano. Prav tako ne uporabljajte besed, kot sta »Na sliki lahko vidimo« ali »Na sliki so…«. Samo napišite, kaj je predstavljeno na sliki, kot je prikazano v spodnjem primeru:
Najboljše razširitve za optimizacijo slike Magento
Uporaba zanesljivih razširitev za optimizacijo slik Magento je odličen način za zagotovitev hitrega nalaganja vizualnih elementov brez veliko ročnega dela.
Optimizator slike Apptrian
Optimizator slike Apptrian ima omejene funkcije in plačan dostop do podpore, vendar je brezplačna za uporabo. Z enim klikom lahko optimizirate številne slike in zmanjšate njihovo velikost z nepomembno izgubo kakovosti. Plačljiva različica pa ponuja več konfiguracije za optimizacijo.
Storitev optimizacije delovanja za Magento 2
Storitev optimizacije delovanja za Magento 2 ponuja več kot le optimizacijo slike. Prav tako lahko združite datoteke CSS in JS, zmanjšate njihovo velikost, razčlenite JavaScript, zmanjšate HTML, sledite CPU in uporabi pomnilnika itd. Kar zadeva slikovni del, lahko iščete vse slike v Magentu, zaščitite svoje spletno mesto pred prekomerno optimizacija, samodejno optimizira datoteke JPEG, PNG in GIF. Rešitev stane 699 dolarjev.
Optimizator slike za Magento 2
z Optimizator slike za Magento 2, boste lahko stisnili in optimizirali formate PNG, JPG, GIF, TIF in BMP, izbirali med stiskanjem z izgubami in brez izgub, avtomatizirali optimizacijo in omogočili prostor za varnostno kopiranje originalnih slik ter dodelili samo določene imenike razširitvi, ki je ne želite optimizirati vsako sliko v trgovini. Rešitev stane 99 dolarjev.
Partnerstvo za izboljšanje hitrosti nalaganja strani
Optimizacija slik Magento 2 je bistveni del vsake e-trgovine. Ker spletna mesta e-trgovine aktivno uporabljajo slike za predstavitev svojih izdelkov in se slike zelo počasi nalagajo, lahko uporabniki na koncu opustijo vaše podjetje, preden sploh dobijo vpogled v vašo ponudbo.
Optimizacija slike je eden od mnogih vidikov Magento optimizacija zmogljivosti. Ne bo vam treba prepisati kode ali ponovno razmisliti o arhitekturi e-trgovine.
Če pa optimizacija slike ni dovolj ali ste preprosto preveč zaposleni, da bi se ukvarjali s hitrostjo spletnega mesta, je bolje, da zapletene tehnične podrobnosti prepustite strokovnjakom (ali čudakom za optimizacijo delovanja, kot smo pri Elogicu!).
CTA: Sodelujte s certificirano agencijo Magento in naredite nepozaben prvi vtis z bliskovito hitrostjo nalaganja.
Sodelujte s certificirano agencijo Magento
Optimizirajte svoje slike in naredite nepozaben prvi vtis z bliskovito hitrostjo nalaganja
Pogosta vprašanja o optimizaciji slike Magento
Ali Magento 2 stisne slike?
Da, obstajajo privzete nastavitve stiskanja slik Magento. Vendar orodje še zdaleč ni popolno. Samodejno stiskanje iz vgrajene funkcije Magento je preveč agresivno in na koncu boste dobili slike nizke kakovosti. Deluje tudi samo za slike izdelkov, ne pa za bloge ali ciljne strani. Priporočamo uporabo podaljška ali pa se obrnete na strokovnjake pri Elogic, da opravijo nalogo namesto vas.
Ali bo optimizacija slike res izboljšala delovanje trgovine Magento?
ja Slike predstavljajo 70 % velikosti strani. Če lahko zmanjšate velikost slik, lahko bistveno zmanjšate tudi velikost strani in posledično zagotovite boljše delovanje spletnega mesta.
Kateri so najboljši formati slik za optimizacijo?
Tradicionalno spletna mesta uporabljajo JPEG za fotografije in PNG za logotipe in preprosto grafiko. Vendar pa je najlažji format s kakovostjo prejšnjih formatov WebP. Priporočamo nalaganje slik v različicah JPEG ali PNG in WebP, saj vsi brskalniki ne podpirajo nove oblike.
Ali optimizacija slik vpliva na SEO?
Da, na dva načina. Prvič, učinkovitost spletnega mesta lahko povečate z optimizacijo slik in ni skrivnost, da Google upošteva hitrost nalaganja. Drugič, slike lahko optimizirate z nadomestnim besedilom, kar Googlu omogoči branje vaših slik. Če je slika in posledično njeno nadomestno besedilo ustrezna vsebini, lahko pridobite dodatne točke ustreznosti.
Vir: https://elogic.co/blog/how-to-optimize-images-in-magento-your-starter-kit-for-faster-web-pages/
- "
- &
- 67
- 7
- dostop
- Račun
- Ukrep
- aktivna
- Adobe
- vsi
- Dovoli
- Arhitektura
- okoli
- članek
- backup
- BEST
- blogi
- povečanje
- brskalnik
- poslovni
- nakup
- ki
- Krom
- Koda
- Skupno
- vsebina
- stroški
- rastline
- datum
- ponudba
- zamude
- dostava
- Razvoj
- elektronskem poslovanju
- Edge
- itd
- Strokovnjaki
- razširitve
- oči
- FAST
- Feature
- Lastnosti
- konec
- Firefox
- prva
- format
- brezplačno
- polno
- gif
- veliko
- tukaj
- visoka
- Kako
- Kako
- HTTPS
- slika
- Povečajte
- IT
- JavaScript
- Komplet
- plast 1
- 2. nivo
- Vzvod
- Limited
- vrstica
- obremenitev
- kraj aktivnosti
- velika
- mediji
- omrežij
- ponudba
- Ponudbe
- na spletu
- deluje
- partner
- performance
- slika
- Popular
- moč
- Izdelek
- Izdelki
- strokovnjaki
- zaščito
- kakovost
- v realnem času
- zmanjša
- Odgovor
- Safari
- Iskalnik
- Občutek
- seo
- nastavitev
- Kupci
- Enostavno
- Velikosti
- majhna
- pametna
- pametni telefon
- So
- socialna
- družbeni mediji
- Vesolje
- hitrost
- trgovina
- podpora
- Podprti
- Podpira
- svet
- čas
- vrh
- sledenje
- Uporabniki
- Počakaj
- Watch
- web
- Spletna stran
- spletne strani
- Kaj je
- besede
- delo
- deluje
- svet
- X
- zoom