Optimalizálja képeit előre meghatározott képméretekkel [WordPress tipp]

A weboldalakon található képek optimalizálása ijesztő feladat. Kiválaszthatja, hogy kevesebb képet, tömörített képet, spritet vagy svg-t használjon; a lista folytatódik. Az a hely, ahol sok WordPress webhely ki van kapcsolva, a képméretek meghatározása, ami a kulcsfontosságú szempont a tartalom-nehéz helyek optimalizálásában.

A képméretek létfontosságúak, mivel a képeket automatikusan a képek feltöltésekor megadott méretnek megfelelően hozzák létre. Ez biztosítja, hogy még akkor is, ha 3000px széles eredeti képe van, soha nem használják, ha elegendő egy 600px kép. Ideális esetben egy 600px széles hely 600px széles képet használjon a nagyobb méret csökkentése helyett.

Ebben a cikkben végigmegyek milyen képméretek vannak és hogyan határozzák meg őket.

Hogyan kezeli a WordPress képeket

Ha valaha beillesztett egy képet egy WordPress cikkbe, akkor a képméret-választónak kellett volna lennie. Ez lehetővé teszi a képek kis, közepes és nagy változatainak beillesztését. Ezek tényleges méretei módosítható a WordPress beállításaiban.

Amikor a képet egy WordPress-en keresztül tölti fel, ezek a képek változatait generálják és külön tárolják. Például, ha 1200 × 800 képet töltött fel, a WordPress 100 × 100, 600 × 400 és 900 × 600 változatot hozhat létre. Ha beilleszt egy képet és kiválasztja a "közepes" értéket, akkor az aktuális közepes verzió kerül felhasználásra, szemben az eredeti zsugorított verziójával..

Ez rendkívül előnyös, mert megőrzi a kiszolgáló sávszélességét és feldolgozza az időt a kliens számítógépen. Szerintem nem meglepő, hogy a 600 × 400-as kép letöltése gyorsabb, mint az 1200 × 800-as kép letöltése.

Ha nagyobb képet használ, amelyet le kell csökkenteni, a böngészőnek gondoskodnia kell a számításokról hogy ez megtörténjen. Bár ez nem tart órákat, előfordulhat, hogy a képeket nehéz webhelyeken észleli.

Jobb kép a helyes helyen

A végső cél az, hogy mindig használjon megfelelő képméreteket. Ha 440 × 380 képre van szüksége, akkor vegye fel a képet a szerverről. Két fő hely van, ahol feltöltött képeket fog használni: kiemelt képek és postai képek - azt tanácsolom, hogy elsősorban a kiemelt képekre összpontosítson.

A leglátogatottabb cikkek kivételével nem igazán számít, ha egy post-image 220px vagy 245px széles. Bármelyik verziója is elérhető lenne, egyformán használható lenne. Az ajánlott képek általában közepes méretűek. A cikklistáknál 178 × 178 indexképet használhat, a cikkfejléceknél 1200 × 600 széles képet használhat.

Ezeken túlmenően külön indexképet / közepes / nagy méretet is meg kell tartani a beállítások szerint könnyű hozzáférést biztosít a meghatározott méretekhez képek hozzáadásakor.

Tehát mi az egész, hogy ez a következő: Nem lenne jó, ha két extra képméretünk lenne, amit a kiemelt képekhez használnánk? Ezeket a képméreteket jobbra hozza létre a többi mellett, amikor egy képet feltölt. A jó hír az, hogy a WordPress elég egyszerű funkcióval rendelkezik.

Képméretek létrehozása

A add_image_size () függvény meghatározhatja a webhely által igényelt összes képméretet. Hozzuk létre a fent említett két példát. Helyezze el az alábbi kódot a téma funkcióihoz.php vagy egy plugin fájlba.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Mint látható, ez a funkció négy paramétert vesz igénybe. Az első paraméter lehetővé teszi a méret megadását. A második paraméter a maximális szélesség, a harmadik a maximális magasság. A negyedik paraméter kemény kivágást állít be. Ha az érték igaz, a kép a megadott méretben lesz létrehozva.

Miután ezt hozzáadta a témához vagy a bővítményhez, a feltöltött fájlok két új verzióját a WordPress hozza létre.

Képméretek használata

Ezek a képméretek számos funkcióban használhatók, amelyek a média letöltésével foglalkoznak. Nézzük meg először a kiemelt képeket. the_post_thumbnail () általában egy hozzászólás megjelenített képének megjelenítésére szolgál. A következő kód egy WordPress hurokba helyezhető:

 the_post_thumbnail ('featured_thumbnail'); 

Ennek a funkciónak az első paramétere lehetővé teszi a használni kívánt képméret megadását. Mivel "featured_thumbnail" -et adtam meg, ennek a fájlnak a 178 × 178-as verzióját használjuk.

Számos más funkció is létezik, mint például wp_get_attachment_image ()és wp_get_attachment_image_src () amelyek a képméret paramétert is használják. Ha ilyen funkciót használ, mindig meg kell adnia a megfelelő képméretet.

Bélyegképek regenerálása

Ha már rendelkezik webhelyével, akkor a képméret meghatározásával nem lesz képes a cikkek optimalizálására. A képméreteket csak akkor veszik figyelembe, ha új képet töltenek fel, így azok nem vonatkoznak a rendszerben már meglévő képekre.

Ne félj, a regenerálódó bélyegképek bővítménye mindent jobbá tesz! Ez a bővítmény az összes meghatározott kép miniatűrjeinek regenerálására képes, figyelembe véve az összes meghatározott képméretet. Ez is célzni egy adott képet, ami hasznos, ha csak néhány van, vagy tesztel.

A bélyegképek regenerálását követően meg kell látni a webhelyén feltöltött optimalizált verziókat. Ezt megtekintheti a kép forrásának megtekintésével. Ha feltöltötte a "example.jpeg" -t, és a "example.jpeg" -et látja a megjelenített kép forrásaként, valami nem helyes. Ha látod “Például-178 × 178.jpeg” akkor minden rendben van; megjelenik az optimalizált kép.

Érzékeny képek

Az optimalizált hely fenntartása egyik nehézsége a reakcióképesség. Amikor egy cikket megnézek az iPad-en, egy nagy méretű post-in-image kép kerül csökkentésre, mivel a maximális szélesség 786px lesz..

A legegyszerűbb megoldás egy olyan plugin használata, mint Hammy. A Hammy a téma tartalmának szélessége alapján működik (szemben a böngésző ablakszélességével), és optimalizált képeket képes kiszolgálni. Ez különösen hasznos a mobil felhasználók számára, ahol a feldolgozási teljesítmény és a sávszélesség problémát jelenthet.

További képoptimalizálás

Amint azt a bevezetőben említettem, a képek optimalizálásának számtalan módja van. A spritektől a képtömörítésig sok technikát lehet használni a képekkel együtt járó terhelési idő csökkentésére. Ashutosh KS írt egy nagy cikket, amely bemutatja a 9 WordPress bővítményt a képteljesítmény javítása érdekében.!

Azt is javaslom, hogy vessen egy pillantást a Hassle Free Responsive Images-re, amely megmutatja, hogyan adhat hozzá támogatást a képelemhez, amit szeretne használni, ha saját kódot szeretne írni..