OG Image Generator — Social Share Image Maker

Obrázek Open Graph je obrázek, který se zobrazí po vložení odkazu do chatu, tweetu nebo kanálu Slack – a každá platforma, která vykresluje, očekává plátno o velikosti přibližně 1200 × 630 pixelů, velikost og:image Facebooku a karty Summary_large_image Twitteru byly navrženy podle toho. Nesprávná velikost a obrázek bude oříznutý, rozmazaný nebo zmáčknutý; špatně se rozvržení a název se čte jako nečitelný střípek na rušné fotografii. Tento nástroj skládá obraz ve skutečném cílovém rozlišení pomocí Canvas 2D API, takže to, co vidíte v náhledu, je přesná mřížka pixelů, která se dodává v PNG.

Vyberte pozadí – rovnou barvu, dvoukrokový lineární přechod vytvořený ze dvou barev, které si vyberete, nebo nahranou fotografii, která se ořízne tak, aby zaplnila celý snímek 1200 × 630 stejným způsobem, jako by to bylo v případě překrytí CSS velikosti pozadí:, místo toho, aby byla roztažena mimo proporce. Zadejte název a volitelný podnadpis: oba jsou měřeny znak po znaku podle vlastních metrik písma na plátně, takže nadpis, který je příliš dlouhý na to, aby se vešel na jeden řádek, se zalomí na druhý nebo třetí řádek na hranici skutečného slova, místo aby se rozlil přes okraj nebo byl neviditelně oříznut. Vyberte zarovnání na střed nebo doleva, vyberte barvu textu, která se čte na pozadí, a do rohu umístěte volitelné logo v pevné a čitelné velikosti.

Pod plátnem jsou čtyři malé kartičky přibližné tomu, jak hotový obrázek vypadá, jakmile jej skutečná platforma zabalí do svého vlastního chromu: karta Twitter/X zobrazuje pouze doménu a tučný název pod obrázkem bez řádku s popisem, Facebook přidá pruh domény s velkými písmeny nad blok názvu a popisu, LinkedIn umístí doménu pod název bez jakéhokoli popisu a název Discord vloží do vlastního obrázku a temný obrázek. Jedná se o stylizované aproximace pro účely plánování – jasně označené jako ilustrativní, s řádkem domény, který zadáte sami – nejde o živé načtení nebo snímek obrazovky skutečných platforem, protože sdílení odkazu a ponechání vlastního prohledávače každé platformy číst skutečné metaznačky og:image a og:title vaší stránky je to, co ve skutečnosti vytváří aktuální kartu.

Vše se vykresluje lokálně na elementu HTML canvas ve vašem prohlížeči: název, titulky, nahrané pozadí a logo nikdy neopustí vaše zařízení a exportovaný soubor je čistý canvas.toBlob() PNG obsahující pouze to, co jste složili – do staženého obrázku se nezapékají žádné okraje makety, falešné pruhy prohlížeče nebo loga platformy. Potřebujete-li poté změnit velikost nebo převést exportovaný PNG, nástroje pro změnu velikosti obrázků a převodník obrázků na tomto webu budou pokračovat tam, kde končí.