Kuidas optimeerida oma veebisaidi pilte ja panna need töötama kõigis seadmetes (tundlikud pildid mobiilile, töölauale, tahvelarvutile)

Miks viitsida pilte optimeerida? Las ma küsin sinult seda; millal nägite viimati veebisaiti, millel sellel polnud ühtegi pilti? "Mitte kunagi" oleks õige vastus. ��‍♂️ Pildid on lihtsalt liiga olulised. Ja see ei puuduta isegi seda käramist väärivat fotot, mis teiega kaasas käiks "10 veebiturunduse näpunäidet" postitada. Pildid on kasulikud mitmel otstarbel. Mõelge paigutustele, kujunduselemendile, logod, profiilipiltidele ja jah, ka blogipiltidele.


Ausalt öeldes ei saa teil 2020. aastal olla veebisaiti, kui kasutate sellel vähemalt käputäis pilte. Sellegipoolest pole pilte veebisaidi omaniku jaoks nii lihtne välja mõelda. Isegi kui jätta välja probleemid, mida ja milliseid pilte kasutada, on ka nende piltide puhtalt tehnilisest aspektist esitamise probleeme:

  • Kuidas pakkuda tundlikke pilte mitme seadme kaudu?
  • Kuidas muuta need kõigis nendes seadmetes suurepäraseks?
  • Ja mis kõige tähtsam, kuidas veenduda, et need laaditakse korralikul ajal?

Nendele küsimustele vastame täna. Siin on teie ülim juhend kuidas optimeerida oma veebisaidi pilte ja muuta need kõigis seadmetes suurepäraseks?

Kuidas optimeerida oma veebisaidi pilte ja panna need töötama kõigis seadmetes

�� Miks meid kuulata??

Pildid on olnud meie jaoks viimasel ajal kriitiline teema ja seda meie pere ühe uuema tööriista tõttu – Optimole.

Optimole on piltide optimeerimise teenus, mida saate seadistada ja unustada & tööriist. Peame seda veebis parimaks lahenduseks ja saame seda tõestada! Kuid see on juba teise aja jutt. Mõlemal juhul oleme aastate jooksul palju õppinud, kuidas pilte õigesti optimeerida. Tahame mõnda neist teadmistest täna teiega jagada.

�� Miks peaksite oma saidi pilte optimeerima?

Lisaks suurepärase väljanägemisega piltidele kulutavad need ka märkimisväärselt palju kettaruumi ja ribalaiust. Täpsemalt öeldes moodustavad pildid midagi, mis moodustab 30–85% tavalise veebilehe suurusest.

kiiruskatse

See on tohutu – ja see pole nii, nagu piltide eemaldamine on võimalus – seega on parim asi, mida me selle asemel teha saame, õppida piltide optimeerimist viisil, mis võtab lihtsalt vähem kettaruumi.

Kasum võib olla suur, ja eriti korduvate piltidega tegelemisel – piltidel, mis tuleb laadida igale üksikule veebilehele. Need on näiteks taustad, kujunduselemendid, logod, ikoonid jne. Mõnikord võib ühe taustpildi optimeerimine vähendada teie lehe suurust 70%+.

Vaadake seda näidet:

lehe suuruse võrdlus enne ja pärast piltide optimeerimist

Aga hoia, see läheb hullemaks! Kui piltide üldine jõudlus poleks piisav, on olemas ka mobiilimaailm �� ja see toob kaasa täiesti uued väljakutsed:

Esiteks ei tohiks te tõenäoliselt töölauakülastajatele ja mobiilikülastajatele sama piltide komplekti kuvada. Kontekstid on lihtsalt tohutult erinevad – see hõlmab ekraani suurust, orientatsiooni (tavaliselt portree) ja isegi lugeva inimese mõttemaailma.

enamgi veel, andmed viitavad et vähem piltidega mobiilidisainilahendused kalduvad konversioonide osas paremini toimima.

Kui kõik kokku panna, siis on paar asja, mille eest peame reageerima tundlike piltide edastamisel mitme seadme kaudu.

  • esiteks optimeerige selle seadme jaoks pildid
  • kiireimate laadimisaegade tagamiseks veenduge, et pildid oleks maksimaalselt vastuvõetavale tasemele tihendatud
  • kuvage seadme ja ekraani järgi optimaalne piltide arv

��‍♂️ Kuidas optimeerida pilte ja edastada neid igat tüüpi seadmetes

Piltide optimaalseks töötlemiseks ja külastajale võimalikult kiireks edastamiseks on mitu komponenti. Selles juhendis käsitleme neid kõiki:

�� Valige õige vorming

Alustame vanuseküsimusega: PNG või JPG?

Enamik inimesi ütleb "JPG kogu aeg!" Kuid see pole tegelikult õige:

PNG vs JPG

Jah, enamasti või vähemalt tavalisemate stsenaariumide korral, mille jaoks meile pilte võiks vaja minna, võtavad JPG-d vähem kettaruumi ja seetõttu ka vähem ribalaiust.

Kuid märksõna on siin "kõige tavalisemad stsenaariumid." Tegelikult on see, kui teil on keeruline pilt, millel on palju värve ja värvide üleminekuid (aka palju "värviteave"), siis JPG-d lähevad tõepoolest paremaks. Mõelge standardfotodele. Need töötavad JPG-dena paremini.

Kui teil on aga pilt natuke lihtsam, võidab PNG kogu aeg.

Vaatleme järgmist näidet. Siin on neli pilti:

pilt-1-apilt 1-a: JPG

pilt-1-bpilt 1-b: PNG

pilt-2-apilt 2-a: JPG

pilt-2-bpilt 2-b: PNG

  • pilt 1-a on 312 KB
  • pilt 2-a on 196 KB

Proovige ära arvata ülejäänud kahe pildi suurused …

Sinu Vastus:

Vale!

  • pilt 1-b on 1,3 MB (selle olete ilmselt arvanud)
  • pilt 2-b on 106 KB (oota, mis?!)

Nagu näete, võidab PNG lihtsate, vähevärviliste piltide eest.

Mõelge näiteks liidese ekraanipiltidele, lihtsatele illustratsioonidele jne.

�� 1. tund:

Ärge minge alati JPG-le. Ennustage, kui suur pilt selle sisu põhjal kujuneb, ja kasutage siis õiget pildi tüüpi.

Nüüd natuke õigeaegsema küsimuse jaoks: SVG? WebP?

SVG ja WebP

SVG ja WebP on veebis natuke vähem levinud pilditüübid, kuid nad on mõlemad suurepärased, kui kasutate neid nii, nagu neid tuleks kasutada. Lubage mul selgitada:

  • SVG on XML-põhine vektorkujutise vorming. Kujutise sisu saab määratleda lihtsas XML-failina – sama XML-failina, mida kasutate muudel põhiliste andmetöötluse eesmärkidel. See teeb SVG-st hea vormingu, kui tegemist on lihtsa vektorpildiga.
  • WebP on Google’i uus vorming. Nad kiidavad, et WebP on 25-34% väiksem kui võrreldavad JPEG-d ja 26% väiksem kui võrreldavad JPG-d.

Mis siis saak on? Kas saate pilte optimeerida, muutes need kõik SVG-deks ja WebP-deks?

Esiteks, SVG. Põhimõtteliselt kasutage SVG-d ainult siis, kui a) pilti saab tõhusalt salvestada SVG – na ja (b) kui te ei arvesta sellega, et inimesed võtavad selle SVG ja muudavad seda.

Nagu ma ütlesin, on SVG XML-põhine, mis tähendab, et SVG graafika muutmine on tõesti lihtne. See pole alati midagi sellist, mida soovite – eriti oma kaubamärgi logo või muu olulise graafikaga tegelemisel.

Enamiku stsenaariumide korral pole SVG-d vorming, mida kasutate väga sageli.

Nüüd peale WebP. Formaat on suurepärane ja enamikul juhtudel säästab see tõepoolest palju kettaruumi just nii, nagu lubatud. Vaadake neid kahte pilti:

jpg pildi näide

veebipildi näide

  • algne JPG versioon on 204 KB
  • WebP on 58 KB

Trikk on selles, et mitte kõik brauserid ei toeta WebP-d. Tegelikult ei pruugi te isegi näha WebP-pilti, mida ma ülal olen kasutanud. Selle kirjutamise ajal töötab WebP Google Chrome’is, Firefoxis, Edge’is ja Operis. Muidugi ei toeta vanemad versioonid seda vormingut.

See tähendab praktikas seda, et WebP-pildi lisamine pole nii lihtne kui JPG või PNG lisamine.

Ma mõtlen, et saate tehniliselt kasutada sellist kooditükki:

… aga kui kasutaja brauser ei toeta vormingut, näevad nad selle asemel tuttavat katkise pildi ikooni.

WebP tõhusaks kasutamiseks peaksite pakkuma varupilte. Näiteks:

See tähendab palju rohkem tööd. Kujutage ette, et peate iga kord, kui soovite ajaveebi postitusele või lehele lisada WebP-pildi, looma sellise sildi. Ja lubage mul peatada teid siinkohal, ei, WordPress ei toeta WebP-i loomulikult, nii et peate seda tegema käsitsi.

Sellegipoolest soovitan minna seda keerulist manuaalset WebP-i marsruuti alati, kui tegemist on piltidega, mis ilmuvad teie saidi mitmel lehel, või piltidega, mis on tohutu suurusega ja vajate igat tööriista, mida peate selle suuruse mingil viisil vähendamiseks.

Saate pilte Photoshopis WebP-na salvestada või kasutada sellist tööriista nagu XnConvert (tasuta).

�� 2. tund:

Kui soovite pilte kiiresti optimeerida, ärge üldse viitsige SVG-sid kasutada. Aeg, mille kulutate nende loomisele, ei tasu ära (ehkki võite sellega nõus olla, siin on kasu) alternatiivne võtmine). PNG-sid saab kasutada palju kiiremini ja kettaruumi tarbimisel mitte palju halvemini.

Mitmel lehel kuvatavate piltide või piisavalt suurte piltidega tegelemisel kasutage WebP-i. See tähendab, kui te ei saa WebP-töötlusega automaatselt hakkama, seda saab teha mõne täiendava tööriista abil. Sel juhul kasutage WebP-d kõikjal. Me räägime sellest sekundi pärast.

��️ Tihendage pilte

Kujutiste tihendamine on nagu võluvägi. Las ma näitan sulle:

See on sama JPG-pilt, mis on salvestatud ainult erineval pakkimistasemel (mida sageli nimetatakse ka kvaliteeditasemeks):

koonon - 100%100% kvaliteet

koonon-95%95% kvaliteet

koon-85%85% kvaliteet

koonon-50%50% kvaliteet

Kui olete nagu enamik inimesi, näevad esimesed kolm teile samad välja. Neljas hakkab otsima "natuke hullem." (Paremklõpsake ja "Ava pilt uuel vahelehel")

Siit leiate, kui palju kettaruumi ükski neist piltidest võtab:

  • 100% kvaliteet: 969 KB
  • 95%: 439 KB
  • 85%: 186 KB
  • 50%: 102 KB

Tohutu, eks?! Liigutades pakkimist 100% -lt 95% -le, saate liikuda vahemikus ~ 1 MB kuni ~ 500 KB ja ilma kvaliteedi märgatava languseta..

Seda JPG-pakkimist saab mitmesuguste tööriistadega üsna automaatselt käsitseda, mis on hea uudis. Kuid mitte kõik pildid pole loodud ühtemoodi, nii et mõnikord võib halva väljanägemisega piltide kõrvale saada õigesti nähtavaid pilte, isegi kui need läbisid sama tihendusprotsessi.

Üldiselt saate siin hüppe teha ja JPG-de kvaliteeti üsna tugevalt vähendada. Tõsi on see, et teie saidi külastajad ei hoolita kõikjal teravate piltide eest.

Olgu, ma peaksin selgitama; jah, kui soovite neile midagi näidata – näiteks pilti, mis on võtmeisaldus sisule, nt tootepildid, hotellitubade fotod -, siis peaksid need kindlasti olema krõbedad.

Kuid teistes valdkondades võite olla natuke rahulikumad. Näiteks ei pea taust olema 100% karge. Üldiselt võivad kõik pildid, millega külastaja otseselt ei tegele, olla madalama kvaliteediga.

Kaks minu lemmikriista, mis teid siin aidata võivad, on:

ImageOptim töölaua pakkimiseks Macis. Võite lihtsalt haarata pildi töölaualt, lohistada selle ImageOptimile ja seejärel teeb tööriist võlujõu ja kirjutab lähteteksti üle, kui see on valmis.

Seejärel saate selle pildi hankida ja oma saidile tavaliselt üles laadida.

ImageOptim - suurepärane tööriist töölaua piltide optimeerimiseks

Teine tööriist on Optimole. See tööriist määratleb üsna palju seda, kuidas piltide käsitsemine veebisaitidel toimub. Ütleme selle arutelu jaoks, et see on tõesti efektiivne, kui soovite optimeerida oma meediumiteegis olevaid pilte.

optimole - suurepärane tööriist pilves piltide optimeerimiseks

Nüüd PNG-de peale. Nii nagu JPG-sid, saab ka PNG-sid tihendada. Kuid seekord pole kvaliteedi languses miinuseid. PNG-sid saab kadudeta algoritme kasutades tõhusalt tihendada.

Teisisõnu, tihendage PNG-sid alati!

Vaadake neid kolme pilti:

kwf-1
kwf-2

kwf-3

Nad näevad välja samad, kuid tegelikult võtavad:

  • 346 KB
  • 215 KB
  • 100 KB

Proovige ära arvata, kumb on kumb.

Kolm tööriista piltide tihendamiseks ja väiksemaks tegemiseks:

  • ImageOptim jälle. Kuid see võtab PNG-dega palju aega, nii et kui teil on neid palju töödelda, võiksite endale tööriista töötamise ajal tassi kohvi teha.
  • ImageAlpha. Palju kiirem kui ImageOptim. See on minu töölauale mõeldud lahendus PNG-de jaoks.
  • Optimole. Pole üllatav, et Optimole tegeleb ka PNG-pakkimisega. Kõik toimub autopiloodil.

�� 3. õppetund:

Tihendage JPG-d, et saavutada vastuvõetav kvaliteeditase võrreldes kettaruumiga.

Tihendage oma PNG-sid alati.

�� Esitage õigete mõõtmetega pilte

See on võib-olla kogu kõige olulisem aspekt "reageerivad pildid" mõistatus. Nagu me teame, on seal kümneid, kui mitte sadu erinevaid ekraanisuurusi, ja me peame kuidagi veenduma, et meie pildid näevad kõigil neil suurepärased välja.

Lihtne lahendus? Esitage suurt pilti … seda saab alati vähendada, eks? Noh, tehniliselt on see õige, kuid praktikas kulutab see palju ribalaiust ja muudab teie saidi laadimise enamikus seadmetes tõesti aeglaselt.

Parem lahendus on skaleerida kõik pildid õigetesse suurustesse, mida eelistavad kõige tavalisemad seadmed, ja seejärel neid vastavalt teenindada.

Nagu arvata võiks, vajate selle saavutamiseks sama pildi erinevaid versioone.

Üks võimalus selle saavutamiseks on alustada oma disainilahenduse põhilaiusest ja suurimast kasutatavast pildisuurusest ning seejärel skaleerida seda mõnele tavalisele seadmele ja murdepunktile.

Näiteks ei lähe enamik veebisaite sisuploki laiuse korral märgi 1100 pikslit kõrgemale, nii et võite eeldada, et ka sel juhul kuvatav maksimaalne pilt on laiusega 1100 pikslit.

Seejärel saate tahvelarvutite ja mobiilsete stsenaariumide katmiseks luua murdepunktid 800 piksli ja 550 piksli (ühised väärtused) jaoks. Kuigi see ei anna teile kõigis seadmetes 100% täiuslikke tulemusi, optimeerite vähemalt mõistlikul määral ja hoiate oma pilte kontrolli all.

Sellel taustal peate nüüd looma käputäie erinevaid versioone igast pildist, mida soovite oma saidil kasutada.

Siin on näide tegeliku kuvakoodi käsitlemise kohta:

Srcseti atribuudi võlu on see, et brauser vaatab selles sisalduvat ja valib siis kasutatava seadme põhjal parima pildi.

Veel üks kohandamine, mida ülal näete, on atribuut suurused. See räägib brauserist, kuidas pilt teatud ekraanidel peaks käituma. Selle stsenaariumi korral saab pilt suuremaks kui 1100 pikslit vaateaknal 1100 pikslit, väiksemates seadmetes võtab see aga kogu vaateava.

Selline lahendus tagab, et pilt ei võta tervet 3840 pikslit laiust 4K-ekraani. Mobiiltelefoni vaatamisel võtab see siiski kogu ekraani.

See atribuutide suuruste efektiivne kasutamine on see, kuidas muuta oma pildid tõeliselt reageerivaks.

⭐ Pro-trikk: minge piltide järele, mis on vajalikust mõõtmest 10% väiksemad, ja laske brauseril neid mastaapida. See säästab natuke lisaruumi ja ribalaiust. Näiteks kui vajate pilti, mille suurus on 500 × 500 pikslit, saate oma pildi mõõtmeteks suurendada 450 × 450 pikslit ja lasta siis brauseril suurendada kuni 500. See sõltub pildist, kuid enamikul juhtudel sõltub kasutaja ei pane tähele.

�� 4. tund:

Kasutage oma kujunduse jaoks õigeid pildi suurusi.

Murdepunktide loomine.

Murdepunktide katmiseks looge samast pildist mitu versiooni.

Kasutage piltide kuvamisel atribuute srcset ja Suurused.

�� Optimeerige pilte võrkkesta ja HiDPI ekraanide jaoks

Kujutise mõõtmete spektri teine ​​ots on seotud HiDPI-sõbralike piltidega.

Lugu seisneb selles, et töölauaekraanid muutuvad aina suuremaks ja nende pikslid pakitakse üha tihedamini. Tänapäeval pole harvad juhud, kui a 4K ekraan pakitud 15-tollisesse sülearvutisse. 4K eraldusvõime on 3840 × 2160 pikslit, nii et kõik need pikslid peavad olema tõesti pisikesed.

See tekitab veebisaitidele probleeme. Põhimõtteliselt, kui teie sait oleks määratletud kui 1100 pikslit lai, siis kuluks see normaaltingimustes vaid umbes 25% 4K-ekraani saadaolevast ekraanivarast. See pole optimaalne. Õnneks asjad nii ei tööta.

Selle probleemi vältimiseks käituvad need suure eraldusvõimega ekraanid justkui poole väiksematena (ma lihtsalt lihtsustan, kuid kuulete mind). Nii et teie 1100 piksli laiuse veebisaidi asemel, mis hõivab väikese osa HiDPI-ekraanist, suureneb see kuni kahekordseks, võttes 2200 pikslit ja täites ekraani palju paremini.

See protsess võimaldab ekraanidel teravamaks ja teravamaks muutuda, ilma et kõik näeks protsessis pisikest.

Kuid see tava ei ole ilma oma puudusteta. Peamiselt võtavad teie pildid tohutu löögi. Teksti on lihtne skaleerida ilma kvaliteeti kaotamata. Fondid on ketenduse suhtes immuunsed. Pilte pole. Otsese tulemusena näevad kõik pildid, mis pole HiDPI-ekraanide jaoks valmis, hägused!

Selle parandamiseks peate edastama skaleeritud kujutised iga suumi suhte jaoks. Siin on lihtne kood:

(Kui brauser ei toeta srcsetit, kasutatakse standardset src-i.)

Nüüd, kui ma ütlen "skaleeritud pildid," Ma mõtlen tegelikult seda, et peaksite alustama teisest otsast. Alustage tohutu kujutisega (sildistage see 3x), siis vähendage seda ja vähendage seda väiksemaks (2x) ning lõpuks muutke see 1x ja kasutage seda vaikepildina.

�� Õppetund nr 5:

Veenduge, et teie logod, kaubamärgipildid ja kõik postitustes ja lehtedel kasutatud pildid oleksid HiDPI ekraanide jaoks valmis.

⌛ Kujutise laadimise edasilükkamine

See on põhimõtteliselt lihtne; kõik voldi kohal olevad pildid tuleks kohe laadida (lehe laadimisel). Kõike muud saab edaspidiseks ja isegi hiljem edasi lükata "laisk laaditud."

Laisk laadimine on pildi laadimine nõudmisel. St pildid laaditakse alles sekundi jagu enne, kui kasutaja neid vajab – mitte varem, mitte hiljem. Ja see "mitte varem, mitte hiljem" siin on osa võti.

Ideaalse stsenaariumi korral tuleks pilt laadida vahetult enne, kui see vaateaknasse keritakse. See tähendab, et kasutaja ei peaks enne pildi ilmumist kohahoidjat nägema. Kui see juhtub, võivad nad pildi edasi kerida, ilma et see õnnestuks õigeaegselt laadida – see pole suurepärane viis piltide optimeerimiseks.

Sellegipoolest on laiska laadimist WordPressi saitidel lihtne teha. JavaScripti / jQuery abil saate koormaga laisaks lüüa ja soovi korral võite isegi selle koodi ise kirjutada. Teise võimalusena võite hankida pistikprogrammi nagu a3 Laiska koormus, või saate kasutada Optimole, mis sisaldab laiska laadimismoodulit.

�� Õppetund nr 6:

Lahtiselt laadige üles klapi all olevad pildid.

�� Edastage pilte CDN-i kaudu

Sisu edastamise võrk on nagu saidi kiiruse petlik kood. Te petate, sest te ei muuda oma saiti nii palju kiiremaks, kuna ütlete, et keegi teine ​​võtab koorma vastu ja edastab saidi andmed teie jaoks külastaja jaoks.

�� Rääkisime siin CDNidest põhjalikumalt, vaadake järele.

TL; DR seisneb selles, et CDN-id kasutavad ära serverite võrgu, mis kõik hoiab teie saidi koopiat ja edastab selle külastajale lähimast saadaolevast asukohast. See läheb alati kiiremini kui teie põhiserverist kohaletoimetamine.

Pilt-CDN-id töötavad peaaegu samamoodi, kuid need keskenduvad ainult piltidele, nagu te arvasite.

Enamasti on toiming teie vaatenurgast sujuv. Kõik teie saidi pildid asendatakse nende CDN-hostitud versioonidega (see tähendab, et piltide URL-id muutuvad).

  • Jetpack on sisseehitatud populaarse kujutise CDN-ga. Saate seda tasuta kasutada, mis on suurepärane. Peamine piirang on see, et see töötab ainult teie postituste, lehtede ja esiletõstetud piltide piltidega. See ei tööta ühegi teie kujunduse moodustava pildi puhul (teema osad, paigutus jne). Need on pildid, mis võiksid tõesti mõnda CDN-i kasutada.
  • Optimole on kujutise optimeerimise peamise funktsiooni osana sisseehitatud CDN. See ei piirdu ainult teie postituste ja lehtedega.

�� 7. tund:

Ühendage oma sait pildi CDN-ga (Jetpack või Optimole) või üldise CDN-iga (MaxCDN / StackPath).

�� Teenige aeglase ühenduse korral kasutajatele väiksemaid pilte

Otsustades, millist pilti kasutaja peaks nägema, pole oluline ainult ekraani suurus. Tõenäoliselt veelgi tähtsam on see, et kui neil on aeglane Interneti-ühendus, ei taha nad tõesti pildi laadimiseks oodata 10 sekundit.

Nendes stsenaariumides on palju parem mõte alandada piltide kvaliteeti laadimisaja eest. Aeglasemal ühendusel olevad kasutajad mõistavad, et nad saavad pilte üldse näha.

Selle saate teha, kasutades võrguteabe API-t. Siin on lahe õpetus kuidas see kõik töötab, kui soovite seda käsitsi rakendada.

Kui soovite, et seda käsitletaks autopiloodil, siis jällegi, Optimole!

�� 8. õppetund:

Esitage aeglasema Interneti-ühenduse kaudu kasutajatele väiksemaid ja tihendatud pilte.

�� Tööriistad tööriistad tööriistad!

Tee ääres mainisin mitmeid tööriistu, mida saate oma saidi piltide edastamise tõhustamiseks kasutada. Siin on kokkuvõte neist:

  • Optimole – võimaldab pilte automaatselt optimeerida, tihendab neid, valib külastaja vaateakna jaoks sobiva pildi suuruse, kuvab pilti CDN-i kaudu, laisklaadib pilte, töötab aeglasema ühenduse kiirusega.
  • ImageOptim ja ImageAlpha – töödelda töölauapiltide pakkimist Macis. Sa võid kasutada TinyPNG Winil. Tehke seda enne piltide üleslaadimist oma saidile.
  • XnConvert – võimaldab teil teisendada pilte WebP-i.
  • a3 Laiska koormus plugin – laisk laadida kõik pildid.
  • Jetpack pistikprogramm – kaasas tasuta CDN-pilt.
  • MaxCDN / StackPath – üldine CDN, mis hoolitseb kogu teie saidi, mitte ainult piltide eest.

tööriistad piltide optimeerimiseks

�� Lisalugemist:

  • Kujutage ette vs WP Smush vs ShortPixel vs Optimole: milline on WordPressi piltide optimeerimiseks kõige parem? Pähe võrdlus
  • Tasuta pildid ajaveebide jaoks – kuidas neid saada & kasuta neid tõhusalt (hoiatus! ilmne nõuanne, andmetega varustatud)
  • 11 viisi WordPressi jõudluse kiirendamiseks
  • Veebisaidi kiiruse optimeerimine: kuidas seda teha 2019. aastal
  • Kiireim WordPress-hostimine – algaja juhend selle leidmiseks

��‍♂️ TL; DR:

Siin on kokkuvõte kõigist ülaltoodud jagatud tundidest:

1. tund:

Ärge minge alati JPG-le. Ennustage, kui suur pilt selle sisu põhjal kujuneb, ja kasutage siis õiget pildi tüüpi.

2. tund:

Kui soovite pilte kiiresti optimeerida, ärge üldse viitsige SVG-sid kasutada. Aeg, mille kulutate nende loomisele, ei tasu ära (ehkki võite sellega nõus olla). PNG-sid saab kasutada palju kiiremini ja kettaruumi tarbimisel mitte palju halvemini.

Mitmel lehel kuvatavate piltide või piisavalt suurte piltidega tegelemisel kasutage WebP-i. See tähendab, kui te ei saa WebP-töötlusega automaatselt hakkama, seda saab teha mõne täiendava tööriista abil. Sel juhul kasutage WebP-d kõikjal. Me räägime sellest sekundi pärast.

3. õppetund:

Tihendage JPG-d, et saavutada vastuvõetav kvaliteeditase võrreldes kettaruumiga.

Tihendage oma PNG-sid alati.

4. tund:

Kasutage oma kujunduse jaoks õigeid pildi suurusi.

Murdepunktide loomine.

Murdepunktide katmiseks looge samast pildist mitu versiooni.

Kasutage piltide kuvamisel atribuute srcset ja Suurused.

Õppetund nr 5:

Veenduge, et teie logod, kaubamärgipildid ja kõik postitustes ja lehtedel kasutatud pildid oleksid HiDPI ekraanide jaoks valmis.

Õppetund nr 6:

Lahtiselt laadige üles klapi all olevad pildid.

7. tund:

Ühendage oma sait pildi CDN-ga (Jetpack või Optimole) või üldise CDN-iga (MaxCDN / StackPath).

8. õppetund:

Esitage aeglasema Interneti-ühenduse kaudu kasutajatele väiksemaid ja tihendatud pilte.

Andke mulle teada, mida arvate kogu väljakutsest, et optimeerida pilte veebi jaoks nii palju kui võimalik. Samuti, mida teete oma piltidega, et neid kiiremini laadida? Jagage kommentaarides.

Ärge unustage liituda meie WordPressi saidi kiirendamise kursusega. Mõne lihtsa parandusega saate laadimisaega vähendada isegi 50–80%:

Kujundus, esitlus ja toimetamine Karol K poolt.

* See postitus sisaldab sidusettevõtte linke, mis tähendab, et kui klõpsate mõnel tootelingil ja ostate toote, maksame selle eest väikest tasu. Ärge muretsege, maksate ikkagi standardsumma, nii et teie kulutused ei ole tasulised.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map