Nejlepší průvodce správou obrázků WordPress

Vizuální dopad je jednou z nejdůležitějších funkcí, pokud jde o dopadný marketingový plán obsahu. Vítejte ve zbrusu novém příspěvkovém seriálu – The Ultimate Guide to Image Management ve WordPress.

Je navržen tak, aby vám poskytl nástroje potřebné ke správě vašich obrazových aktiv ve WordPressu – přímo od technických optimalizací, SEO, integrace CDN a správy knihoven. V této vícenásobné příručce doporučíme pouze ty metody, návody, pluginy a témata, které jsme vyzkoušeli nebo doporučují odborníci v oboru.

Vyhneme se také slepému navrhování pluginů, které mají vysoké využití v úložišti WordPress. Doporučujeme spíše ty, které zasáhnou dokonalý souzvuk mezi návrhem hodnoty a optimalizací výkonu.

Možná se divíte, jak bychom to měli dělat. Více než 24 000 stažení našeho celkem – responzivního víceúčelového tématu WordPress v ThemeForest nemusí být skvělým ukazatelem.

Hledali jsme nejlepší blogy od špičkových společností poskytujících WordPress v oboru (například WPEngine a Pagely) a naučili se co ony se dozvěděli, když obsluhují miliardy zobrazení stránek u tisíců vysoce postavených klientů. Všechny tyto informace jsme pro vás zkomprimovali do malých odstavců a bodů za váš online úspěch. Začněme, můžeme?

Technické a optimalizační tipy pro obrázky WordPress

Ve WordPress je k dispozici několik možností optimalizace obrazu ne vložte zbytečné zatížení na webový server. Podíváme se na některé z nejčastějších tipů pro optimalizaci obrázků, které všichni by měl následovat, spolu s několika dalšími, kteří přijdou vhod při zvláštních příležitostech.

JPG nebo PNG? Použití správného formátu obrazu

Prvním krokem v optimalizaci obrazu je dobrý začátek. Říká se, že dobře zahájená práce je napůl hotová. To je přesně ten případ, pokud jde o optimalizaci obrázků ve WordPressu. Všechno to začíná výběrem správného formátu obrázku. JPG a PNG jsou dva nejběžnější formáty obrázků používané online v obsahovém marketingu.

Trik je pochopit, jaký formát zvolit pro každý typ obrázku. Sběr nesprávného způsobí obrovské zvětšení velikosti obrázku. Zde jsou pravidla.

Kdy použít formát PNG?

Pro ploché obrázky – jako jsou vektory, ilustrace, písma, loga, bannery, tvary, bannery atd. – cokoli, co je vytvořeno ve vektorovém formátu, jako je formát EPS nebo Adobe Illustrator (.AI), použijte PNG. Nakonec získáte optimalizovaný obraz s téměř nulovou ztrátou kvality. Pokud v tomto případě použijete JPG, nebudete dělat kompromisy ohledně velikosti, ale může vám dojít kvalita. Ve skutečnosti by při vyšších rozlišeních byl PNG lehčí bez ztráty kvality. JPG by trpěl.

Vezměme si jeho příklad. Vytvoříme plochý obraz s rozlišením 5 000 pixelů a uložíme jej jako JPG a PNG.

Ukázkový obrázek použitý pro test

Stručně řečeno, obrázek JPG byl o 455% vyšší než PNG pro stejné rozlišení.

Kdy použít formát JPG?

Pro všechno ostatní použijte JPG. Použijte cokoli jiného než plochý nebo vektorový obrázek, použijte JPG. Fotografie lidí, míst, věcí atd. – použijte JPG. Téměř všechny fotografie z této kategorie používají JPG. Pokud místo PNG použijete PNG, narazili byste na ně vážné problémy s výkonem.

V tomto případě musíte být zvlášť opatrní. Pokud použijete JPG místo PNG, došlo by k malému nebo žádnému poškození. Pokud však používáte krvavé PNG v případě JPG, vytvoříte prostor pro poškození. Podívejte se na tento příklad.

Založit: Stáhl jsem tento obrázek z Shutterstocku, který se váží kolem 10,3 MB v rozlišení 6149 × 4562 – v podstatě 28MP fotografie. Pokud nebudeme připravovat něco jako brožuru připravenou k tisku, nebudeme v našich blogech používat úplné rozlišení fotografie. Řekněme, že máme pevnou maximální velikost obrázku v našem blogu 1600 pixelů.

Experiment: Změníme velikost zdrojového obrázku na 1600px a vytvoříme čtyři verze – dva pro formát PNG a dva pro JPG. Pro každý formát (JPG / PNG) použijeme (a) doporučené nastavení komprese a (b) nastavení maximální komprese.

Ukázkový obrázek pro experiment JEPG

Výsledek: Zde jsou výsledky v pěkném grafu, který je třeba dodržovat:

Na první pohled si můžeme myslet, že 84% komprese PNG je dostatečně dobrý proti 98% dosaženým v JPG. To není úplně pravda. Pokud se podíváte blíže na velikost obrázku, zjistíte, že PNG váží něco přes 1,7 MB, zatímco JPG je 0,22 MB. Což znamená, že PNG je 8krát těžší než JPG verze stejného obrázku ve stejném rozlišení. Jinými slovy, pro stejný obrázek a rozlišení je verze JPG o 700% lehčí než PNG!

Pro stejný obrázek a rozlišení je verze JPG o 700% lehčí než PNG!

Jako obecné pravidlo použijte PNG pro ploché obrázky a JPG pro všechno ostatní.

Kontrolní seznam pro nahrávání fotografií z fotografií do blogů

Existuje spousta blogů, kde editoři přímo nahrávají verzi obrazu v plném rozlišení do svých blogových příspěvků. Zde je několik ukazatelů pro nahrávání fotografií fotografií do blogů. Používám bezplatný software IrfanView, který má spoustu úžasných funkcí. Ukážu vám každý jeden.

1. Změňte velikost obrázku

Za prvé, musíte se rozhodnout pro maximální rozlišení všech obrázků na svém webu WordPress. Jakýkoli obrázek nad touto dimenzí by se změnil, pokud ovšem není menší.

IrfanView má Dávková konverze funkce (stiskněte B po spuštění aplikace), která může použít seznam funkcí na spoustu obrázků najednou. Pro naše účely funkce zahrnují změnu velikosti, oříznutí, přidání vodoznaku atd.

2. Odstraňte data EXIF

Fotografie klepnuté na běžný fotoaparát mají spoustu vestavěných metadata – což není nic jiného než drobné (ale užitečné) informace o obrázku. Mezi příklady takových informací patří GPS souřadnice místa, na které byl pic klepnut, nastavení ISO, model fotoaparátu atd.

EXIF informace o náhodné fotografii kliknuté na můj iPhone

Pokud se nejedná o blogování fotografií, obvykle takové informace na obrázku blogového příspěvku nechceme. Při ukládání nebo dávkovém převodu obrázků v IrfanView jsou data EXIF ​​obvykle odstraněna. Pomáhá to chránit vaše soukromí – zejména vaše fyzické umístění. Rozdíl ve většině fotografií je asi 200–300 KB na obrázek.

3. Uložit jako progresivní JPG

IrfanView ve výchozím nastavení ukládal JEPG jako progresivní

Progresivní obrázek JPG načítá vrstvu obrázku po vrstvě, čímž se urychluje načítání. Zahájily se sítě pro doručování obsahu, například KeyCDN automaticky převádí JPG progresivní JPG pro zrychlení doručování obrázků a optimalizaci ukládání.

4. Nastavte DPI na 72

DPI nebo tečky na palec jsou měřítkem kvality obrazu. Pro tiskový materiál se používá vysoká hodnota DPI. Pro web je hodnota 72 perfektní.

Dobře, takže shrnuji výše, jsou moje nastavení. Tuto funkci spustím, jakmile sestavím všechny obrázky pro svůj blogový příspěvek – před odesláním obrázků do WordPress.

Dávkové nastavení převodu v IrfanView pro typický blog WordPress

5. Optimalizujte své obrázky

Bez ohledu na to, zda jste použili JPG nebo PNG, musíte svůj obrázek optimalizovat. Existuje mnoho vážně úžasných online nástrojů, které vám pomohou optimalizovat obrázky a uložit hodně prostoru.

Mluvím o službách, jako je TinyPNG nebo TinyJPG, který jednoduše optimalizuje vaše obrázky PNG / JPG pomocí pokročilých algoritmů.

Optimalizované obrázky v TinyPNG

Abych byl upřímný, nevím, jak algoritmy fungují, ale fungují a vždy jsem byl schopen dosáhnout snížení o 50–70% bez ohledu na to, jak nejlépe je uložím.

Můžete si také koupit verze pro služby jako Photoshop plugin za 50 USD. K dispozici jsou verze Windows i Mac. Pro mé účely, online verze (ve spojení s Uložit do Dropboxu funkce) funguje nejlépe.

Doplňky pro optimalizaci obrazu ve WordPressu

Zatím jsme se naučili kroky, jak se dostat začal že jo. Co kdybyste narazili na tento příspěvek a již jste nahráli stovky obrázků? Zde jsou některé doplňky, které vám s tím pomohou:

EWWW Cloud Image Optimizer

Tento plugin je vidličkou původního a divoce oblíbeného EWWW Image Optimizer zapojit. Díky těmto více než 500 000 stažením vám tyto pluginy pro optimalizaci obrázků umožňují optimalizovat obrázky při jejich nahrávání na WordPress.

To, co ho odlišuje od konkurence, je jeho schopnost optimalizovat stávající obrázky v databázi, což má za následek obrovský nárůst výkonu. To také šetří značné náklady na šířku pásma, protože většina vašeho provozu pochází ze starých článků. Můžete také volitelně povolit ztrátovou kompresi obrazu (což je pouhým okem sotva viditelné), ale můžete ušetřit spoustu místa a šířku pásma. Pokud jde o optimalizační technologii, může použít TinyPNG nebo TinyJPG API pro optimalizaci nových a stávajících obrázků.

Ale tady je problém. Mnoho hostitelů (včetně WPEngine) nepovoluje zásuvný modul pro optimalizaci obrazu EWWW, protože to na server přinese spoustu dalšího zatížení. Pokud se vám nějak podaří obejít omezení serveru, můžete riskovat pozastavení vašeho účtu z důvodu porušení zásad.

To je místo, kde EWWW Cloud Optimizer plugin přijde hrát. To offloads všechny výpočty potřebné k optimalizaci obrázků do cloudu a jednoduše nahradí nenoptimized obrazy s optimalizovanými. Protože pro kompresi je používán prakticky nulový výkon CPU, není zde žádný další náklad. To platí pro všechny nové a existující převody obrázků na vašem webu WordPress.

Plány a ceny: Jak by se dalo očekávat, plugin není zdarma, protože vývojář musí platit účty za cloud computing. Nicméně, ceny je mimořádně přiměřená cena 9 USD za 3000 optimalizací obrázků pro předplacené předplatné.

Plugin EWWW Cloud Optimizer je navržen krásně. Mediální skener vám řekne, kolik obrázků je třeba před nákupem optimalizovat. Na základě obrázků na vašem serveru si můžete zakoupit příslušný předplacený plán.

Plugin TinyPNG WordPress

Tento další skvělý plugin pro optimalizaci obrázků, který se integruje přímo do služby TinyPNG / JPG. Automaticky nové a stávající obrázky nahrané do knihovny médií WordPress. Tento plugin nabízí bezplatný plán 100 optimalizací obrázků za měsíc.

Freddy před chvílí sestavil seznam pluginů pro optimalizaci obrázků – přečtěte si, pokud se chcete o tématu dozvědět více.

Závěr

Tím se dostáváme na konec prvního příspěvku v této sérii. V dalším článku se dobře naučíte, jak některé méně známé tipy a triky pro optimalizaci obrázků, jako je například zabránění hotlinkingu, načítání obrázků ze vzdálených serverů apod. Máte nějaké tipy pod jak začít správně kategorie? Dejte nám vědět v komentářích níže.