1. Pochopte cíle a kompromisy:
* vysoká kvalita: Vypadá skvěle, ale velká velikost souboru může zpomalit časy načítání.
* Velikost malého souboru: Načítá se rychle, ale může vypadat rozmazané nebo pixelované.
* požadavky na platformu: Různé platformy mají různé ideální velikosti a poměry stran.
2. Klíčové faktory, které je třeba zvážit:
* zamýšlené použití:
* sociální média: Musí být poutavý a rychle se načíst na mobilu.
* web/blog: Pro SEO a vizuální přitažlivost je třeba optimalizovat.
* e -mail: Musí být velmi malé, aby se zabránilo odrazům nebo být označeno jako spam.
* tisk: Vyžaduje vysoké rozlišení, které se zde nezaměřuje (pouze online sdílení).
* požadavky na platformu (níže uvedená specifika): Platformy sociálních médií často mění obrázky, ale poskytování téměř optimální velikosti zajišťuje lepší výsledky.
* Typ obrazu:
* fotografie: Obecně větší velikosti souborů. JPG je obvykle nejlepší formát pro fotografie.
* grafika (loga, ilustrace atd.): Může být často menší. PNG je často lepší pro grafiku, zejména pro ty s průhledností.
* Animované GIFS: Optimalizujte počet snímků a barev, abyste udrželi velikost souboru dolů.
* formát souboru:
* jpg/jpeg: Dobré pro fotografie, nabízí dobrou kompresi. Umožněte nastavení kvality.
* png: Dobré pro grafiku, loga a obrázky s průhledností. Neztrácí kvalitu s kompresí (bezeztrátová). Pro fotografie může mít větší velikosti souborů než JPG.
* gif: Dobré pro jednoduché animace. Omezená paleta barev.
* webp: Moderní formát obrazu vyvinutý společností Google, který poskytuje vynikající bezmyšlenkovou a ztrátovou kompresi pro obrázky na webu. Dobrá alternativa k JPG a PNG. Nepodporují všechny prohlížeče nebo platformy (ale podpora roste).
* rozlišení (dpi/ppi): Pro online použití je dpi (tečky na palec) irelevantní . Zajímá vás rozměry pixelů (Šířka x výška). Webové prohlížeče zobrazují pouze rozměry pixelů, nikoli DPI. 72 DPI je výchozí, ale neovlivňuje to, jak obrázek vypadá na obrazovce, pokud jsou rozměry pixelů stejné.
3. Doporučené velikosti pro populární platformy (od října 2024):
Důležitá poznámka: Specifikace platformy se často mění. Vždy zkontrolujte nejnovější oficiální dokumentaci samotné platformy, kde najdete nejaktuálnější informace.
* Facebook:
* Profil obrázek: Nejméně 170 x 170 pixelů. Bude oříznut do kruhu.
* krycí fotografie: 820 x 312 pixelů (zobrazuje se na této velikosti na stolních počítačích, 640 x 360 na chytrých telefonech). Velikost souboru by měla být pro nejlepší výkon menší než 100 kB.
* Sdílené obrázky (v krmivu): 1200 x 630 pixelů je dobrá obecná velikost. Širší obrázky budou upraveny tak, aby se vešly.
* příběhy: 1080 x 1920 pixelů (vertikální, plná obrazovka).
* reklamy: Mění se v závislosti na typu reklamy. Konkrétní doporučení zkontrolujte správce reklam na Facebooku.
* Instagram:
* Profil obrázek: 110 x 110 pixelů (zobrazuje se jako kruh).
* čtvercový příspěvek: 1080 x 1080 pixelů.
* Krajina Post: 1080 x 566 pixelů.
* portrét příspěvek: 1080 x 1350 pixelů.
* příběhy: 1080 x 1920 pixelů (vertikální, plná obrazovka).
* cívky: 1080 x 1920 pixelů (vertikální, plná obrazovka).
* twitter (x):
* Profil obrázek: 400 x 400 pixelů (zobrazených jako kruh).
* Obrázek záhlaví: 1500 x 500 pixelů.
* In-Stream Photos: 1200 x 675 pixelů (poměr stran 16:9). Twitter je upraví, aby se vešly.
* LinkedIn:
* Profil obrázek: 400 x 400 pixelů.
* Fotografie na pozadí: 1584 x 396 pixelů.
* logo společnosti: 300 x 300 pixelů (čtvereční).
* Banner Image (stránka společnosti): 1128 x 191 pixelů.
* sdílené obrázky: 1200 x 627 pixelů.
* pinterest:
* Profil obrázek: 165 x 165 pixelů.
* kolíky: Doporučený poměr stran je 2:3 (např. 1000 x 1500 pixelů). Pinterest doporučuje používat svislé obrázky. Minimální šířka je 600 pixelů.
* YouTube:
* profilový obrázek (ikona kanálu): 800 x 800 pixelů (zobrazených jako kruh).
* Channel Art (Image Banner): 2560 x 1440 pixelů (důležité:různá zařízení zobrazují různé části banneru. Návrh pro nejmenší bezpečnou oblast:1546 x 423 pixelů, aby se zajistilo, že je viditelná na všech zařízeních).
* miniatury videa: 1280 x 720 pixelů (poměr stran 16:9).
* webové stránky/blogy:
* se velmi liší v závislosti na designu.
* Hero Images: Obvykle široký (např. 1920 x 1080 pixelů nebo větší).
* obrázky blogu: Šířka se obvykle pohybuje v rozmezí 600-1200 pixelů v závislosti na rozvržení.
* miniatury: Menší velikosti, optimalizované pro rychlé načítání.
* klíč je optimalizace * každý * obrázek pro svůj účel a umístění na webu.
* Použijte responzivní obrázky: Implementovat atribut Srcset` v ` `Tags pro sloužit různé velikosti obrazu na základě velikosti obrazovky zařízení uživatele. Toto je standardní praxe pro moderní webové stránky.
* e -mail:
* Udržujte obrázky velmi malé! Velké obrázky mohou způsobit, že e -maily jsou označeny jako spam nebo odraz.
* šířka obvykle 600-800 pixelů pro celou šířku e-mailu. Jednotlivé obrázky by měly být menší.
* agresivně optimalizujte velikost souboru.
* zvažte použití web-bezpečných písem namísto vkládání obrázků textu.
4. Nástroje pro změnu změny a optimalizace obrázků:
* Software pro úpravu obrázků:
* Adobe Photoshop: Silný, ale vyžaduje předplatné.
* gimp (program manipulace s obrazem GNU): Zdarma a otevřený zdroj, velmi schopný.
* afinitní fotografie: Cenově dostupnější alternativa k Photoshopu.
* Pixelmator Pro (pouze Mac): Další skvělá volba pro uživatele Mac.
* Online rezidence obrázků/optimalizátorů:
* tinypng/tinyjpg: Vynikající pro komprimaci souborů PNG a JPG bez významné ztráty kvality.
* kompresor.io: Komprimuje soubory JPG, PNG, SVG a GIF.
* iloveimg: Sada nástrojů pro úpravu obrázků online (velikost, plodina, komprese, převod atd.).
* imageResizer.com: Jednoduché a snadno použitelné.
* Squoosh (Google): Vynikající nástroj pro kompresi obrázku s otevřeným zdrojovým kódem.
* Software pro změnu velikosti obrazu:
* irfanview (Windows): Zdarma prohlížeč obrázků a převodník s schopnostmi zpracování dávek.
* xnconvert: Procesor pro křížové platformy.
5. Kroky pro změnu změny a optimalizace:
1. Určete požadovanou velikost: Zjistěte rozměry pixelů potřebné na základě platformy a zamýšleného použití.
2. změna změny obrázku: Pomocí editoru obrázků použijte změnu změny obrázku na správné rozměry. Mít na paměti poměr stran (poměr šířky k výšce). Udržujte poměr stran, abyste se vyhnuli zkreslení.
3. Optimalize pro web: Pomocí optimalizátoru obrázku komprimujte velikost souboru.
4. Uložit pro web: V Photoshopu (nebo podobně) použijte možnost „Uložit pro web“. To vám umožní ovládat formát souboru (JPG, PNG, GIF, WebP), kvalitu a nastavení komprese.
5. Test a náhled: Před zveřejněním nebo nahráním si prohlédnete obrázek na různých zařízeních a prohlížečích, abyste se ujistili, že vypadá dobře.
6. Tipy pro lepší optimalizaci obrazu:
* Použijte JPG pro fotografie: JPG obvykle nabízí nejlepší kompresi pro fotografické obrázky.
* použijte PNG pro grafiku: PNG je lepší pro grafiku, loga a obrázky s průhledností, protože je bezztrátová.
* Vyberte správné nastavení kvality: Při ukládání jako JPG experimentujte s nastavením kvality a najděte sladké místo mezi velikostí souboru a kvalitou obrazu. Nižší kvalita =menší velikost souboru, ale patrnější kompresní artefakty.
* Odstraňte zbytečné metadata: Editory obrázků často zahrnují metadata (data EXIF), jako jsou nastavení fotoaparátu, data polohy atd. To přidává velikost souboru a často není pro sdílení online nutné. Odstranit to.
* Použijte progresivní JPGS (prokládané PNGS): Tyto obrázky se načítají postupně a poskytují uživateli náhled, zatímco celý obrázek stahuje.
* líné načítání: Pro webové stránky implementujte líné načítání pro obrázky pod záhybem. To znamená, že obrázky jsou načteny pouze tehdy, když jsou viditelné ve výřezu. To významně zlepšuje počáteční dobu načítání stránky.
* síť doručování obsahu (CDN): Pokud máte web se spoustou obrázků, zvažte použití CDN. CDN ukládá vaše obrázky na serverech po celém světě, takže je lze uživatelům doručit rychleji.
* zvažte použití prvku `
Stručně řečeno, zaměřte se na rozměry pixelů, velikost souboru a pro použití správného formátu pro typ obrazu a platformy. Experimentujte a testujte, abyste našli nejlepší rovnováhu pro vaše potřeby.