Kas soovite pilte oma WordPressi saidile üles laadida, kuid pole kindel, mis suuruses või failitüübis pildid peaksid olema? Kas te pole veebi jaoks piltide suuruse muutmise ja tihendamise protsessiga tuttav? Selles artiklis selgitan, miks õige pildisuuruse kasutamine on teie veebisaidi jaoks oluline, ning näitan teile, kuidas tasuta fotoredaktoriga GIMP kasutades piltide suurust muuta ja tihendada.

Miks on veebisaidi piltide suuruse muutmine oluline?

Alustame sellest, miks on veebisaidi piltide suuruse muutmine nii oluline.

Järgi WordPress.org, mängib pildi üldine "füüsiline suurus" veebisaidi lehe toimivuses tohutut rolli. "Faili suurus [pildi] määrab aja, mis kulub teie lehe laadimiseks; mida suurem on faili suurus… seda kauem võtab [lehe] laadimine aega. Teisisõnu, suure failisuurusega faili üleslaadimine oma veebisaidile aeglustab iga lehe toimivust, millele sisu lisate. Tavaliselt kuvatakse see teie saidi analüüsiandmetes aeglasema lehe laadimiskiirusena.

"Faili suurus [pildi] määrab aja, mis kulub teie lehe laadimiseks; mida suurem on faili suurus… seda kauem võtab [lehe] laadimine aega.

-WordPress.org

Lehekülje laadimise kiirus, mida nimetatakse ka lihtsalt "kiirus”, näitab, kui kiiresti teie lehe sisu laaditakse SEO sait Moz. Aeglasemate lehtede kasutamine võib kaasa tuua suuremapõrkemäärad”, mis on väljamõeldud mõõdik, mis kajastab seansse, mil saidi külastaja lahkub teie saidilt pärast ühe lehe vaatamist. Aeglasemad lehed võivad ka vähendada aega, mille külastajad teie saidi lehtedel veedavad, kuna inimesed võivad lehe sisu laadimist ootama jääda ja teie saidilt kiiremini lahkuda.

Need mõõdikud on olulised, sest tavaliselt soovite, et kasutajad veedaksid teie saidil rohkem aega ja vaataksid teie saidil rohkem lehti.

Need on olulised ka seetõttu, et mängivad rolli teie saidi asetuses otsingumootori tulemuste lehtedel ehk SERP-del. SERPs on lihtsalt tulemuste lehed, mis kuvatakse, kui sisestate Google'isse sõna või fraasi ja vajutate sisestusklahvi. Kuna suuremad pildid viitavad kehvatele veebidisaini tavadele ja mõjutavad teie saidil viibimise kogemust negatiivselt, võivad otsingumootorid, nagu Google, karistada saidile suuremate piltide ja asetage oma veebisait teistele paremini toimivatele veebisaitidele alla.

Mida madalamal on teie veebisait näiteks Google'is, seda vähem liiklust teie sait saab ja seda rohkem liiklust suunatakse teie konkurentidele, kes asuvad otsingutulemustes teist kõrgemal.

Vähendades oma veebisaidil olevate piltide failisuurust, saate oma kiirus ja seega parandada muid mõõdikuid, nagu poistumisprosentti ja aeg lke, et lõpuks parandada oma paremusjärjestust otsingumootorites.

Pange tähele, et otsingu paremusjärjestuses on palju muid olulisi muutujaid, seega on piltide parandamine vaid osa kindlast SEO (Otsingumootori optimeerimise) strateegia. Siiski on see kindlasti väga oluline, et aidata teie saidil olla kõrgem sellistes kohtades nagu Google, et suurendada teie saidi liiklust.

Kuidas GIMPis WordPressi piltide suurust muuta

Kuidas siis WordPressi jaoks piltide suurust õigesti muuta?

Saate vähendada pildi faili suurust, vähendades lihtsalt pildi üldist suurust kasutades ketendamine ja koristuse enne selle oma veebisaidile üleslaadimist. Lisaks saate rakendada nn.kokkusurumine” oma pildile, et selle suurust veelgi vähendada.

GIMP, tasuta ja avatud lähtekoodiga fotoredaktor, suudab täita kõiki neid ülesandeid, eksportides samal ajal soovitatud "järgmise põlvkonna" failivormingutesse, et veelgi vähendada teie piltide faili suurust ja parandada saidi jõudlust.

Skaleerige oma pilti

Selle protsessi alustamiseks avage GIMP-is pilt, mille soovite oma saidile üles laadida. Seda saate teha, pukseerides oma pildi arvutist GIMP-i pildiaknasse või avage GIMP-is lihtsalt Fail>Ava.

Kui kasutate meetodit Fail>Ava, navigeerige kuvatavas dialoogis "Ava pilt" arvutis pildi asukohta ja topeltklõpsake pildifailil pärast selle leidmist, et see GIMP-is avada (või klõpsake nuppu nupp "Ava" dialoogiakna paremas alanurgas).

GIMP-akna ülaosas on funktsioon nimega "Tiitliriba" (punane nool ülaloleval pildil). Siin näete oma pildi praegusi mõõtmeid (fotol suurendatud roheline kast). Minu pilt on 1920 × 1280 – esimene number 1920 tähistab minu pildi laiust (pikslites) ja teine ​​number, 1280, tähistab minu pildi kõrgust. Pildi lõplikud mõõtmed, mida soovite oma pildi jaoks kasutada, sõltuvad sellest, kus WordPressis kavatsete pilti kasutada, ja ka sellest, millist teemat kasutate.

Selle õpetuse jaoks muudan oma pildi suurust standardsuurusele 1200 × 630 pikslit, mis on soovitatav ajaveebipostituste piltide jaoks.

Seda silmas pidades tahan esimese asjana oma pilti kärpida nii, et minu algse pildi kuvasuhe ühtiks soovitatud suuruse kuvasuhtega. Selleks haaran oma kärpimistööriista, vajutades klaviatuuril klahvikombinatsiooni Shift+c või klõpsates GIMP-i tööriistakastis kärpimistööriista ikooni (punane nool ülaloleval pildil).

Järgmisena märgin selle tööriista tööriistasuvandites ruudu „Fikseeritud” (roheline nool) kõrval ja klõpsan rippmenüül, et valida „Kuvasuhe” (sinine nool).

Kirjutan kuvasuhte määramiseks rippmenüü all olevale tekstiväljale (kollane nool) tekstiväljale "1200:630". See vastab soovitatud pildi suuruse kuvasuhtele, mida ma soovin, et mu lõplik pilt oleks.

Kärpimistööriista kasutades klõpsan nüüd ja lohistan kärpimisala joonistamiseks hiirega üle pildi. Kui vabastan hiire, muutub kõik kärpimisalast väljapoole jääv osa tuhmiks (ülaloleval pildil punane nool – eeldades, et tööriistasuvandites on märgitud valik „Esiletõstmine”, mis tavaliselt on vaikimisi märgitud).

Vaikimisi on minu kärpimisala juhikuteks seatud "Keskjooned" (ülaloleval pildil kollane nool). Seda sätet saan muuta tööriistasuvandite allosas olevate juhiste rippmenüü abil. Näiteks muudan oma juhendid "Kolmandade reegliks" (roheline nool). Erinevad siinsed juhendi valikud põhinevad pildistamise põhimõtetel, mis teeb kompositsiooni kadreerimise nende põhimõtete järgi lihtsaks.

Saate hõljutada kursorit kärpimisala mis tahes külje või nurga kohal (st ülaltoodud pildil punase noolega tähistatud esiletõstetud ala kohal), seejärel klõpsake ja lohistage kärpimisala piiri suuruse muutmiseks. Pange tähele, et saate alati näha oma kärpimisala suurust väljadel "Suurus", mis asuvad tööriista suvandites (ülaloleval pildil on roheline). Soovite jätta kärpimisala üldsuuruse suuremaks kui pildi lõplik suurus 1200 × 630.

Samuti võite klõpsata ja lohistada hiirt kärpimisala keskel (punane nool), et pildil kärpimist ümber paigutada.

Kui olete pildi kärpimiseks valmis, klõpsake kärpimisalal üks kord ja teie pilt kärbitakse.

Pange tähele, et kui tööriista suvandite suvand „Kustuta kärbitud pikslid” on märkimata (ülaloleval pildil olev roheline nool), kuvatakse pildi ümber kollase punktiirjoone (punane nool) kaudu ikkagi teie algne pildipiir. Algse pildi saate taastada ja kärpimise tühistada, valides Pilt> Sobita lõuend kihtidele. Eksporditakse ainult teie pildi lõuendi piiri sees olev ala.

Meie pilt on nüüd kärbitud soovitud kuvasuhteni, kuid kui vaatate veel kord meie pildi mõõtmeid pealkirjaribal, näete, et pildi suurus on 1532 × 804 (ülaloleval fotol on roheline piirjoon ja suurendatud – teie mõõtmed on tõenäoliselt veidi erinevad olenevalt sellest, kui suureks te oma pildile kärpimisala joonistasite). Peame nüüd oma pilti skaleerima, et see vastaks soovitud mõõtmetele.

Selleks avage Pilt>Scale Image (punane nool).

Kuvatavas kastis „Kujutise mõõtmine” jaotises „Pildi suurus” veenduge, et kastide „laius” ja „kõrgus” kõrval olev ketilingi ikoon oleks lingitud (ülaloleval fotol punane nool). Seejärel muutke oma pildi "laius" väärtuseks 1200 (roheline nool). Vajutage tabeldusklahvi. Pildi kõrgust värskendatakse automaatselt väärtusele 630. Jaotises „Kvaliteet” veenduge, et pärast skaleerimist parima pildikvaliteedi saavutamiseks oleks rippmenüü „Interpolatsioon” (sinine nool) seatud valikule „NoHalo” või „LoHalo”. (Interpoleerimise kohta lisateabe saamiseks vaadake minu selleteemalist õpetust).

Pildi skaleerimiseks vajutage nuppu "Skaleeri" (kollane nool).

Kui skaleerimine on lõpetatud, vaadake pealkirjaribal pildi mõõtmeid. Nüüd peaksite nägema pildi suurust 1200 × 630 – täpselt sellist suurust, mida soovime! Mida me nüüd teeme?

Tihendage oma pilt, eksportides seda WebP-sse

Pildi kärpimine ja skaleerimine vähendas faili suurust, vähendades pildi kõrgust 1920-lt 1200-le ja laiust 1280-lt 630-le, kuid me saame pildi suurust veelgi vähendada, rakendades pildi eksportimisel tihendamist.  

Seega peame nüüd eksportima pildi failivormingusse, mis rakendab pildile tihendamist ilma pildi kvaliteeti märkimisväärselt vähendamata. Kuigi JPEG-failid on alati hea valik, on nüüd saadaval veelgi parem valik: WebP.

WebP-vorming kasutab rohkem tihendamist kui JPEG, mõjutades samal ajal pildi kvaliteeti vähem kui JPEG. Teisisõnu saate väiksema failisuurusega parema välimusega pildi. Lisaks toetavad WebP-vorminguid kõik 5 parimat veebibrauserit.

WebP-sse eksportimiseks valige Fail> Ekspordi kui (punane nool).

Klõpsake jaotises „Kohad” (rohelise joonega) mis tahes kausta, et valida arvutis pilt, kuhu soovite oma pildi salvestada. Saate lihtsalt topeltklõpsata kaustal selle sisestamiseks ja vaadata, millises kaustas olete pealkirja „Salvesta kausta” (punane nool) kõrval. Seejärel nimetage oma pilt soovitud viisil ümber – lihtsalt veenduge, et lõpetaksite oma pildi nime laiendiga „.webp” (sinine nool), et eksportida pilt WebP-vormingus. Kui olete valmis, klõpsake akna paremas alanurgas nuppu Ekspordi (kollane nool).

Järgmisena ilmub dialoog "Ekspordi pilt WebP-na". Veenduge, et märkeruut „Kaodudeta” poleks märgitud (punane nool). Tavaliselt määran "Image Quality" väärtuseks 80 (sinine nool – see on protsent, nii et mida madalam on protsent, seda madalam on pildi kvaliteet, kuid seda väiksem on pildifaili suurus). Kui teie pilt ei sisalda läbipaistvust (st ilma taustata logo), ei pea te muretsema „Alfa-kvaliteedi” liuguri pärast (tegelikult langetasin minu tehtud katses alfakvaliteeti 100-lt 90-le suurendas läbipaistva taustaga pildi faili suurust 8.50 kb-lt 8.52 kb-le). Rippmenüü „Allika tüüp” saate hoida valikuna „Vaikimisi”.

See, kas soovite mõnda metaandmete valikut, sealhulgas Exif-andmeid, ITPC-andmeid ja XMP-andmeid, kontrollida või tühistada, on teie otsustada. Exif- ja XMP-andmed on tavaliselt teie kaamera määratud metaandmed, mis kirjeldavad teavet teie foto kohta, nagu kasutatud kaameramudelit või kasutatud objektiivi tüüpi. Seevastu ITPC-d kasutavad ajakirjanduse esindajad ja see määrab teie pildile teabe, nagu omandiõigus, õigused ja litsentsid. Kui te pole kindel, mida teha, jätke need valikud märgituks.

Samuti võite jätta valiku „Salvesta värviprofiil” märkimata, kuna enamik brausereid kasutab teie pildi kuvamiseks automaatselt sRGB värviruumi, mida GIMP kasutab. Kui kasutate teist värviprofiili, soovite selle märgituks jätta. Samuti, kui olete mures, et pilti ei kuvata teatud brauserites õigesti, lisab selle märgituks jätmine pildi üldisele suurusele vaid mõne kb.

Lõpuks võib suvand "Salvesta pisipilt" jääda märkimata, mis säästab meid veelgi mõne kilobaiti.

Pildi WebP-vormingusse eksportimiseks klõpsake nuppu Ekspordi (ülaloleval pildil kollane nool). Kui võrrelda eksporditud WebP-faili JPEG-failiga, mis on sama suurusega ja mille kvaliteet on samuti seatud väärtusele 80, on WebP-kujutis umbes 30 kb ehk ligikaudu 25% väiksem kui JPEG.

Nüüd saate oma WordPressi saidile sisse logida ja navigeerida lehele või postitusele, kuhu soovite oma pildi üles laadida, või lihtsalt navigeerida peamise navigeerimisriba abil jaotisse "Meedia" ja pukseerida oma pilt meediumiteeki. Minu puhul navigeerin põhinavigeerimisriba (punane nool ülaloleval pildil) jaotisesse „Postita” ja klõpsan selle ajaveebi postituse muutmiseks valikul „Blogipostitus 1” (sinine nool).

Seejärel avan postituse seadete külgriba (punane nool) ja kerin alla jaotiseni "Esiletõstetud pilt" ja laiendan seda jaotist (sinine nool). Seejärel klõpsan pildil, et asendada see oma uue pildiga.

Navigeerin vahekaardile „Failide üleslaadimine” (punane nool) ja saan oma pildi arvutist WordPressi pukseerida (sinised nooled).

Lõpuks klõpsan selle muudatuse rakendamiseks nuppu „Määra esiletõstetud pilt” (punane nool).

Lehe värskendamiseks uue esiletoodud pildiga klõpsake nuppu „Värskenda” (punane nool).

Kui klõpsan nupul „Kuva postitus” (sinine nool)…

…näete nüüd uut esiletõstetud pilti minu ajaveebi ülaosas.

Selle õpetuse jaoks on kõik! Kui soovite WordPressi veebisaidi kujundamise kohta lisateavet, soovitan tutvuda minuga WordPress 6.0 mittekodeerijatele mõeldud kursus! Või kui soovite GIMP-i kohta rohkem teada saada, vaadake minu lehte GIMP 2.10 meistriklass Udemy kohta!   

Telli DMD uudiskiri

Telli DMD uudiskiri

Registreeruge, et saada uusi õpetusi, kursuste värskendusi ja värskeimaid uudiseid oma avatud lähtekoodiga tarkvara kohta!

Te olete edukalt Tellitud!

Pin See Pinterest