Kako optimizirati slike za spletno uspešnost brez izgube kakovosti

Ali ste vedeli, da lahko optimizacija slik pred nalaganjem v WordPress močno vpliva na hitrost vašega spletnega mesta?


Ko začnejo nov blog, mnogi začetniki preprosto prenesejo slike, ne da bi jih optimizirali za splet. Te velike slikovne datoteke naredijo vaše spletno mesto počasnejše.

To lahko odpravite z uporabo najboljših praks za optimizacijo slik kot del svoje običajne rutinske blogging.

V tem članku vam bomo pokazali, kako optimizirati slike za hitrejše delovanje v spletu, ne da bi pri tem izgubili kakovost. Delili bomo tudi vtičnike za samodejno optimizacijo slike za WordPress, ki vam olajšajo življenje.

Kako optimizirati slike v programu WordPress (korak za korakom)

Ker je to izčrpen vodnik za optimizacijo slike za splet, smo ustvarili enostavno sledljivo vsebino:

    Kaj je optimizacija slike? (Optimizirano proti neoptimiziranim slikam)

    Optimizacija slike je postopek shranjevanja in dostave slik v najmanjši možni velikosti datoteke, ne da bi pri tem zmanjšali splošno kakovost slike.

    Čeprav se postopek sliši zapleteno, je v teh dneh pravzaprav precej enostavno. Uporabite lahko enega od številnih vtičnikov in orodij za optimizacijo slike za samodejno stiskanje slik do 80% brez vidne izgube kakovosti slike.

    Tu je primer optimizirane vs neoptimizirane slike:

    Optimizirane v primerjavi z neoptimiziranimi slikami v WordPressu

    Kot vidite, je lahko ob enaki optimizaciji enaka slika 75% manjša od originala, brez izgube kakovosti.

    Kako deluje optimizacija slik?

    Preprosto povedano, optimizacija slike deluje s pomočjo tehnologije stiskanja, kot sta “Lossy” in “Lossless”, ki pomaga zmanjšati velikost datoteke brez opazne izgube kakovosti.

    Kaj pomeni optimizirati slike?

    Če ste kdaj prejeli priporočilo za optimizacijo slik s podporo za gostovanje v WordPressu ali s pomočjo orodja za hitro testiranje, potem vse to pomeni, da morate zmanjšati velikost datotek svojih slik tako, da jih optimizirate za splet.

    Zakaj je optimizacija slike pomembna? Katere so prednosti optimizacije slike?

    Čeprav je optimiziranje slik veliko, lahko spodaj najdete najboljše:

    • Hitrejša hitrost spletnega mesta
    • Izboljšana SEO lestvica
    • Višja skupna stopnja konverzije pri prodaji in potencialnih kupcih
    • Manj prostora za shranjevanje in pasovne širine (kar lahko zmanjša stroške gostovanja in CDN)
    • Hitrejše varnostne kopije spletnega mesta (zmanjšajo tudi stroške shranjevanja varnostnih kopij)

    Zunaj videoposnetka so slike naslednji najtežji element na spletni strani. Glede na arhiv HTTP, slike v povprečju predstavljajo 21% celotne teže spletne strani.

    Ker vemo, da se spletna mesta hitreje uvrščajo v iskalnike (SEO) in imajo boljše konverzije, je optimizacija slike nekaj, kar mora storiti vsako poslovno spletno mesto, če želi uspeti na spletu.

    Zdaj se morda sprašujete, kako velika razlika lahko v resnici prinese optimizacija slike?

    Glede na študijo Strangeloop lahko ena sekunda zamude pri nalaganju spletnega mesta stane 7% prodaje, 11% manj ogledov strani in 16% zmanjšanje zadovoljstva strank..

    Kako hitrost vpliva na vaše spletno mesto

    Če to ni dovolj razlogov za pospešitev vašega spletnega mesta, morate vedeti, da iskalniki, kot je Google, tudi za hitrejše nalaganje spletnih mest dajejo prednostno obravnavo SEO.

    To pomeni, da lahko z optimizacijo slik za splet izboljšate hitrost spletnega mesta in povečate uvrstitev WordPress SEO.

    Video vadnica

    Naročite se na WPBeginner

    Če imate raje pisna navodila, le preberite.

    Kako shraniti in optimizirati slike za spletno uspešnost?

    Ključ do uspešne optimizacije slike za spletno uspešnost je najti popolno ravnovesje med najmanjšo velikostjo datoteke in sprejemljivo kakovostjo slike.

    Tri stvari, ki igrajo ogromno vlogo pri optimizaciji slike, so:

    • Oblika slikovne datoteke (JPEG v primerjavi z PNG in GIF)
    • Stiskanje (večje stiskanje = manjša velikost datoteke)
    • Dimenzije slike (višina in širina)

    Z izbiro prave kombinacije treh lahko velikost slike zmanjšate do 80%.

    Oglejmo si vse podrobneje.

    1. Oblika slikovne datoteke

    Za večino lastnikov spletnih strani so edini trije slikovni formati, ki so res pomembni, JPEG, PNG in GIF. Izbira prave vrste datotek ima pomembno vlogo pri optimizaciji slike.

    Da bodo stvari preproste, želite uporabljati JPEG-ove fotografije ali slike z veliko barvami, PNG-slike za preproste slike ali kadar potrebujete pregledne slike in GIF samo za animirane slike.

    Za tiste, ki ne poznajo razlike med posameznimi vrstami datotek, je format slike PNG nestisnjen, kar pomeni, da je slika višje kakovosti. Slaba stran je, da so velikosti datotek veliko večje.

    Po drugi strani je JPEG stisnjen format datoteke, ki nekoliko zmanjša kakovost slike, da bi zagotovil bistveno manjšo velikost datoteke.

    Medtem ko GIF uporablja samo 256 barv, skupaj s stiskanjem brez izgub, kar je najboljša izbira za animirane slike.

    Na WPBeginner uporabljamo vse tri formate slik glede na vrsto slike.

    2. Stiskanje

    Naslednja stvar je stiskanje slik, ki igra ogromno vlogo pri optimizaciji slike.

    Na voljo so različne vrste in stopnje stiskanja slike. Nastavitve za vsako se razlikujejo glede na orodje za stiskanje slike, ki ga uporabljate.

    Večina orodij za urejanje slik, kot so Adobe Photoshop, On1 Photo, GIMP, Affinity Photo in drugi, ima vgrajene funkcije za stiskanje slik..

    Slike lahko tudi običajno shranite in nato za lažje stiskanje slike uporabite spletno orodje, kot sta TinyPNG ali JPEG Mini.

    Čeprav je to malo ročno, vam ta dva načina omogočata stiskanje slik, preden jih naložite v WordPress, in to počnemo na WPBeginner.

    Obstaja tudi več priljubljenih vtičnikov WordPress, kot so Optimole, EWWW Image Optimizer in drugi, ki lahko slike samodejno stisnejo ob prvem nalaganju. Mnogi začetniki in celo velike korporacije raje uporabljajo te vtičnike za optimizacijo slik, ker je enostavno in priročno.

    Več o teh vtičnikih WordPress bomo delili kasneje v članku.

    3. Dimenzije slike

    Običajno ima fotografija, ko uvoziš iz telefona ali digitalnega fotoaparata, zelo visoko ločljivost in velike dimenzije datoteke (višina in širina).

    Običajno imajo te fotografije ločljivost 300 DPI in dimenzije, ki se začnejo od 2000 pik in več. Te kakovostne fotografije so zelo primerne za tiskanje ali namizno objavljanje. Niso primerni za spletna mesta.

    Zmanjšanje dimenzij datoteke na nekaj bolj razumnega lahko znatno zmanjša velikost slikovne datoteke. Slike lahko preprosto spremenite velikost s programsko opremo za urejanje slik v računalniku.

    Na primer, optimizirali smo fotografijo z izvirno velikostjo datoteke 1,8 MB, ločljivostjo 300 DPI in dimenzijami slike 4900 × 3200 slikovnih pik.

    Za večjo kompresijo smo izbrali format jpeg in spremenili dimenzije na 1200 × 795 pik ter zmanjšali velikost slikovne datoteke na 103 KB. To je 94% manj od prvotne velikosti datoteke.

    Zdaj, ko poznate tri pomembne dejavnike pri optimizaciji slik, si poglejmo različna orodja za optimizacijo slik za lastnike spletnih strani.

    Najboljša orodja in programi za optimizacijo slik

    Kot smo že omenili, večina programske opreme za urejanje slik prihaja z nastavitvami optimizacije slike in stiskanjem.

    Zunaj programske opreme za urejanje slik obstaja tudi več močnih brezplačnih orodij za optimizacijo slik, ki jih lahko uporabite za optimizacijo slik za splet (z le nekaj kliki).

    Priporočamo, da uporabite ta orodja za optimizacijo slik, preden jih naložite v WordPress, še posebej, če ste perfekcionist.

    Ta metoda vam pomaga prihraniti prostor na disku na vašem računu za gostovanje v WordPressu in zagotavlja najhitrejšo sliko z najboljšo kakovostjo, saj ročno pregledate vsako sliko.

    Adobe Photoshop

    Adobe Photoshop je vrhunska programska oprema, ki vsebuje funkcijo shranjevanja slik, optimiziranih za splet. Preprosto odprite svojo sliko in kliknite na možnost »Datoteka» Shrani za splet.

    Odprlo se bo novo pogovorno okno. Na desni strani lahko nastavite različne oblike slik. Pri formatu JPEG boste videli različne možnosti kakovosti. Ko izberete svoje možnosti, vam bo v spodnjem levem kotu prikazana tudi velikost datoteke.

    Shranjevanje slik, optimiziranih za splet s programom Photoshop

    GIMP

    GIMP je brezplačna in odprtokodna alternativa priljubljenemu Adobe Photoshopu. Uporabite ga lahko za optimizacijo slik za splet. Slaba stran je, da je ni tako enostavno uporabljati kot nekatere druge rešitve na tem seznamu.

    Najprej morate odpreti svojo sliko v GIMP in nato izbrati Datoteka »Izvozi kot možnost. Prikaže se pogovorno okno za shranjevanje datotek. Datoteki dajte novo ime in kliknite na izvoz.

    Izvozi sliko v GIMP

    Prikazane bodo možnosti za izvoz slik. Za datoteke jpeg lahko izberete stopnjo stiskanja, da zmanjšate velikost datoteke. Na koncu kliknite izvozni gumb, da shranite optimizirano slikovno datoteko.

    TinyPNG

    TinyPNG je brezplačna spletna aplikacija, ki uporablja pametno tehniko stiskanja izgub, da zmanjša velikost datotek PNG. Vse, kar morate storiti, je, da obiščete njihovo spletno mesto in naložite svoje slike (preprosto povleci & padec).

    Uporaba TinyPNG za optimizacijo slik za WordPress

    Stisnili bodo sliko in vam dali povezavo za prenos. Za stiskanje slik JPEG lahko uporabite njihovo sestrinsko spletno mesto TinyJPG.

    Imajo tudi razširitev za Adobe Photoshop, ki jo uporabljamo kot del našega urejanja slik, saj združuje najboljše od TinyPNG in TinyJPG znotraj Photoshopa..

    Za razvijalce imajo vmesnik API za samodejno pretvorbo slik, za začetnike pa WordPress vtičnik, ki lahko to samodejno naredi za vas (več o tem kasneje).

    JPEG Mini

    JPEGmini uporablja tehnologijo stiskanja brez izgub, ki znatno zmanjša velikost slik, ne da bi to vplivalo na njihovo zaznavno kakovost. Primerjate lahko tudi kakovost izvirne slike in stisnjene slike.

    JPEGMini spletno orodje za stiskanje slik

    Brezplačno lahko uporabite njihovo spletno različico ali pa program kupite za računalnik. Imajo tudi plačljiv API za avtomatizacijo postopka za vaš strežnik.

    ImageOptim

    ImageOptim je pripomoček za Mac, ki omogoča stiskanje slik brez izgube kakovosti z iskanjem najboljših parametrov stiskanja in odstranjevanjem nepotrebnih barvnih profilov.

    ImageOptim

    Windows alternativa temu je Trimage.

    Najboljši vtičniki za optimizacijo slik za WordPress

    Verjamemo, da je najboljši način za optimizacijo slik tako, da jih naredite, preden jih naložite v WordPress. Če pa imate spletno mesto z več avtorji ali potrebujete avtomatizirano rešitev, lahko poskusite vtičnik za stiskanje slike WordPress.

    Spodaj je seznam najboljših vtičnikov za stiskanje slike WordPress:

    1. Optimole – priljubljen vtičnik ekipe, ki stoji za ThemeIsle.
    2. EWWW orodje za optimiziranje slik
    3. Stisnite JPEG & Slike PNG – vtičnik zgoraj omenjene ekipe TinyPNG.
    4. Predstavljajte si – vtičnik priljubljene ekipe vtičnikov WP Rocket.
    5. Orodje za optimiziranje slik ShortPixel
    6. WP Smush
    7. reSmush.it

    Uporaba katerega koli od teh vtičnikov za optimizacijo slike WordPress vam bo pomagala pospešiti spletno mesto.

    Končne misli in najboljše prakse za optimizacijo slik

    Če ne shranjujete slik, optimiziranih za splet, morate to začeti zdaj. Na hitrosti vašega spletnega mesta bo zelo pomembno, vaši uporabniki pa se vam bodo zahvalili za to.

    Da ne omenjam, hitrejša spletna mesta so odlična za SEO in verjetno boste opazili povečanje uvrstitve svojih iskalnikov.

    Zunaj optimizacije slike sta dve stvari, ki vam bosta bistveno pomagali pospešiti spletno mesto, uporaba vtičnika za predpomnjenje WordPress in uporaba WordPress CDN.

    Lahko pa uporabite tudi upravljano podjetje za gostovanje WordPress, saj pogosto ponujajo predpomnjenje in CDN kot del platforme.

    Upamo, da vam je ta članek pomagal naučiti, kako optimizirati slike v WordPressu. Morda boste želeli pogledati tudi naš vodič o tem, kako izboljšati svojo varnost WordPress in najboljše WordPress vtičnike za poslovna spletna mesta.

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