Ultimate Guide to WordPress Správa obrázkov

  1. 1. Aktuálne čítanie: Ultimate Guide to WordPress Správa obrázkov
  2. 2. 3 menej známe tipy na správu obrázkov vo WordPress
  3. 3. WordPress Image SEO Chyby a ako ich opraviť

Vizuálny dopad je jednou z najdôležitejších funkcií, pokiaľ ide o vplyvný marketingový plán obsahu. Vitajte v úplne novej sérii príspevkov – The Ultimate Guide to Image Management vo WordPress.


Je navrhnutý tak, aby vám poskytol nástroje potrebné na spravovanie vašich obrazových aktív vo WordPress – priamo od technických optimalizácií, SEO, integrácie CDN a správy knižníc. V tejto viacdielnej príručke odporúčame iba tie metódy, výukové programy, doplnky a témy, ktoré sme vyskúšali alebo odporúčajú odborníci v odbore..

Taktiež sa vyhneme slepému navrhovaniu doplnkov, ktoré majú vysoké využitie v úložisku WordPress. Skôr odporúčame tie, ktoré dosiahnu dokonalý súlad medzi návrhom hodnoty a optimalizáciou výkonu.

Možno sa čudujete, ako by sme to robili. 24 000+ stiahnutí našej témy Total – Responsive Multipurpose WordPress v ThemeForest nemusí byť skvelým ukazovateľom.

Hľadali sme tie najlepšie blogy od popredných svetových spoločností poskytujúcich WordPress (napríklad WPEngine a PAGEL) a naučili sa čo oni sa dozvedeli pri poskytovaní miliárd zobrazení stránok tisícom významných klientov. Všetky tieto informácie sme pre vás komprimovali do malých odsekov a odrážok za váš online úspech. Teraz začnime, mali by sme?

Technické tipy a tipy na optimalizáciu výkonu pre obrázky WordPress

V programe WordPress existuje pomerne málo možností optimalizácie obrázkov nie zbytočne zaťažujte webový server. Pozrime sa na niektoré z najbežnejších tipov na optimalizáciu obrázkov, ktoré všetci používajú mali by nasledovať, spolu s niekoľkými ďalšími, ktoré sa hodia pri zvláštnych príležitostiach.

JPG alebo PNG? Použitie správneho formátu obrázka

Prvým krokom v optimalizácii obrazu je dobrý začiatok. Hovorí sa, že dobre začatá práca je napoly dokončená. To je presne ten prípad, keď ide o optimalizáciu obrázkov v WordPress. Všetko to začína výberom správneho formátu obrázka. JPG a PNG sú dva najbežnejšie obrazové formáty používané online v obsahovom marketingu.

Trik spočíva v tom, aby sme pochopili, aký formát zvoliť pre každý typ obrázka. Vybratie nesprávneho spôsobí obrovské zväčšenie veľkosti obrázka. Tu sú pravidlá.

Kedy použiť formát PNG?

Pre ploché obrázky – ako sú vektory, ilustrácie, písma, logá, bannery, tvary, bannery atď. – všetko, čo je vytvorené vo vektorovom formáte, ako je napríklad EPS alebo Adobe Illustrator (.AI), použite PNG. Nakoniec získate optimalizovaný obrázok s takmer nulovou stratou kvality. Ak v tomto prípade použijete súbor JPG, nebudete robiť kompromisy týkajúce sa veľkosti, ale môže dôjsť k zníženiu jeho kvality. V skutočnosti by pri vyšších rozlíšeniach bol PNG ľahší bez straty kvality. JPG by utrpel.

Vezmite jeho príklad. Vytvoríme plochý obrázok s rozlíšením 5 000 pixelov a uložíme ho ako JPG a PNG.

Vzorový obrázok použitý na testovanie

Plochý obrázok
JPG233kb
PNG42 KB

Stručne povedané, obrázok JPG bol o 455% vyšší ako PNG pri rovnakom rozlíšení.

Kedy použiť formát JPG?

Na všetko ostatné použite JPG. Použite čokoľvek iné ako plochý alebo vektorový obrázok, použite JPG. Fotografie ľudí, miest, vecí atď. – používajú JPG. Takmer všetky fotografie z tejto kategórie používajú JPG. Ak namiesto PNG použijete PNG, narazili by ste na niektoré vážne problémy s výkonom.

V tomto prípade musíte byť obzvlášť opatrní. Ak namiesto súboru PNG použijete súbor JPG, došlo by k malému alebo žiadnemu poškodeniu. Ak však používate krvavé PNG v prípade JPG, vytvoríte veľa priestoru na poškodenie. Pozrite sa na tento príklad.

Nastaviť: Stiahol som tento obrázok z Shutterstock, ktorý sa váži okolo 10,3MB v uznesení 6149 x 4562 – v podstate 28MP fotografie. Pokiaľ nebudeme pripravovať niečo ako brožúru pripravenú na tlač, nebudeme v našich blogoch používať úplné rozlíšenie fotografie. Povedzme, že máme pevnú maximálnu veľkosť obrázka v našom blogu 1600 ×.

experiment: Zdrojový obrázok zmeníme na 1600px a vytvoríme štyri verzie – dve pre formát PNG a dve pre formát JPG. Pre každý formát (JPG / PNG) použijeme (a) odporúčané nastavenie kompresie a (b) nastavenie maximálnej kompresie.

Vzorový obrázok pre experiment JEPG

výsledky: Tu sú výsledky v peknom diagrame, ktorý je potrebné dodržať:

Pôvodný obrázok (KB)

10870
Cieľové rozlíšenie1600 ×
formátnastavenieVeľkosť (KB)% Zníženie
JPGProgresívne, kvalita = 8523198%
Neprogresívne, kvalita = 8523998%
PNGKompresia = 0557549%
Kompresia = 6185283%
Kompresia = 9175084%

Na prvý pohľad by sme si mohli myslieť, že 84% kompresia PNG je dosť dobrý v porovnaní s 98% dosiahnutými v JPG. To nie je úplne pravda. Ak sa bližšie pozriete na veľkosť obrázkov, zistíte, že PNG váži niečo vyše 1,7 MB, zatiaľ čo JPG je 0,22 MB. Čo znamená, že PNG je 8-krát ťažšie ako JPG verzia rovnakého obrázka v rovnakom rozlíšení. Inými slovami, pre rovnaký obrázok a rozlíšenie je verzia JPG o 700% ľahšia ako PNG!

Pre rovnaký obrázok a rozlíšenie je verzia JPG o 700% ľahšia ako PNG!

Spravidla používajte PNG pre ploché obrázky a JPG pre všetko ostatné.

Kontrolný zoznam na odovzdávanie fotografií z fotografií do blogov

Existuje veľa blogov, kde editori priamo vkladajú verziu obrázkov v plnom rozlíšení do svojich blogových príspevkov. Tu je niekoľko rád na nahrávanie fotografií z fotografií do blogov. Používam bezplatný softvér s názvom IrfanView, ktorý má veľa úžasných funkcií. Ukážem vám každú z nich.

1. Zmeňte veľkosť obrázka

Po prvé, musíte sa rozhodnúť pre maximálne rozlíšenie všetkých obrázkov na svojom webe WordPress. Akýkoľvek obrázok nad touto dimenziou by sa zmenil, pokiaľ to nie je samozrejme menšie.

IrfanViewDávková konverzia (po spustení aplikácie stlačte tlačidlo B), ktorá dokáže aplikovať zoznam funkcií na skupinu obrázkov naraz. Medzi naše funkcie patrí zmena veľkosti, orezanie, pridanie vodoznaku atď.

2. Odstráňte údaje EXIF

Fotografie kliknuté na bežný fotoaparát majú veľa vložených metadáta – čo nie je nič iné ako malé (ale užitočné) informácie o obrázku. Príklady takýchto informácií zahŕňajú GPS súradnice miesta, na ktoré sa kliklo, obrázok, nastavenie ISO, model kamery atď.

EXIF informácie o náhodnej fotografii, ktorá sa klikla na môj iPhone

Pokiaľ nejde o blogovanie fotografií, spravidla takéto informácie na obrázku blogového príspevku nechceme. Keď ukladáte alebo dávkové konvertujete obrázky do IrfanView, dáta EXIF ​​sa zvyčajne odstránia. Pomáha to chrániť vaše súkromie – najmä vaše fyzické umiestnenie. Rozdiel pre väčšinu fotografií je približne 200 – 300 kB na obrázok.

3. Uložiť ako progresívne JPG

IrfanView predvolene ukladalo JEPG ako progresívne

Progresívny obrázok JPG načíta vrstvu obrazu po vrstve, čím sa urýchli načítanie. Siete na doručovanie obsahu, ako napríklad KeyCDN, sa začali automaticky prevádza JPG na progresívne JPG na urýchlenie dodávania obrázkov a optimalizáciu ukladania.

4. Nastavte DPI na 72

DPI alebo bodky na palec sú mierou kvality obrázka. Pre tlačový materiál sa používa vysoká hodnota DPI. Pre web je hodnota 72 perfektná.

Dobre, takže zhrnutie vyššie uvedeného, ​​sú moje nastavenia. Túto funkciu spustím, keď som pre svoj blogový príspevok zostavil všetky obrázky – pred ich odovzdaním do WordPress.

Dávkové nastavenie prevodu v IrfanView pre typický blog WordPress

5. Optimalizujte svoje obrázky

Bez ohľadu na to, či ste použili JPG alebo PNG, musíte svoj obrázok optimalizovať. Existuje veľa skutočne úžasných online nástrojov, ktoré vám pomôžu optimalizovať obrázky a uložiť ich veľa priestoru.

Hovorím o službách, ako sú TinyPNG alebo TinyJPG, ktoré jednoducho optimalizujú vaše obrázky PNG / JPG pomocou pokročilých algoritmov.

Optimalizované obrázky v TinyPNG

Aby som bol úprimný, neviem, ako algoritmy fungujú, ale fungujú a vždy som bol schopný dosiahnuť zníženie o 50 – 70% bez ohľadu na to, ako najlepšie ich uložím.

Môžete si tiež kúpiť verzia pre služby ako doplnok Photoshop za 50 USD. K dispozícii sú verzie Windows aj Mac. Pre moje účely je to online verzia (spojená s internetom) Uložiť do Dropboxu funkcia) funguje najlepšie.

Doplnky na optimalizáciu obrázkov vo WordPress

Doteraz sme sa naučili kroky, ako sa dostať zahájená správny. Čo keby ste narazili na tento príspevok a už ste odovzdali stovky obrázkov? Tu je niekoľko doplnkov, ktoré vám s tým môžu pomôcť:

EWWW Cloud Image Optimizer

Tento doplnok je vidličkou originálneho a veľmi populárneho produktu EWWW Image Optimizer zapojiť. Tieto doplnky na optimalizáciu obrázkov, ktoré zhromažďujú viac ako 500 000 stiahnutí, vám umožňujú optimalizovať obrázky pri ich nahrávaní na WordPress.

To, čo ho odlišuje od konkurencie, je jeho schopnosť optimalizovať existujúce obrázky v databáze, čo vedie k obrovskému nárastu výkonnosti. Šetrí to tiež značné náklady na šírku pásma, pretože väčšina vašej prevádzky pochádza zo starých článkov. Môžete sa tiež rozhodnúť zapnúť stratovú kompresiu obrázka (čo je voľným okom sotva viditeľné), ale môžete ušetriť veľa miesta a šírku pásma. Pokiaľ ide o optimalizačnú technológiu, môže na optimalizáciu nových a existujúcich obrázkov použiť rozhranie API TinyPNG alebo TinyJPG..

Ale tu je problém. Mnoho hostiteľov (vrátane WPEngine) nepovoľuje doplnok EWWW Image Optimization, pretože na server kladie veľa dodatočného zaťaženia. Ak sa vám nejako podarí obísť obmedzenia servera, mohlo by dôjsť k pozastaveniu účtu z dôvodu porušenia pravidiel.

Toto je miesto, kde EWWW Cloud Optimizer plugin prichádza hrať. Znižuje všetky výpočty potrebné na optimalizáciu obrázkov do cloudu a jednoducho nahrádza neoficiálne obrázky optimalizovanými. Pretože sa na kompresiu používa prakticky nulový výkon CPU, na jednotku nie je žiadne ďalšie zaťaženie. Platí to pre všetky nové a existujúce konverzie obrázkov na vašom webe WordPress.

Plány a ceny: Ako by sa dalo očakávať, plugin nie je zadarmo, pretože vývojár musí zaplatiť účty za cloud computing. Avšak, oceňovanie je mimoriadne rozumná cena 9 000 USD za optimalizáciu 3 000 obrázkov za predplatné.

Doplnok EWWW Cloud Optimizer je navrhnutý krásne. Mediálny skener vám povie, koľko obrázkov musíte optimalizovať pred nákupom. Na základe obrázkov vášho servera si môžete kúpiť príslušný predplatený program.

Doplnok TinyPNG WordPress

Tento ďalší skvelý doplnok na optimalizáciu obrázkov, ktorý sa integruje priamo so službou TinyPNG / JPG. Automaticky nové a existujúce obrázky odovzdané do mediálnej knižnice WordPress. Tento doplnok ponúka bezplatný plán 100 optimalizácií obrázkov za mesiac.

Freddy zostavil zoznam doplnkov na optimalizáciu obrázkov už dávno – prečítajte si, ak sa chcete dozvedieť viac o téme.

záver

Týmto sa dostávame na koniec prvého príspevku v tejto sérii. V nasledujúcom článku sa dozviete, ako niektoré menej známe tipy a triky týkajúce sa optimalizácie obrázkov, ako je napríklad predchádzanie hotlinkingu, načítanie obrázkov zo vzdialených serverov a podobne. Máte nejaké tipy pod začať správne kategórie? Dajte nám vedieť v komentároch nižšie.

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