Ako optimalizovať obrázky tak, aby boli priateľské k SEO (kompletný sprievodca)

Výkonnosť vašich webových stránok závisí od niekoľkých faktorov, od konkrétneho vybratého webového hostiteľa, od dodržiavania pokynov na prístupnosť k webovým stránkam, až po veľkosť obrázkových súborov, ktoré používate..


Ich formátovanie na správnu veľkosť však môže znížiť kvalitu kvôli vykonaným úpravám. Dobrou správou je, že pomocou niekoľkých techník a trikov môžete udržiavať optimálnu kvalitu obrazu a získať správnu veľkosť.

Čo je to Optimalizácia obrazu?

rozmery optimalizácie obrazuAk sú na webových stránkach veľké obrázky, môže dôjsť k výraznému spomaleniu. To môže skrátiť čas načítania a vytvoriť celkový dojem návštevníkom vašich stránok.

Zmenšovaním veľkosti súboru je optimalizácia obrazu. Na to môžete použiť skript alebo doplnok.

Výsledkom je rýchlejšie načítanie vašich stránok. Stratová a stratová kompresia sú dve najbežnejšie optimalizačné metódy.

Výhody formátovania obrazu

priemerné veľkosti obrázkov na webeOdhaduje sa, že približne 54 percent celkovej hmotnosti webovej stránky je spôsobených obrázkami.

Keď pracujete na optimalizácii webových stránok, vaše obrázky by preto mali byť vašou prvou úlohou. Výhody formátovania obrazu zahŕňajú:

  • Vylepšená rýchlosť načítania stránky
  • Vytváranie záloh je rýchlejšie
  • Vyžaduje sa menej úložného priestoru na serveri
  • Vylepšený SEO pomocou správneho doplnku SEO
  • Používa sa menšia šírka pásma

Ako zlepšiť výkon pomocou optimalizácie obrazu

Cieľom je rovnomerne vyvážiť prijateľnú kvalitu a najnižšiu možnú veľkosť súboru. Existuje viac ako jeden spôsob, ako to urobiť. Pred odovzdaním je bežná možnosť komprimovať obrázky. Na tento účel môžete použiť nástroj alebo doplnok (tu je niekoľko).

Je dôležité zvážiť typ kompresie a formát súboru, ktorý používate. Správna kombinácia umožňuje zmenšiť veľkosť obrázka až päťkrát.

Experimentujte s rôznymi formátmi súborov a typmi kompresie a určte najlepšiu kombináciu pre vaše potreby.

Vyberte najlepší formát súboru

Pri výbere najlepšieho typu súboru je dôležité vedieť, ktoré súbory sú k dispozícii. Toto sú najbežnejšie:

  • JPEG: Tento typ využíva bezstratovú a stratovú optimalizáciu. Úpravou úrovne kvality môžete dosiahnuť vyváženie veľkosti a kvality súboru.
  • PNG: Tento typ má tendenciu mať väčšiu veľkosť súboru, ale obrázky majú vyššiu kvalitu. Môžete použiť bezstratovú alebo bezstratovú kompresiu.
  • GIF: To je ideálne pre animované obrázky. Môžete použiť iba bezstratovú kompresiu. Používa iba 256 farieb.

formáty obrazových súborov

Existujú aj iné možnosti, ale patria medzi najbežnejšie a ľahko sa s nimi pracuje. Medzi ďalšie možnosti patrí JPEG XR a WebP. Nie všetky prehliadače tieto dva podporujú, takže si toho uvedomte.

Môžu však byť uskutočniteľnou voľbou. Napríklad v porovnaní s porovnateľným obrázkom JPEG dochádza v priemere k 30-percentnému zmenšeniu veľkosti súboru s WebP.

Kvôli chýbajúcej univerzálnej podpore týchto dvoch možností bude vaša aplikácia potrebovať ďalšiu logiku na vašich serveroch alebo aplikácii, aby poskytla vhodný prostriedok:

  • Optimalizácia obrazu je služba poskytovaná niektorými CDN vrátane dodávky WebP a JPEG XR.
  • Ak chcete zistiť klienta, poskytnite najlepší dostupný obrazový formát a skontrolujte podporované formáty, je možné pridať ďalšiu aplikačnú logiku.
  • Niektoré nástroje s otvoreným zdrojom automatizujú konverzáciu, optimalizáciu a poskytovanie vhodných aktív.

Veľkosť verzus kvalita kompresie

Nízka kompresia vedie k vyššej kvalite, ale veľkosť súborov je zvyčajne väčšia. Opak je pravdou pri vysokej kompresii. Súbory sú menšie, ale kvalita má tendenciu klesať.

kvalita obrazu vs kompresia

V ideálnom prípade by ste chceli celkovú váhu svojej webovej stránky celkom jeden až dva MB. Zvážte teda, koľko obrázkov potrebujete a vydelte toto číslo asi 1,5. Získate tak veľkosť obrázka, ktorá umožňuje najlepšiu rýchlosť načítania.

Strata vs. Strata Optimalizácia

Toto sú dva typy kompresie, ktoré budete používať. Je dôležité pochopiť, čo robia:

  • bezstratová vs. stratová kompresiaLossless: Toto skomprimuje údaje a je to filter. Pred vykreslením musí byť obrázok nekomprimovaný. Kvalita sa však neznižuje. Existuje niekoľko nástrojov, ktoré vykonávajú bezstratovú kompresiu.
  • stratová: Týmto sa odstránia niektoré údaje a jedná sa o filter. Pamätajte na to, koľko redukcie urobíte, pretože to zhorší obraz. Na úpravu nastavení kvality obrázka môžete použiť rôzne editory obrázkov a nástroje.

Optimálna konfigurácia bezstratovej alebo stratovej konfigurácie závisí od vašich vlastných kritérií, ako je napríklad kompromis medzi zavedenými artefaktmi a veľkosťou súboru a obsahom obrázka..

Neexistuje jediné univerzálne nastavenie, ktoré sa vzťahuje na všetky obrázky. Nakoniec si budete chcieť pohrať s rôznymi obrázkami a zistiť, ktorá funguje najlepšie.

Zmena mierky obrázkov

Vďaka responzívnym stránkam na stránkach, ako je napríklad WordPress, získate vo svojej knižnici médií niekoľko veľkostí súborov. Prehliadač si môže zvoliť veľkosť, ktorá je najlepšia, a stiahnuť ju. Veľkosť, ktorú prehliadač zvolí, závisí od rozlíšenia zariadenia.

zmena veľkosti obrázka v

Pôvodný súbor zostane nedotknutý a zachovaný. Doplnky môžete použiť, aby ste predišli uloženiu originálu kvôli šetreniu miesta na disku.

Výmena a odstránenie obrázkov

Potrebujete všetky obrázky na webovej stránke? Ak nie, odstráňte nepotrebné. Ak sú však všetky relevantné pre obsah, zvážte nahradenie väčších alebo menej kvalitných obrázkov lepšími možnosťami.

V niektorých prípadoch môžu webové obrázky a efekty CSS nahradiť obrázky, pričom na stránke stále poskytujú peknú vizuálnu estetiku. Vďaka webovým písmom môžu pekné písma pomôcť zlepšiť použiteľnosť a poskytnúť svojim stránkam prispôsobenejší vzhľad.

Môže tiež zlepšiť vašu čitateľnosť a budovanie značky. Len sa uistite, že stále môžete ľahko vyhľadávať, vyberať a meniť veľkosť textu bez toho, aby to malo problémy s čitateľnosťou.

Efekty CSS zahŕňajú prvky, ako sú tiene a prechody. Aj tieto môžu ďalej budovať značky. Animácie môžu poskytnúť vizuálnu príťažlivosť na vašej webovej stránke pri každej úrovni zväčšenia a rozlíšenia. V porovnaní s obrazovými súbormi ide o zlomok bajtov.

Rastrové verzus vektorové obrázky

rastor verzus vektor

Rastrový a vektorový sú dva z primárnych typov obrazových súborov. Na vytváranie rastrových obrázkov sa používajú programy založené na pixeloch, skener alebo fotoaparát.

Tieto sa bežne používajú na internete a častejšie sa používajú. Vektorový softvér sa používa na vytváranie vektorových obrázkov. Toto je bežné pre obrázky, ktoré idú do fyzických produktov, a do strojárstva, CAD a 3D grafiky.

Vektorové obrázky sú nezávislé od rozlíšenia a zväčšenia. Pokiaľ ide o geometrické tvary, vektor je ideálny. Ak sú obrázky zložité a majú veľa detailov a nepravidelných tvarov, uprednostňujú sa rastrové obrázky.

Rastrová grafika kóduje jednotlivé hodnoty každého pixla v obdĺžnikovej mriežke, aby reprezentovala obrázok. Vektorová grafika predstavuje obrázok pomocou bodov, čiar a mnohouholníkov.

Implikácie obrazovky s vysokým rozlíšením

Je dôležité rozlišovať medzi dvoma rôznymi typmi pixlov, ktoré zahŕňajú pixely zariadení a pixely CSS. Na jednom pixeli CSS môže byť prítomných viac pixlov zariadenia. Detail na obrazovke sa stáva jemnejším s väčším počtom pixelov zariadenia.

pixel CSS vs. pixel zariadeniaAk chcete naplno využiť výhody vyšších počtov pixelov zariadenia, musia mať prvky obrázka viac podrobností.

Táto úloha je ideálne pre vektorové obrázky, pretože dokážu dosiahnuť ostré výsledky keď je poskytnuté v akomkoľvek rozhodnutí.

Pretože rastrové obrázky používajú na zakódovanie obrazových údajov bázu na jeden pixel, sú náročnejšie. Toto je, zatiaľ čo veľkosť rastrových súborov sa zvyšuje so zvyšovaním pixelov.

Obrazovky s vysokým rozlíšením preto potrebujú obrázky s vysokým rozlíšením, aby mohli ťažiť z výhod. Vektorové obrázky sú najlepšie pre obrazovky s vysokým rozlíšením pretože vždy poskytujú ostré výsledky vďaka nezávislosti od rozlíšenia.

Nezabudnite, že bez ohľadu na rozlíšenie sú techniky optimalizácie obrazu rovnaké.

Optimalizácia vektorových obrázkov

Škálovateľná vektorová grafika (SVG) je podporovaná všetkými modernými prehliadačmi.

Toto je ideálne riešenie pre dvojrozmernú grafiku a formát je založený na formáte XML. Súbory SVG je možné vytvárať ručne pomocou textového editora, ktorý uprednostňujete, alebo pomocou väčšiny typov vektorového softvéru.

Aby sa zmenšila veľkosť súborov SVG, mali by sa zmenšiť. GZIP by sa mal používať pri kompresii súborov SVG.

Optimalizácia rastrových obrázkov

Mriežka pixelov vytvára rastrový obrázok. Jednotlivé pixely sú na dvojrozmernej mriežke. Napríklad sekvencia 10 000 pixelov vytvára obrázok 100 x 100 pixlov. Každý pixel kóduje informácie o priehľadnosti a farbách.

rastrový ťažkýHodnoty RGBA sa ukladajú pre každý pixel. Tie obsahujú:

  • Červený kanál
  • Modrý kanál
  • Zelený kanál
  • Alfa (priehľadnosť) kanál

Prehliadač interne prideľuje 256 odtieňov (hodnôt). Pre každý kanál to znamená 8 bitov. Na jeden pixel sú to štyri bajty. To umožňuje vypočítať veľkosť súboru pomocou rozmerov mriežky. Veľkosť súboru sa príliš nezvýši.

Ak chcete zmenšiť veľkosť obrazového súboru, existuje niekoľko stratégií:

  • Znížte bitovú hĺbku obrázka. Môžete to urobiť pomocou menšej farebnej palety.
  • Optimalizujte údaje, ktoré ukladajú jednotlivé pixely.

Nástroje a ladenie parametrov

Pre každý obrázok nebude existovať žiadny dokonalý obrazový nástroj, sada optimalizačných parametrov alebo formátu. Obsah obrázka a jeho technické a vizuálne požiadavky určia, ktoré obrázky by ste mali použiť.

Keď nájdete dobrú sadu nastavení, môžete ju v budúcnosti použiť na podobné obrázky, aby ste ušetrili čas. Uistite sa však, že nikdy nepredpokladáte, že by sa rovnaké nastavenia mali použiť na kompresiu všetkých obrázkov.

Dozviete sa o niekoľkých bežných nástrojoch, ktoré vám môžu pomôcť pri výbere toho správneho. Tieto štyri patria medzi najčastejšie používané:

  • Gifsicle: To vám umožní optimalizovať a vytvárať rôzne obrázky GIF.
  • Optipng: Používa sa na umožnenie bezstratovej optimalizácie PNG.
  • jpegtran: Tento umožňuje optimalizovať obrázky JPEG.
  • Pngquant: Používa sa na umožnenie stratovej optimalizácie PNG.

Poskytovanie zmenšených aktív obrázka

Pri optimalizácii obrazu je potrebné zvážiť dve základné kritériá:

  • Optimalizácia celkového počtu pixelov obrázka.
  • Optimalizácia počtu bajtov potrebných na zakódovanie každého pixelu v obraze.

strom formátu obrázkaVeľkosť súboru s obrázkom je rozdelená na celkový počet pixelov vynásobený celkovým počtom bajtov potrebných na kódovanie jednotlivých pixelov. To je všetko. Majte na pamäti toto, keď sa snažíte určiť optimálnu veľkosť obrazových súborov na vašom webe.

Z tohto dôvodu je najúčinnejším a najjednoduchším spôsobom optimalizácie obrázkov zaistiť, aby ste nezasielali viac pixlov, ktoré bezpodmienečne potrebujete, aby ste diela v prehliadači zobrazili v požadovanej veľkosti.

tak, nespoliehajte sa iba na prehliadač pri zmene mierky obrázkov. To môže spôsobiť, že sa zobrazia v nižšom rozlíšení. Využíva tiež veľa ďalších zdrojov CPU.

Vo všeobecnosti nie je možné zaručiť presnú veľkosť zobrazenia pre každé dodané aktívum. Je však dôležité zabezpečiť, aby ste udržali všetky zbytočné pixely na minime.

Je tiež nevyhnutné, aby ste svoje veľké diela dodávali čo najbližšie k ich veľkosti zobrazenia.

Kontrolný zoznam na optimalizáciu obrázkov

Všetky informácie tu umožňujú optimalizovať obrázky tak, aby vaše webové stránky boli rýchlejšie. Stále budete môcť používať krásne obrázky, ale nespôsobia výrazné spomalenie časov načítania vašej stránky.

To urobí z vašich návštevníkov radosť a zlepší sa celková funkcia vášho webu. Pri optimalizácii obrázkov zvážte nasledujúce kontrolné body:

  • Zvážte vektorové formáty, pretože pracujú pre zariadenia s vysokým rozlíšením a pre viac zariadení, pretože sú nezávislé od rozsahu a rozlíšenia.
  • Všetky aktíva SVG by mali byť komprimované a minifikované. Týmto sa odstránia nepotrebné metadáta.
  • V prípade rastrových formátov sa môžete pohrávať s optimálnym nastavením kvality. To vám môže ušetriť značné množstvo bajtov.
  • Pre každé dielo určte svoje funkčné požiadavky a vyberte najlepší formát pre rastrové obrázky.
  • Automatizujte, kedykoľvek môžete, aby ste zaistili konzistentnú optimalizáciu obrazu.
  • Poskytujte obrázky v mierke tak, aby bola ich prirodzená veľkosť a veľkosť displeja čo najviac podobné.

Aby som to zhrnul, existuje optimalizácia obrazu pre vedu aj umenie. Ako veda slúžia vysoko vyvinuté algoritmy a techniky.

Absencia definitívnych odpovedí týkajúcich sa kompresie jednotlivých obrázkov je v odbore. Nakoniec by ste sa mali hrať a experimentovať. To vám umožní urobiť najlepší výber pre vaše obrazové súbory a ako prispievajú k rýchlosti vašej webovej stránky.

S rastúcou popularitou a sofistikovanosťou tvorcov webových stránok tretích strán, ako je Wix, je pre dizajnérov jednoduché, aby sa nedotkli, ale aby sa sústredili na vývoj a udržiavanie dobrých procesov optimalizácie obrázkov bez ohľadu na to, či poškriabali šablónu alebo stavali stránky od začiatku..

Referencie a obrazové kredity:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector