Chcete nahrát obrázky na svůj web WordPress, ale nejste si jisti, jaké velikosti nebo typy souborů by měly být? Neznáte proces změny velikosti a komprese obrázků pro web? V tomto článku vysvětlím, proč je pro váš web důležité používat správnou velikost obrázku, a ukážu vám, jak změnit velikost a komprimovat obrázky pomocí bezplatného editoru fotografií GIMP.
Video: Jak změnit velikost obrázků pro WordPress v GIMPu
Proč je změna velikosti obrázků na webu důležitá
Začněme tím, proč je změna velikosti obrázků na webu tak důležitá.
Podle WordPress.org, celková „fyzická velikost“ obrázku hraje obrovskou roli ve výkonu webové stránky. „Velikost souboru [obrázku] určuje dobu, kterou trvá načtení vaší stránky; čím větší je velikost souboru... tím déle [stránky] bude trvat načítání." Jinými slovy, nahrání velkého souboru na váš web zpomalí výkon jakékoli stránky, na kterou přidáte obsah, což se obvykle projeví jako pomalejší rychlost načítání stránky v analytických datech vašeho webu.
„Velikost souboru [obrázku] určuje dobu, kterou trvá načtení vaší stránky; čím větší je velikost souboru... tím déle [stránky] bude trvat načítání."
-WordPress.org
Rychlost načítání stránky, označovaná také jednoduše jako „Rychlost stránku,“ je „jak rychle se načítá obsah vaší stránky,“ podle SEO stránky Moz. Pomalejší stránky mohou mít za následek vyšší „míry okamžitého opuštění,“ což je luxusní metrika představující návštěvy, kdy návštěvník webu opustí váš web po zhlédnutí jediné stránky.
Pomalejší stránky mohou také zkrátit množství času, který návštěvníci stráví na stránkách vašeho webu, protože lidé mohou být netrpěliví při čekání, až se obsah stránky načte a rychleji váš web opustí.
Tyto metriky jsou důležité, protože obvykle chcete, aby uživatelé trávili na vašem webu více času a prohlíželi si více stránek na vašem webu.
Jsou také důležité, protože hrají roli v tom, jak se váš web umísťuje na stránkách s výsledky vyhledávačů neboli „SERP“. SERPs jsou jednoduše stránky s výsledky, které se zobrazí, když zadáte slovo nebo frázi do Googlu a stisknete klávesu Enter. Vzhledem k tomu, že větší obrázky ukazují na špatné postupy při návrhu webu a negativně ovlivňují uživatelský dojem na vašem webu, mohou vyhledávače jako Google penalizovat vaše stránky za to, že mají tyto větší obrázky a ohodnoťte svůj web pod ostatními weby, které fungují lépe.
Čím nižší bude například vaše webová stránka na Googlu, tím menší návštěvnost bude vaše stránka a tím větší bude návštěvnost vašich konkurentů, kteří se ve výsledcích vyhledávání umístí nad vámi.
Zmenšením velikosti souborů vašich obrázků na vašem webu můžete zlepšit své Rychlost stránku a tím zlepšit další metriky, např míra opuštění a čas na page, abyste nakonec zlepšili své hodnocení ve vyhledávačích.
Všimněte si, že existuje mnoho dalších důležitých proměnných, které vstupují do hodnocení ve vyhledávání, takže oprava obrázků je pouze součástí solidního SEO (Search Engine Optimization) strategie. Určitě je však velmi důležité, aby se vaše stránky umístily výše na místech, jako je Google, aby se zvýšila návštěvnost vašeho webu.
Jak změnit velikost obrázků pro WordPress v GIMPu
Jak tedy správně změnit velikost obrázků pro WordPress?
Velikost souboru obrázku můžete zmenšit jednoduše zmenšením celkové velikosti obrázku pomocí škálování a oříznutí než jej nahrajete na svůj web. Navíc můžete použít tzv.komprese” k vašemu obrázku, abyste dále zmenšili jeho velikost.
GIMP, bezplatný editor fotografií s otevřeným zdrojovým kódem, dokáže provést všechny tyto úkoly a zároveň exportovat do doporučených formátů souborů „next-gen“, aby se dále zmenšila velikost souborů vašich obrázků a zlepšil výkon vašeho webu.
Krok 1: Otevřete svůj obrázek
Chcete-li začít s tímto procesem, otevřete obrázek, který chcete nahrát na svůj web, do GIMPu. Můžete to udělat přetažením obrázku z počítače do okna obrázku GIMPu, nebo můžete jednoduše přejít na Soubor>Otevřít, když jste v GIMPu.
Pokud používáte metodu Soubor>Otevřít, přejděte do umístění obrázku na vašem počítači z dialogu „Otevřít obrázek“, který se zobrazí, a po nalezení souboru dvakrát klikněte na soubor obrázku, abyste jej otevřeli v GIMPu (nebo klikněte na tlačítko „Otevřít“ v pravém dolním rohu dialogového okna).
Krok 2: Najděte rozměry svého obrázku
Zcela nahoře v okně GIMPu je funkce zvaná „Title Bar“ (červená šipka na obrázku výše). Zde uvidíte aktuální rozměry obrázku (zvětšené zelené pole na fotografii). Můj obrázek je 1920×1280 – přičemž první číslo, 1920, představuje šířku mého obrázku (v pixelech), a druhé číslo, 1280, představuje výšku mého obrázku. Konečné rozměry obrázku, které budete chtít pro obrázek použít, budou záviset na tom, kde ve WordPressu hodláte obrázek použít, a také na tom, jaké téma používáte.
V tomto tutoriálu změním velikost obrázku na standardní velikost 1200 × 630 pixelů, která se doporučuje pro obrázky blogových příspěvků.
Krok 3: Změňte poměr stran obrázku pomocí nástroje Crop Tool
S ohledem na to je první věcí, kterou chci udělat, oříznout obrázek tak, aby poměr stran mého původního obrázku odpovídal poměru stran doporučené velikosti. Chcete-li to provést, vezmu svůj nástroj oříznutí stisknutím Shift+c na klávesnici nebo kliknutím na ikonu nástroje oříznutí v panelu nástrojů GIMPu (červená šipka na obrázku výše).
Dále v možnostech nástroje pro tento nástroj zaškrtnu políčko vedle položky „Pevné“ (zelená šipka) a kliknutím na rozevírací nabídku vyberte „Poměr stran“ (modrá šipka).
Do textového pole pod rozevíracím seznamem (žlutá šipka) napíšu „1200:630“, abych nastavil poměr stran. To odpovídá poměru stran doporučené velikosti obrázku, kterou chci, aby byl můj konečný obrázek.
Pomocí nástroje oříznutí nyní kliknutím a tažením myši přes obrázek nakreslím oblast oříznutí. Když pustím myš, vše mimo oblast oříznutí se ztlumí (červená šipka na obrázku výše – za předpokladu, že je v možnostech nástroje zaškrtnuto „Zvýraznění“, což je obvykle výchozí nastavení).
Ve výchozím nastavení má oblast oříznutí vodítka nastavena jako „Středové čáry“ (žlutá šipka na obrázku výše). Toto nastavení mohu změnit pomocí rozevíracího seznamu vodítek ve spodní části Možnosti nástroje. Například změním své průvodce na „Rule of Thirds“ (zelená šipka). Různé možnosti průvodce jsou založeny na principech fotografie, což usnadňuje komponování kompozice pomocí těchto principů.
Můžete najet myší na kteroukoli ze stran nebo rohů oblasti oříznutí (tj. zvýrazněnou oblast označenou červenou šipkou na obrázku výše), poté kliknutím a tažením změnit velikost hranice oblasti oříznutí. Všimněte si, že velikost oblasti oříznutí můžete vždy vidět v polích „Velikost“ umístěných v Možnostech nástroje (na obrázku výše označeno zeleně). Budete chtít zachovat celkovou velikost oblasti oříznutí větší, než je konečná velikost obrázku 1200×630.
Můžete také kliknout a táhnout myší uprostřed oblasti oříznutí (červená šipka), abyste přemístili oříznutí na obrázku.
Jakmile budete připraveni oříznout obrázek, klikněte jednou do oblasti oříznutí a váš obrázek bude oříznut.
Všimněte si, že pokud není zaškrtnutá možnost „Odstranit oříznuté pixely“ v možnostech nástroje (zelená šipka na obrázku výše), bude se vaše původní ohraničení obrázku stále zobrazovat kolem obrázku prostřednictvím žluté tečkované čáry (červená šipka). Původní obraz můžete obnovit a vrátit tak oříznutí zpět, když přejdete na Obraz > Přizpůsobit plátno vrstvám. Exportuje se pouze oblast vašeho obrázku uvnitř hranice plátna.
Krok 4: Měřítko obrázku
Náš obrázek je nyní oříznut na požadovaný poměr stran, ale pokud se ještě jednou podíváte na rozměry našeho obrázku v „Title Bar“, uvidíte, že obrázek je 1532×804 (na obrázku nahoře je zvýrazněn zeleně a zvětšen – vaše rozměry se budou pravděpodobně mírně lišit podle toho, jak velkou oblast oříznutí jste na obrázek nakreslili). Nyní budeme muset změnit měřítko obrázku tak, aby odpovídal požadovaným rozměrům.
Chcete-li to provést, přejděte na Obraz > Měřítko obrazu (červená šipka).
V zobrazeném poli „Měřítko obrázku“ v části „Velikost obrázku“ se ujistěte, že ikona řetězu vedle polí „šířka“ a „výška“ je propojena (červená šipka na výše uvedené fotografii). Poté změňte „Šířku“ obrázku na 1200 (zelená šipka). Stiskněte klávesu Tab. Výška obrázku se automaticky aktualizuje na „630“. V části „Kvalita“ se ujistěte, že je rozbalovací nabídka „Interpolace“ (modrá šipka) nastavena na „NoHalo“ nebo „LoHalo“ pro nejlepší kvalitu obrazu po změně měřítka. (Další informace o interpolaci naleznete podívejte se na můj tutoriál na toto téma).
Stisknutím tlačítka „Měřítko“ změníte velikost obrázku (žlutá šipka).
Po dokončení změny měřítka zkontrolujte rozměry obrázku v záhlaví. Nyní byste měli vidět velikost obrázku 1200×630 – přesně takovou velikost, jakou chceme! Tak co teď budeme dělat?
Krok 5: Komprimujte svůj obrázek exportem
Oříznutí a změna měřítka obrázku snížila velikost souboru snížením výšky obrázku z 1920 na 1200 pixelů a šířky z 1280 na 630 pixelů, ale velikost obrázku můžeme ještě dále zmenšit použitím komprese při exportu obrázku.
Nyní tedy musíme obrázek exportovat do formátu souboru, který na obrázek použije kompresi, aniž by znatelně snížil kvalitu obrázku. Zatímco JPEG jsou vždy dobrou volbou, nyní je k dispozici ještě lepší možnost: WebP.
Formát WebP používá větší kompresi než JPEG a přitom ovlivňuje kvalitu obrazu méně než JPEG. Jinými slovy, získáte lépe vypadající obrázek s menší velikostí souboru. Formáty WebP navíc podporují všech 5 nejlepších webových prohlížečů.
Chcete-li exportovat do WebP, přejděte na Soubor>Exportovat jako (červená šipka).
Kliknutím na kteroukoli složku v části „Místa“ (zvýrazněnou zeleně) vyberte obrázek v počítači, kam chcete obrázek uložit. Můžete jednoduše dvakrát kliknout na složku, abyste ji mohli zadat, a uvidíte, ve které složce se nacházíte vedle názvu „Uložit do složky“ (červená šipka). Poté obrázek přejmenujte na cokoliv chcete – jen se ujistěte, že název obrázku končí příponou „.webp“ (modrá šipka), aby byl obrázek exportován ve formátu WebP. Až budete připraveni, klikněte na „Exportovat“ v pravém dolním rohu okna (žlutá šipka).
Dále se zobrazí dialog „Exportovat obrázek jako WebP“. Ujistěte se, že není zaškrtnuto políčko „Lossless“ (červená šipka). Obvykle nastavuji „Kvalitu obrázku“ na 80 (modrá šipka – toto je procento, takže čím nižší procento, tím nižší bude kvalita obrázku, ale menší bude velikost souboru obrázku). Pokud váš obrázek neobsahuje průhlednost (tj. logo bez pozadí), nemusíte si dělat starosti s posuvníkem „Kvalita alfa“ (ve skutečnosti jsem v experimentu, který jsem provedl, snížil kvalitu alfa ze 100 na 90 ve skutečnosti mírně zvětšila velikost souboru obrázku s průhledným pozadím z 8.50 kb na 8.52 kb). Rozbalovací nabídku „Typ zdroje“ můžete ponechat nastavenou na „Výchozí“.
Je na vás, zda chcete zaškrtnout nebo zrušit zaškrtnutí některé z možností metadat, včetně dat Exif, dat ITPC a dat XMP. Data Exif a XMP jsou metadata obvykle přiřazená vaším fotoaparátem, která popisují informace o vaší fotografii, například jaký model fotoaparátu byl použit nebo jaký typ objektivu byl použit. ITPC je na druhé straně používáno zástupci tisku a přiřazuje informace k vašemu obrazu, jako je vlastnictví, práva a licence. Pokud si nejste jisti, co dělat, ponechte tyto možnosti zaškrtnuté.
Stejně tak je dobré ponechat volbu „Uložit barevný profil“ nezaškrtnutou, protože většina prohlížečů automaticky použije barevný prostor sRGB k zobrazení vašeho obrázku, což je to, co používá GIMP. Pokud používáte jiný barevný profil, ponechte toto zaškrtnuté. Pokud se také obáváte, že se obrázek v určitých prohlížečích nezobrazuje správně, ponechání zaškrtnutého políčka přidá k celkové velikosti obrázku pouze několik kb.
Nakonec může zůstat nezaškrtnutá možnost „Uložit miniaturu“, což nám dále ušetří několik kilobajtů.
Kliknutím na „Export“ (žlutá šipka na obrázku výše) exportujete obrázek do formátu WebP. Při porovnávání exportovaného souboru WebP se souborem JPEG, který má stejnou velikost a má také kvalitu nastavenou na „80“, obrázek WebP bude mít velikost přibližně 30 kb, tedy přibližně o 25 %, menší než velikost JPEG.
Krok 6: Nahrajte svůj obrázek na WordPress
Nyní se můžete přihlásit na svůj web WordPress a přejít na stránku nebo příspěvek, kam chcete nahrát svůj obrázek, nebo jednoduše přejít do sekce „Média“ pomocí hlavní navigace a přetáhnout obrázek do knihovny médií. V mém případě přejdu na „Příspěvek“ pomocí hlavní navigace (červená šipka na obrázku výše) a kliknutím na „Blogový příspěvek 1“ (modrá šipka) upravím tento blogový příspěvek.
Poté otevřu postranní panel Nastavení příspěvku (červená šipka) a posuňte se dolů do části „Vybraný obrázek“ a rozbalím tuto část (modrá šipka). Poté kliknu na obrázek a nahradím jej svým novým obrázkem.
Přejdu na kartu „Nahrát soubory“ (červená šipka) a mohu přetáhnout svůj obrázek z počítače do WordPress (modré šipky).
Nakonec kliknu na „Nastavit doporučený obrázek“, abych použil tuto změnu (červená šipka).
Kliknutím na „Aktualizovat“ (červená šipka) aktualizujete stránku novým doporučeným obrázkem.
Pokud kliknu na „Zobrazit příspěvek“ (modrá šipka)…
…nyní uvidíte nový doporučený obrázek zobrazený v horní části mého blogu.
To je pro tento tutoriál vše! Pokud se chcete dozvědět více o návrhu webu WordPress, doporučuji se podívat na můj Kurz WordPress na Udemy! Nebo, pokud se chcete dozvědět více o GIMPu, podívejte se na můj GIMP 2.10 Masterclass na Udemy!
