Skip to content

Kõik WordPressist, veebiarendusest — ja mitte ainult

🖼 Pildi optimeerimine WordPressis: täielik juhend

🖼 Pildi optimeerimine WordPressis: täielik juhend

Laadisid telefonist tosin fotot üles ja sait hakkas roomama. Leht avaneb kuus sekundit, Google langetab su pingereas su positsiooni ja majutusteenus saadab kettaruumi hoiatusi. Kõlab tuttavalt? HTTP Archive'i andmetel moodustavad pildid 2026. aasta seisuga umbes 45% keskmise veebilehe mahust. Mitme gigabaidise meediakoguga saidi puhul tähendab see otseseid kahjusid: põrked, põhjalasknud SEO, puhvitud varukoopiad. Sa saad selle ühe õhtuga korda teha.

💡 Kiirülevaade:

  • Teisenda JPEG ja PNG WebP- või AVIF-vormingusse: failimaht kahaneb sama visuaalse kvaliteedi juures veerandi võrra või rohkem.
  • Seadista automaatne suuruse muutmine Imsanity või Smush abil: hiiglaslikud telefonist üleslaaditud pildid jäävad minevikku.
  • Luba laisklaadimine: WordPress teeb seda alates versioonist 5.5 ühe linnukesega karbist võttes.
  • Paigalda tihendusplugin (Smush, ShortPixel või EWWW): see tihendab su meediakogu hulgi ja koristab vanad failid.
  • Täida iga pildi alt-tekst: otsingumootorid näevad pilte ainult selle kaudu.

Piltide ettevalmistamine enne üleslaadimist

Näide pildi suuruse muutmisest enne üleslaadimist

4000 piksli laiuse foto üleslaadimine blogisse, mille sisuala on 750 pikslit lai, on mõttetu. WordPress loob küll väiksemaid koopiaid, kuid originaal jääb surnud raskuseks. Enne üleslaadimist muuda pildi suurus 1200-1600 piksli laiuseks, et jätta ruumi võrkkestaekraanide jaoks. Tööriistad: sisseehitatud Paint, veebipõhine Easy Resize või ükskõik milline redaktor.

JPEG ja PNG pildivormingute võrdlus

Vormingureegel: fotod saavad JPEG, logod ja tekstiga ekraanipildid saavad PNG. Alates 2020. aastatest on WebP (25-34% kergem kui JPEG, Google'i andmetel) ja AVIF (kuni 50% kergem) muutunud veebistandarditeks. Saad teisendada Squooshi kaudu või lasta pluginaga tegeleda; peaaegu kõik allpool loetletud pluginad oskavad automaatselt WebP koopiaid luua.

Kvaliteet: JPEG-i langetamine 12-lt 8-le (Photoshopi skaala) vähendab faili suurust poole võrra ilma nähtava erinevuseta. Veebistandard on 80-85%. Tasuta TinyPNG teeb sama, kui lohistad faili brauserisse.

Failinimed: mitte IMG_4827.jpg, vaid how-to-compress-wordpress-images.jpg. Ei mingeid tühikuid, ei mingeid erimärke, lisa märksõna. Otsingumootorid arvestavad failinimesid piltide indekseerimisel.

Metaandmed pärast üleslaadimist

Fail on üles laaditud, aga sinu töö pole veel tehtud. Alt-tekst: 4-8 sõna, kirjeldav, koos märksõnaga. Mitte "foto1", vaid "WebP ja JPEG vormingute võrdlus WordPressis". Pealkiri ja kirjeldus aitavad meediateegis ja panustavad SEO-sse. WordPressi sisseehitatud redaktor võimaldab kohe pärast üleslaadimist pöörata, kärpida ja skaleerida.

Kui vahetasid teemat või registreerisid uued suurused funktsiooniga add_image_size(), siis Regenerate Thumbnails plugin (miljon paigaldust) loob kõik suurused ühe klõpsuga uuesti.

Regenerate Thumbnails plugin hulgitöötluse liides

Tihenduspluginad: võrdlus

Käsitsi ettevalmistus töötab suurepäraselt uute üleslaadimiste puhul. Aga gigabaidid juba üles laaditud faile nõuavad pluginaid: need tihendavad, teisendavad WebP/AVIF vormingusse ja töötlevad sinu meediateegi massiliselt.

Plugin

Tasuta

WebP/AVIF

Laisklaadimine

CDN

Paigaldusi

Smush

Jah, piiramatu

WebP+AVIF Pro-s

Jah

Jah (Pro)

1M+

ShortPixel

100 krediiti kuus

Jah

Jah

Jah

300K+

EWWW

Jah, piiramatu

WebP tasuta, AVIF Pro-s

Jah

Jah (Pro)

Aktiivne

TinyPNG

500 krediiti kuus

Jah

Ei

Ei

Aktiivne

Imsanity

Jah

Ei (ainult suuruse muutmine)

Ei

Ei

200K+

Optimus

100 KB faili kohta

WebP HQ-s

Ei

Ei

30K+

Smush

Miljon paigaldust, hinnang 4,8. Tasuta versioon: tihendus ilma nähtava kvaliteedikaota, automaatne suuruse muutmine, laisklaadimine, Directory Smush meediateegiväliste kaustade jaoks. Pro (6 $ kuus): WebP, AVIF, CDN 119 serveri ulatuses, automaatne laiuse/kõrguse parandus CLS-i kõrvaldamiseks. Miinus: üle 5 MB failid jäetakse tasuta versioonis vahele. 🔗 Smush WP.org-is

ShortPixel

ShortPixel plugin pildi tihendamise liides

300K+ paigaldust. Kolm tihendusrežiimi (kadudeta, kadudega, läikiv), AI loodud alt-tekst enam kui 100 keeles, taustarežiim ilma brauseri vahekaarti avatuna hoidmata. Tihendab JPEG, PNG, GIF, WebP, AVIF ja PDF faile. 100 krediiti kuus tasuta, piiramatu hinnaga 9,99 $ kuus. 🔗 ShortPixel WP.org-is

EWWW Image Optimizer

Ainus plugin täielikult lokaalse tihendusega (jpegtran, optipng, cwebp, sinu serveri tööriistad). Tasuta: piiramatu tihendus, WebP, laisklaadimine koos automaatse skaleerimisega, WP-CLI. Pro: AVIF, CDN, vesimärgid, PDF. Miinus: seadistamine on keerukam kui konkurentidel. 🔗 EWWW WP.org-is

TinyPNG

TinyPNG plugin pandalogoga pildi tihendamiseks

Seesama panda saidilt tinypng.com pistikprogrammina. Pakib JPEG, PNG, WebP, teisendab AVIF-vormingusse. 500 krediiti kuus tasuta, mis teeb umbes 50-100 fotot, kui arvestada WordPressi pildisuurusi. Liides on ülimalt lihtne, pakkimine toimub ilma nähtava kvaliteedikaota. Miinus: puudub CDN ja laisklaadimine. 🔗 TinyPNG WP.org-is

Imsanity

Imsanity plugin automaatseks pildi suuruse muutmiseks

Üle 200 000 paigalduse, hinne 4,9. Ei paki, vaid muudab suurust. Määra maksimaalne laius ja kõrgus ning iga üleslaaditud fail skaleeritakse automaatselt. Autor: Shane Bishop (sama arendaja, kes on EWWW taga). Ideaalne paar: Imsanity automaatseks suuruse muutmiseks + EWWW pakkimiseks. Täiesti tasuta. 🔗 Imsanity WP.org-is

Optimus

Optimus plugin seaded pildi optimeerimiseks

Üle 30 000 paigalduse KeyCDN-i meeskonnalt. Minimaalne pistikprogrammi maht (0,19 MB), serverid Saksamaal, failid kustutatakse kohe pärast töötlemist. Tasuta versioon on piiratud 100 KB faili kohta (sisuliselt demo). HQ-versioon eemaldab piirangud ja lisab WebP-toe. 🔗 Optimus WP.org-is

Laisklaadimine

Alates versioonist 5.5 lisab WordPress kõigile laiuse ja kõrgusega piltidele natiivse loading="lazy" atribuudi. Enamiku saitide jaoks on see piisav. Kui vajad rohkemat, on siin mõned pistikprogrammid:

Lazy Load for Videos plugin videote viivitatud laadimiseks

Lazy Load for Videos asendab YouTube'i ja Vimeo mängijad klikitava pisipildiga. Video laaditakse alles pärast klikki, nii et JavaScript ei aeglusta lehte.

BJ Lazy Load plugin viivitatud sisu laadimiseks

BJ Lazy Load on kergekaaluline pistikprogramm piltide, pisipiltide, gravataride ja iframe'ide jaoks, kasutades läbipaistvat kohatäidet.

a3 Lazy Load plugin viivitatud pildi laadimiseks

a3 Lazy Load on mobiilikeskne, välimusefektidega (haihtumine, libisemine) ja WooCommerce'i toega.

Rocket Lazy Load plugin viivitatud laadimiseks

Rocket Lazy Load WP Medialt (WP Rocketi taga olev tiim) asendab pildid ja iframe'id kohahoidjaga. Ei toeta videot, ainult pilte ja raame.

Praktikas piisab kombinatsioonist „native lazy load + tihendusplugin koos sisseehitatud laisa laadimisega (Smush või EWWW)". Paigalda eraldi plugin ainult siis, kui tavatööriistadest jääb puudu.

Edasijõudnute tööriistad

Enne ja pärast liugurefekt Twenty Twenty pluginaga

Twenty Twenty on tasuta enne/pärast liuguriga plugin. See asetab kaks pilti üksteise peale ja annab lugejatele liuguri nende võrdlemiseks [twentytwenty] lühikoodi kaudu. Ideaalne optimeerimise juhtumiuuringute jaoks. 🔗 Twenty Twenty WP.org-is

Draw Attention loob interaktiivseid levialasid mis tahes pildi peale.

Draw Attention plugin interaktiivsete piltide loomiseks

Hõlju kohal, et näha vihjet, klõpsa, et järgida linki. Tasuta versioon: üks interaktiivne pilt. Pro (hinnakiri arendaja veebisaidil): piiramatu arv pilte, lightbox'id, 20 värvipaletti.

Täppide loomine Draw Attention pluginas

Kasutusjuhud: interaktiivsed kaardid, diagrammid, korruseplaanid, infograafika. 🔗 Draw Attention WP.org-is

Kohandatud pildisuurused koodi abil

Kohandatud suuruste registreerimiseks lisa functions.php faili järgmine:

1function custom_image_sizes() {
2 add_image_size( 'custom-medium', 480, 360, true );
3 add_image_size( 'custom-large', 1200, 900, true );
4}
5add_action( 'after_setup_theme', 'custom_image_sizes' );
6
7function show_custom_sizes( $sizes ) {
8 return array_merge( $sizes, array(
9 'custom-medium' => __( 'Средний (кастомный)', 'textdomain' ),
10 'custom-large' => __( 'Большой (кастомный)', 'textdomain' ),
11 ));
12}
13add_filter( 'image_size_names_choose', 'show_custom_sizes' );
Regenerate Thumbnails plugin hulgitöötluse liides

Pärast koodi sisestamist ilmuvad uued suurused pildi lisamisel rippmenüüsse. Olemasolevate failide puhul käivita Regenerate Thumbnails.

⁉️🤔 Korduma kippuvad küsimused

Milline on parim tihendusplugin algajale?

Smush: paigalda, aktiveeri, unusta. Tasuta versioon tihendab automaatselt üleslaadimisel ja pakub ühe klõpsuga hulgiti optimeerimist. WebP ja AVIF on Pro-versioonis, kuid alguses piisab põhifunktsioonidest.

Mis vahe on WebP-l ja AVIF-il ning kumba peaksin valima?

WebP: sääst võrreldes JPEG-ga (vt Google’i andmeid vormingute osas), toetatud kõigis brauserites. AVIF: kuni 50% kergem kui JPEG, Safari tugi alates 2023. aastast. Soovitus: WebP kui turvaline vaikimisi valik, AVIF maksimaalse ribalaiuse säästu saavutamiseks.

WordPress juba tihendab JPEG-sid üleslaadimisel, miks kasutada pluginat?

WordPressi sisseehitatud tihendus kasutab lihtsat algoritmi fikseeritud kvaliteeditasemel. Pluginad (Smush, ShortPixel, EWWW) kasutavad täiustatud algoritme ja pigistavad välja täiendava säästu sama visuaalse kvaliteedi juures. Lisaks teisendamine WebP/AVIF vormingusse, mida tuumik ei tee.

Kas mul on vaja laiska laadimist, kui mu sait on kiirel hostingul?

Laisk laadimine ei säästa mitte serveri aega, vaid külastaja ribalaiust ja esimese vaate renderduskiirust. WordPress 5.5+ sisseehitatud loading="lazy" on juba lubatud ega vaja seadistamist.

Kuidas kontrollida, kui palju pildid mu saiti aeglustavad?

GTmetrix näitab konkreetseid faile koos tihendussoovitustega. Google’i PageSpeed Insights pakub üksikasjalikku jaotust: „Serve images in next-gen formats", „Properly size images", „Efficiently encode images". Mõlemad on tasuta.

Kokkuvõte: milline plugin valida

Piltide korras hoidmine ei ole ühekordne puhastus, vaid seadistus, mis töötab aastaid. Kuluta üks õhtu paigaldamisele ja plugin teeb edaspidi kõik automaatselt.

  • Uus blogi, minimaalne peavalu: Smush Free. Tihendamine üleslaadimisel, hulgiti optimeerimine, laisk laadimine ühes pluginas.
  • WooCommerce’i pood: ShortPixel. AI genereerib alt-teksti sadadele toodetele, taustarežiim ilma vahekaarti avatuna hoidmata.
  • Oma serveris majutatud, täielik kontroll: EWWW. Kohalik tihendamine ilma väliste API-deta, piiramatu maht.
  • Maksimaalne sääst: TinyPNG + Imsanity. See kombinatsioon tegeleb nii hiiglaslike üleslaadimiste kui ka pundunud JPEG-dega.
  • Fotograaf/portfoolio: EWWW või ShortPixel kadudeta režiimis. Kvaliteet säilib, metaandmed puhastatakse.

Alusta tasuta Smushiga: see näitab sulle, kui palju ruumi sa juba praegu raiskad. Millise plugina sina valisid? Jaga kommentaarides.