Mobilné Správy, Gadgety, Blogy's Secenziami

Príručka služby Bloggers k optimalizácii obrázkov pre web

Nepáči sa vám obrázky?

Keď čítate, môžu z textu urobiť pútavý zážitok. Obrázky vylepšujú blogový príspevok, zvyšujú jeho ostrosť a nastavujú tón a značku celého webu.

A vieš čo? Sme naprogramovaní tak, aby odpovedali na obrázky. Preto je integrácia obrázkov do vášho obsahu účinným nástrojom na propagáciu vášho blogu.

Ak si však nebudete dávať pozor, obrázky môžu predstavovať viac ako polovicu (alebo viac) z celkovej veľkosti vašich stránok. Len pred niekoľkými rokmi bola priemerná veľkosť webovej stránky 600 – 700 K. Teraz je priemer 2 MB a zvyšuje sa každý rok.

Je to obrovské!

Hlavným dôvodom tohto javu je skutočnosť, že na webových stránkach sa častejšie používa viacero obrázkov a tieto obrázky nie sú správne dimenzované a optimalizované. To znamená, že sa neukladajú ani nekompilujú webovým spôsobom a namiesto toho nafúknu vaše stránky.

Väčšina z nás však ponecháva optimalizačné obrázky ako dodatočnú myšlienku a radšej by urobila zábavné veci, ako napríklad vytvorenie epického príspevku alebo nadviazanie kontaktov s inými blogermi vo vašej oblasti.

Avšak nafúknutie stránky znamená, že to ovplyvní rýchlosť načítania stránky. Nemusíte si myslieť, že je to veľký problém, ak máte vysokorýchlostné pripojenie, ale mnohí vaši návštevníci to tak nie. Google nemá rád pomalé načítanie stránok a môže to nepriaznivo ovplyvniť vaše SEO.

Prečo potrebujete optimalizovať obrázky

Tvrdo pracujete na vytváraní obsahu s hviezdičkami a trávite nespočet hodín propagáciou svojho blogu a siete s ostatnými blogermi, takže poslednou vecou, ​​ktorú chcete, je, aby potenciálni návštevníci opustili váš web skôr, ako sa načíta!

Štúdie ukazujú, že až 40% návštevníkov klikne na tlačidlo Späť, ak načítanie stránky trvá dlhšie ako tri sekundy.

Viem, že tri sekundy v skutočnosti nie sú také dlhé, ale keď ste na mobilnom pripojení a čakáte na načítanie stránok, druhá sa môže zdať navždy.

A keďže polovica vašich návštevníkov môže používať pomalšie mobilné pripojenie, je jasné: Mali by ste zmenšiť veľkosť svojej stránky. A my už vieme, kto je najväčším páchateľom nafúknutia veľkosti stránky – sú to ich obrázky.

Príliš veľké obrázky tiež zaberajú miesto vo vašom hostiteľskom účte. Niektorí z vás môžu hosťovať „neobmedzený“ úložný priestor, ale mnohí poskytovatelia špičkových hotelov ho obmedzujú na približne 10 GB úložný priestor na plánoch nižšej úrovne. Toto je možné vyplniť rýchlo, najmä ak hostíte viac webových stránok s mnohými obrázkami na rovnakom účte.

Ako teda zistíte, či vaše obrázky spomaľujú vaše stránky? Otestujte rýchlosť svojich stránok pomocou nástroja Google PageSpeed ​​Insights.

Google Pagespeed

Ak spoločnosť Google nahlási, že problémy, ktoré nie sú optimalizované, predstavujú problém, je potrebné vedieť, ako ich opraviť.

Základy optimalizácie obrazu

Pokiaľ ide o optimalizáciu obrázkov na vašom blogu, je potrebné pamätať na niekoľko rôznych vecí: typ súboru, veľkosť a rozmery obrázka, ako zarobiť svoje obrázky a kompresiu obrázkov.

Pozrime sa bližšie na každú z týchto oblastí.

Typ súboru

Obrázky na webe sa na animáciu zvyčajne ukladajú vo formátoch súborov PNG alebo JPEG alebo GIF. Kto nemá rád zábavné animované GIFy plávajúce po celom webe!

Teraz je to technické dobrý Ak svoje obrázky uložíte v akomkoľvek formáte, prehliadač návštevníka nebude mať problém so zobrazením vašej webovej stránky. Ak však chcete dosiahnuť najlepšiu kvalitu a optimalizáciu, postupujte podľa nasledujúcich pravidiel:

JPEG – používa sa na fotografie a vzory, na ktorých sa zobrazujú ľudia, miesta alebo veci PNG – ideálne pre grafiku, logá, plnotextové návrhy, snímky obrazovky a ak potrebujete priehľadné obrázky GIF – ak potrebujete animáciu, použite PNG inak

Prečo existujú rôzne formáty?

PNG sa tradične používa na ukladanie log a grafiky, pretože si zachováva pôvodnú kvalitu obrázka – nikto nechce rozmazaný text a pixelované tvary. Ale ak sa pokúsite uložiť fotografiu ako PNG, bude to vyzerať fantasticky, ale výsledná veľkosť súboru bude menšia ako prekvapujúca.

JPEG sa tradične používa na ukladanie fotografií. Niektoré obrazové údaje sú zošrotované, aby sa vytvorila výrazne menšia veľkosť súboru, ale keďže fotografie obsahujú rôzne farby a prirodzené variácie, strata kvality pre ľudské oko vo všeobecnosti nepociťuje.

O komprimácii sa dostaneme neskôr, ale ak si pamätáte iba dve veci, pamätajte: JPEG pre fotografie a PNG pre text / grafiku.

Rozmery

Načítali ste si niekedy webovú stránku a všimli ste si, že stiahnutie malého obrázka (napríklad titulku) si vyžaduje stiahnutie f-o-r-e-v-e-r? Tak pomalý, že môžete vidieť každú prichádzajúcu líniu? Myslíte si, že ako dlho trvá stiahnutie takého malého obrázka?

Bočný panel headshot

A keď sa stane veľká hlavička stránky, je to ešte horšie, pretože môže zabrániť načítaniu celej stránky.

Dôvodom toho je, že blogger nezmenil veľkosť a optimalizoval svoj obraz, a pre náš príklad by mohol nahrať JPEG vo vysokom rozlíšení priamo zo svojej kamery DSLR.

A je to obrovský súbor!

Rozumiete, že prehliadač (zvyčajne) upraví veľkosť obrázka na pôvodné rozmery, aby sa zmestil na webovú stránku. To, čo vyzerá ako malá obrazovka, môže byť v skutočnosti veľká 10-megapixlová fotografia, ktorú prehliadač v reálnom čase zmenšil.

Niektoré platformy na publikovanie na webe automaticky vytvárajú rôzne variácie vášho obrázka v plnom rozlíšení v rôznych veľkostiach, ale ak nie, musíte vopred zmeniť veľkosť obrázkov v editore obrázkov, ako sú Photoshop, Lightroom, Pixlr alebo dokonca MS Paint. Môže to znamenať rozdiel medzi súborom 50 kB a 5 MB.

Resize Pixlr

Napríklad WordPress automaticky vytvorí tri (alebo viac, v závislosti od témy) nahraného obrázka, všetky s rôznymi rozmermi, ktoré môžete použiť v blogových príspevkoch namiesto toho, aby vždy používali obrázok v plnej veľkosti.

Nastavenia veľkosti obrázka

Ak máte zvyk nahrávať veľké fotografie fotografií a chcete ušetriť miesto na svojom hostingovom účte, bude vás podporovať doplnok WordPress Imsanity.

Zmeniť veľkosť a nahradiť pôvodný obrázok niečím lepšie zvládnuteľným, takže aj keď vložíte obrázok v plnej veľkosti do svojho príspevku, nebude to také zlé.

Ak je povolená, aplikácia Imsanity môže vyhľadávať aj vaše existujúce obrázky a podľa toho zmeniť ich veľkosť.

Doplnok pre doplnky

Doručovanie vašich obrázkov

Spôsob, akým dodávate svoje obrázky svojim návštevníkom, nie je iba o ich optimalizácii ako takej, ale môže to mať dramatický vplyv na rýchlosť načítania stránky.

Väčšina blogerov publikuje svoje obrázky priamo zo svojho webového účtu, a to je vo všeobecnosti dobré, ale ak naozaj chcete vytlačiť určitý výkon zo svojich webových stránok, hostenie obrázkov v sieti na doručovanie obsahu (CDN) môže mať veľký význam.

CDN pozostáva zo strategicky umiestnených webových serverov umiestnených v dátových centrách po celom svete. Tieto servery sú hostiteľmi duplicitných kópií ich obrázkov. Keď si prehliadač návštevníka vyžiada obrázok zo svojho webu, CDN automaticky nasmeruje prehliadač na server, ktorý je k nim geograficky bližšie.

To znamená, že napríklad návštevníci Európy dostávajú obrázky poskytované z miestneho európskeho servera, a nie z USA alebo inde. Pretože doba odozvy a oneskorenie v sieti sú skrátené, obrázky sa sťahujú omnoho rýchlejšie a skracujú tak čas načítania stránky.

Príručka blogu používa Sucuri (zahŕňa bezpečnostný firewall a CDN), existujú však aj iní poskytovatelia kvality, ktorí Amazon Cloudfront alebo KeyCDN. Dokonca aj populárny CloudFlare, ktorý nie je striktne CDN, ponúka CDN zdarma a dá sa ľahko nakonfigurovať vo väčšine zdieľaných hostingových balíkov.

cloud Flame

Kompresia obrázka

Pokiaľ ide o optimalizáciu obrázkov, nič neznižuje veľkosť súboru viac ako pokročilá stratená kompresia obrázkov.

Väčšina nástrojov na úpravu obrázkov, ako sú Canva alebo Photoshop, ukladá stratené súbory JPEG na kompresiu, pretože majú najlepšie zníženie veľkosti súborov. Takže zatiaľ čo kvalita obrázkov je mierne znížená, použitie straty kompresie obrázkov redukuje obrovské obrázky na veľkosti kompatibilné s webom.

Som si istý, že veľa z tých, ktorí používajú Photoshop, ich vidí Uložiť na web fungujú ako celý a koniec optimalizácie obrazu. A dokonca aj online editačné nástroje ako PicMonkey alebo Canva tiež optimalizujú vaše obrázky.

Canva optimalizácia

Vedeli ste však, že existujú nástroje, ktoré dokážu získať váš „optimalizovaný“ obrázok z aplikácie Photoshop alebo iných nástrojov na úpravu, komprimovať ho a komprimovať o ďalších 40% (alebo viac), a stále Vyzerá takmer rovnako ako ľudské oko?

Proces optimalizácie

Tu je niekoľko bezplatných a platených nástrojov, ktoré vám pomôžu zredukovať obrázky do stavu kompatibilného s webom.

desktopové nástroje

ImageAlpha / ImageOptim

Pre používateľov počítačov Mac sú ImageAlpha a ImageOptim dva bezplatné nástroje pre stolné počítače, ktoré používam každý deň na optimalizáciu obrázkov PNG, najmä snímok obrazovky, pred odovzdaním. Tieto nástroje sa ľahko používajú, stačí ich jednoducho presunúť myšou, ale musíte urobiť jeden obrázok súčasne.

Odborné poradenstvo: Pre technologických odborníkov existuje ImageOptim – CLI, kde môžete optimalizovať celý priečinok s obrázkami naraz.

ImageAlpha je stratený kompresor PNG a dokáže robiť zázraky znížením súborov PNG, zatiaľ čo program ImageOptim vykonáva pokročilú bezstratovú kompresiu (s možnosťou straty) a odstraňuje nepotrebné metadáta zo súborov PNG, JPEG a GIF.

Pre svoje obrázky PNG ich najskôr spustím prostredníctvom programu ImageAlpha:

Použitie alfa obrázka

Tu som znížil snímok obrazovky z 103 000 na 28 000.

Potom som prešiel cez ImageOptim a ušetril ďalších 10%.

Optimalizácia obrazu

jpeg Mini

Pre svoje súbory JPEG ich optimalizujem pomocou stolnej aplikácie JPEGmini, ktorá je k dispozícii pre počítače Mac a Windows,

S verziou Lite môžete bezplatne optimalizovať až 20 obrázkov a odstránenie limitu stojí 19,99 dolárov.

jpeg Mini

Odborné poradenstvo: Pokročilí používatelia, ktorí chcú integrovať JPEGmini do Photoshopu alebo Lightroomu pomocou doplnku, si môžu kúpiť verziu Pro za 99,99 dolárov.

Online / Cloud / SaaS nástroje

TinyPNG

tinypng

Ak hľadáte vysoko kvalitný nástroj na kompresiu obrázkov online, je TinyPNG (tiež optimalizácia súborov JPEG napriek svojmu názvu) webová aplikácia, ktorá vám umožní nakresliť až 20 obrázkov z 5 MB alebo menej v prehliadači a optimalizujte ich. naraz.

Majú tiež vývojové rozhranie API a sprístupňujú doplnok WordPress, ktorý môže automaticky optimalizovať vaše obrázky pri ich načítaní.

TinyPNG vám ponúka 500 bezplatných optimalizácií obrázkov za mesiac a potom sa účtuje z $ 0.002-00,009 na obrázok, v závislosti od objemu.

Teraz sa 500 obrázkov za mesiac môže zdať ako veľa, ale ak si uvedomíte, že WordPress často vytvára tri až päť variácií každého obrázka v rôznych veľkostiach, nemusí sa zdať 500 obrázkov toľko pre plodného bloggera. Našťastie je cena za obrázok lacná.

Kraken.io

kraken

Ďalším obľúbeným online nástrojom je Kraken. Aj keď ide predovšetkým o platený nástroj, majú možnosť bezplatne a bez obmedzení odovzdávať obrázky na svoje webové stránky. Môžete nahrať iba obrázky do veľkosti 1 MB vo veľkosti; inak budete musieť službu zaplatiť.

Odberatelia majú k dispozícii aj doplnok WordPress a doplnok automaticky optimalizuje vaše obrázky, keď ich odovzdáte do mediálnej knižnice.

Ak potrebujete komprimovať obrázky viac ako 1 MB, alebo si len chcete automatizovať veci, môžete si vybrať predplatné, ktoré siaha od Micro do $ plánu 5 / mesiac za 500 MB obrázkov, až do 70 $ mesačne Podnikový plán pre plných 60 GB optimalizované obrázky za mesiac.

EWWW Image Optimizer

ewww

Ak nie ste pripravení minúť peniaze a nechcete sa obťažovať manuálnou optimalizáciou obrázkov, bezplatný doplnok WordPress EWWW Image Optimizer môže automaticky optimalizovať vaše odovzdané obrázky.

Môžete si vybrať prémiové predplatné, ktoré vykonáva kompresiu strát, ale bezplatná verzia vykonáva iba bezstratovú kompresiu, takže úspory nie sú také významné. Šetrí to však čas a je lepší ako nič.

Rozbaľte ho

Niektorí ľudia predpovedajú, že sa bude blížiť priemerná veľkosť webovej stránky 3 MB v roku 2017, teraz je čas začať optimalizovať obrázky.

Pamätajte, že nie všetci vaši návštevníci budú mať rýchle pripojenie a na hodnotenie Google môže mať vplyv inflácia stránky a pomalé načítanie stránky. Aby ste tak povediac zjednodušili zaťaženie, zvyknete si dnes optimalizovať svoje obrázky.

Venujte pozornosť rozmerom obrázka a zmeňte veľkosť fotografií alebo veľkých obrázkov z digitálneho fotoaparátu na vhodnú veľkosť.

Potom môžete využiť výhody modernej kompresie obrázkov s desktopovými aplikáciami, ako sú JPEGmini alebo cloudové nástroje ako TinyPNG alebo Kraken, a ak je to možné, integrujte ich do WordPress s doplnkom.

Ak vaša publikačná platforma nakoniec na pôvodnom obrázku automaticky vytvorí obrázky so zmenenou veľkosťou, vyberte jeden z nich pre svoj blogový príspevok, a nie pôvodný obrázok v plnej veľkosti.

Reveal: Tento príspevok obsahuje pridružené odkazy. To znamená, že ak vykonáte nákup, môžeme urobiť malú províziu.

Príručka služby Bloggers na optimalizáciu obrázkov pre web