Kuidas WordPressis skaleeritud pilte teenindada

On ilmne, et fotod on meie elu lahutamatu osa. Järelikult ei kujuta me ilma piltideta veebisaiti ettegi. Pildid meelitavad külastajate vaadet ja aitavad korrastada saidi sisu. Pildid muudavad lehe huvitavaks, teaberikkaks ja parandavad kasutajakogemust.

Liiga suured pildid mõjutavad negatiivselt veebisaidi toimivust ja pilte tuleks skaleerida vastavalt aktiivsele teemale. Need on veebisaidi olulised elemendid ja väärivad, et neid näidatakse parimal võimalikul viisil. Väga oluline on skaleeritud piltide serveerimine WordPressi saidil.

Skaleeritud piltide suurused kohanduvad õigeks suuruseks vastavalt HTML-is ja CSS-is määratletule. Siiski ei pööra paljud veebimeistrid sellele olulisele kujundusdetailile tähelepanu. Võtke näiteks 500 x 500 piksliga pilt 50 x 50 pisipildi jaoks. Veebibrauser peab pildi alla laadima ja selle suurust vähendama, et seda saaks külastajale kuvada. On selge, et see on ebatõhus ja aeglustab veebisaiti.

Erinevus eraldusvõimes ei ole nähtav ja seetõttu jääb suurte piltide kaal sageli märkamatuks. Enamik inimesi pole isegi teadlikud, et see eraldusvõime ülekoormus põhjustab probleeme ja probleem jäetakse lahendamata. Nad jätavad probleemi brauseri enda hooleks.

Miks pakkuda WordPressi saidil skaleeritud pilte?

Skaleeritud piltide esitamise peamine põhjus on see, et täiskõrglahutusega pildid aeglustavad veebisaiti ja pikendavad laadimisaegu. Aeglane leht toob kaasa kehva kasutuskogemuse ning selle asemel, et jääda ja tagasi tulla, nad lahkuvad ja jäävad eemale. Kissmetricsi statistika näitab, et lehtedel, mille laadimiseks kulub rohkem kui kolm sekundit, on suurem põrkemäär.

Kui pildisuurused on veebisaidil optimeeritud, on laadimisajad lühemad. Suure tõenäosusega jäävad inimesed veebisaidile kauemaks ja naasevad hiljem. See parandab SEO -d ja veebisaidi asetus tõuseb.

Suured pildid põhjustavad erinevaid probleeme

1. See suurendab pinget brauseri jõudlusele. Brauser peab täitma täiendavaid serveripäringuid. See ei saa pilti kiiresti näidata, kuid selle asemel kulub pildi suuruse muutmiseks aega ja ressursse. Raskete piltidega veebisaitide laadimine võtab kauem aega.
2. Kui suuri kõrge eraldusvõimega pilte kuvatakse veebisaidil väikesena, raiskavad need aega ja laadivad alla andmeid. Seda näiteks siis, kui mobiiltelefonist tehtud selfit kasutatakse töötlemata pisikese Gravatari jaoks.

Kuidas WordPressi veebisaitidel pilte skaleerida

Käsitsi

Alustuseks analüüsige veebisaidil olevaid pilte, kasutades sellist tööriista nagu GTMetrix. GTMetrix on jõudlusanalüüsi tööriist, mille on välja töötanud GT.net. See ettevõte on kuulus kiiruse jälgimise ja optimeerimise ning Pingdomi poolest. Pärast seda, kui GTMetrics veebisaiti analüüsib, loob see aruande. See näitab, millised probleemid leiti ja milliseid täiustusi see soovitab.

Aruande ülevaatamisel pöörake erilist tähelepanu vahekaardile Struktuur. Sellel vahekaardil klõpsake nuppu Õige suurusega pildid. See kuvab vale suurusega piltide loendi.

WordPress ei vähenda võimalusel pilte automaatselt, vaid lisab need saidile ilma töötlemata. Selle probleemi lahendamiseks on kaks võimalust.

Isegi kui pistikprogrammide kasutamine ei ole soovitud viis, on muid võimalusi. Esimene viis piltide skaleerimiseks on nende suurust käsitsi reguleerida, kasutades fotoredaktorit, nagu Photoshop. Võib tunduda, et see meetod on ebaefektiivne, kuid tegelikult pole see nii.

Photoshopis on peale pildi kõrguse ja laiuse reguleerimise rohkem võimalusi. Teine asi, mida siin kontrollida, on pildi eraldusvõime. Enamasti piisab veebirakenduste jaoks hea vaatamiskogemuse jaoks 72 PPI-st.

Teine on piltide skaleerimiseks pistikprogrammi kasutamine. See valik on lihtne ja kiire. WordPressil on selleks oma funktsioon srcset. See tööriist võib teisendada graafikat, näiteks pilte, tundlikeks failideks. Reageerivad pildid kohandatakse automaatselt erinevatele seadmetele ja ekraanisuurustele. Allpool on mõned muud pistikprogrammid, mis teevad pildisuuruste vähendamisel suurepärast tööd.

Optimole

Suurepärane tööriist skaleeritud piltide esitamiseks on Optimole. See on WordPressi pistikprogramm, mis suudab erinevate seadmete jaoks piltide suurust muuta. See muudab automaatselt pildi optimaalset suurust, võttes aluseks erinevat tüüpi seadmeid. Tulemuseks on kvaliteetsed skaleeritud pildid.

Need on mõned funktsioonid, mis muudavad Optimole huvitavaks valikuks:

• Töödeldud pildid on väiksemad, kuid säilitavad oma kvaliteedi.
• See on täielikult automatiseeritud. Küsimus on ainult piltide laadimises.
• Optimole toetab kõiki pildivorminguid.
• See toetab erinevaid pilditüüpe, sealhulgas Retina ja WebP
• See toetab pilvepiltide teeke.
• Optimole teenindab globaalseid CDN-pilte tasuta.
• Soovitud suurust pole vaja arvata ega hinnata. Optimole kasutab külastaja seadme spetsifikatsioone.
• Veebisaitide koostajatele, nagu Elementor, on täielik tugi .

Automaatne pilditöötlusfunktsioon on selle pistikprogrammi suureks plussiks. Pole vaja läbida pikka seadete loendit; Optimole teeb seda kõike ise.

Jaotises Meedia > Optimole näitab pistikprogramm teenuste olekut, samuti kasutust ja saavutatud optimeerimist.

Jaotis Valikud asub vahekaardi Seaded all. Siin on kaks funktsiooni, mis väärivad eraldi mainimist:

1. Luba pildi asendamine. Täiustatud pildi optimeerimise funktsiooni nautimiseks veenduge, et see suvand oleks lubatud.
2. Scale Images & Lazy Load. See on valik, mis võimaldab pilte skaleerida vastavalt külastaja ekraani suurusele. Laisk laadimine kuvab need pildid.

Smushi pildi optimeerimine

Smush Image Optimization, Compression ja Lazy Load on selle pistikprogrammide loendi täisnimi. Piltide suuruse vähendamisel veenduge, et pildi kvaliteet säiliks.

WP Smushi kasutamiseks tuleb see esmalt installida ja aktiveerida. Seejärel ilmub WordPressi armatuurlauale Smushi ikoon. Armatuurlaual kuvatakse Smushi kogutud statistika ja erinevate funktsioonide praegune olek.

Kokkuhoiuandmete kõrval kuvatakse ikoon, mis teavitab kõiki töötlemist vajavaid meediumiteegi pilte. Kui on pilte, mis vajavad töötlemist, on kõige lihtsam minna moodulisse Bulk Smush. See vähendab kõigi märgistatud piltide suurust.

Piltide individuaalseks töötlemiseks minge meediumiteeki ja klõpsake nuppu Kontrolli pilte uuesti. See loob reaalajas värskenduse piltidest, mida tuleks töödelda.

Smushil on funktsioone, mis võimaldavad pilte Smushi oleku järgi filtreerida ja pilte selektiivselt skaleerida.

Smushi pistikprogramm ei töötle videoid ja GIF-faile. Skaleerimata pildifailid näitavad, et Smushi võimsust ei kasutata täielikult ära.

EWWW pildi optimeerija

EWWW pildi optimeerija on ka WordPressi pistikprogramm, mis optimeerib pildi suurusi ja vorminguid. See töötab uute üleslaadimiste ja olemasolevate piltidega. Sellel on suvand, mis skannib kõik veebisaidil olevad pildid ja optimeerib neid.

Selle kasutamise alustamiseks laadige see alla ja installige ning aktiveerige see WordPressi saidi administraatorialas. Armatuurlaua keskkonnas olles klõpsake nuppu Sätted ja seejärel EWWW pildi optimeerija. Jaotises Põhiseaded asuvad erinevad valikud, näiteks piltidelt metaandmete eemaldamine . GIF-i, JPG- ja PNG-vormingus optimeerimise tasemeks tuleks määrata Pixel Perfect. Ainult tasuline versioon võimaldab optimeerida ka PDF-faile.

Vahekaart Suuruse muutmine sisaldab valikut Suuruse muutmise tuvastamine . Piltide suuruse muutmises määrake veebisaidil olevate piltide maksimaalne lubatud kõrgus ja laius. Samuti lülitage sisse suvandid Muuda teiste piltide suurust ja Muuda olemasolevate piltide suurust . Ärge unustage muudatusi salvestada.

ShortPixel

Viimane soovitus skaleeritud piltide esitamiseks on pistikprogramm ShortPixel. See on õige valik neile, kes peavad esitama skaleeritud pilte, kuid kellel on kitsas eelarve. Tasuta versioon pakub 100 pildi skaleerimist kuus.

ShortPixel on lihtne ja hõlpsasti kasutatav. See töötleb pilte automaatselt nende mõõtmeteni, mille kasutaja veebisaidile üles laadides määrab. Lisaks automaatsele valikule on võimalik ka pilte käsitsi töödelda.

Pistikprogramm vähendab pildi suurust kas kadudeta või eraldusvõime kadumisega. See suudab töödelda GIF-, JPEG- ja PNG-pilte ning isegi optimeerida PDF-faile.

Mõtted skaleeritud piltide serveerimise kohta

On selge, et skaleeritud piltide esitamiseks WordPressi saidil on palju võimalusi ja selle tegemine ei pea olema keeruline ega kulukas. Probleem on siis, kui veebisait on pikka aega võrgus olnud ja töödeldavaid pilte on palju.

Piltide skaleerimine on oluline oskus igaühele, kes veebisaiti koostab või haldab. See aitab muuta aeglased veebisaidid kiiremaks ja pakub muid jõudluse eeliseid. Õige pildi spetsifikatsioon parandab mis tahes veebisaidi kiirust.

Kui teile meeldis lugeda seda artiklit WordPressis skaleeritud piltide esitamise kohta, peaksite lugema seda artiklit selle kohta, kuidas muuta telefoninumber WordPressis klõpsatavaks.

Kirjutasime ka mõnest sellega seotud teemast, nagu Facebooki video manustamine WordPressi, WordPressi teemade kustutamine, WordPressi andmebaasi pahavara skannimine, HTML-faili WordPressis üleslaadimine, WordPressi andmebaasi puhastamine, kuidas WordPressi andmebaasis URL-i leida ja asendada ning autorit WordPressis peita