Jak rychle, snadno a online upravovat obrázky pro váš mailing

Dobrý den, dovolte mi, abych vás přivítal na dnešním webináři. Moje jméno je Jan Spáčil. Dnešní téma je, jak rychle, snadno a online upravovat obrázky pro váš mailing. Budeme si povídat o tom, jak obrázky přizpůsobit, nachystat a upravit, když posíláte e-maily.

Obsahem dnešní tři čtvrtě hodiny je, jak změnit velikost a formát obrázku tak, abyste ho mohli co nejpohodlněji použít pro váš mailing. Jak je to s velikostí a jak s ní pracovat. Nejenom s velikostí z hlediska rozměru obrázku, ale také s datovou velikostí, tedy jak velké by měly být obrázky v mailingu celkově. Podíváme se na to, jak oříznout obrázek na přesný rozměr a jak z něho případně vyříznout kolečko. Představím vám přitom online aplikaci, kterou já osobně na úpravu obrázků používám velmi rád.

Podíváme se také na to, jak fungují obrázky v takzvaném dark modu, což je ten barevně převrácený režim, který používají třeba mobilní telefony, když zobrazují e-maily, a některé počítačové aplikace. Takže jak případně upravit logo a jak vůbec k obrázkům pro tento režim přistupovat.

Taky se podíváme na to, jak v Quandě funguje název obrázku neboli takzvaný alt text. To je název obrázku, který se zapíše do odeslaného e-mailu. Ukážu, jak ho můžete využít ve chvíli, kdy vás příjemce nemá povoleného jako bezpečného odesílatele. Je to třeba zákazník nebo klient, kterému posíláte e-mail poprvé a on zatím nemá vaši adresu nebo doménu povolenou ke stahování externího obsahu, takže například v Outlooku rovnou nevidí obrázky. Jak si pomoct právě tímto textem neboli názvem obrázku, jak je možné ho nastylovat a jak to funguje.

Přepnu se do prohlížeče a podíváme se na první bod, a to je, jak upravovat velikost obrázku. Pro tuto práci jsem si oblíbil českou aplikaci, která se jmenuje Photopea. Píše se to Photopea, jak to vidíte tady v adrese a koneckonců i v názvu produktu samotného. Je to český online nástroj pro úpravu fotografií a pixelové grafiky. Je to velmi hodnotná alternativa aplikací, jako je Photoshop. Pravděpodobně neumí do hloubky všechno to, co Photoshop, ale s tím, co běžně potřebujeme například pro mailing, si s ním vystačíte.

Tento nástroj mám rád proto, že je online. Zatím je pořád zdarma, uvidíme, jestli to tak vydrží, ale to není ta hlavní věc. Umí načítat obrázky přetažením myší, umí velmi pěkně pracovat se změnou velikosti, s ořezem a s dalšími věcmi, to si za chvíli ukážeme. A dokáže velmi pěkně exportovat obrázky s průhledným pozadím. Musím říct, že ten nástroj je velmi přívětivý.

Pojďme se podívat na to, jak změnit velikost obrázku. Když se vrátím zpátky do e-mailu, v e-mail editoru pomocí ozubeného kolečka vpravo nahoře vidíte rozměr vašeho e-mailu v pixelech. Já si ho tady třeba natáhnu na 730 pixelů. Výchozí velikost je 650. Doporučuji dělat e-mail širší, protože v něm velmi pěkně funguje responzivita, takže pro užší monitory se e-mail přeskládá. Pro širší monitory je pak lepší, když je e-mail trochu širší. Maximální velikost je tady 800.

Když mám celý e-mail široký třeba 760 pixelů a podíváme se na nastavení okraje, mám tady přednastavený 25pixelový okraj. Kdybych to stáhl na 750 pixelů, šířka aktivního e-mailu, tedy šířka těla bez okrajů, je 700 pixelů. Proto je zbytečné dávat do tohoto místa obrázek, který má například 4 000 pixelů na šířku.

Celková velikost obrázků, které vložíte do e-mailu a které se následně stahují z našeho serveru, když si příjemce váš e-mail zobrazuje, by neměla přesáhnout dva megabajty. Do e-mailu samozřejmě můžete dát obrázky mnohem větší, ty se přizpůsobí, ale pokud jich budete mít víc, tuto velikost velmi rychle přesáhnete. Není to něco, co by blokovalo doručitelnost, ale když se na to podíváte z pohledu příjemce, čím je obrázek datově menší, tím rychleji se mu zobrazí a načte. Pokud tam mám například takovéto logo a pošlu ho obří, v rozměru 8 000 na 8 000 pixelů a s deseti megabajty, bude příjemce chvíli čekat, než se mu logo zobrazí, samozřejmě podle rychlosti připojení k internetu.

Moje první doporučení tedy je: používejte ideálně obrázky jedna k jedné, případně si je přizpůsobte co nejblíž velikosti, kterou potřebujete. Já tady mám obrázek, který má na celou šířku sloupce 700 pixelů. Pokud sem takový obrázek budu chtít vložit, vložím si tady zástupné místo pro obrázek a obrázek do něj vložím. Předtím, než ho tam vložím, si ho upravím právě pomocí tohoto nástroje. Obrázek si otevřu a velmi rychle změním jeho velikost. Tady jsem si jeden předchystal.

Obrázek se mi načetl a já ho teď můžu změnit pomocí horního menu, položka Obraz, Velikost obrazu. Vidíte, že aktuální obrázek má rozměr 7955 krát 3800 pixelů. Protože mám šířku 700 a vím, že širší obrázek se tam nezobrazí, můžu ho klidně upravit na velikost 700. Přepíšu tedy rozměr na 700, kliknu bokem do dialogu, druhý rozměr se mi automaticky přepočítá, a dám OK. Obrázek se změnil. Pokud ho chci vidět ve skutečné velikosti, kliknu na Zobrazit, Skutečné pixely a mám tady obrázek ve velikosti jedna k jedné. Uložím ho přes Soubor, Uložit jako JPEG.

K rozdílu mezi PNG, JPEGem a dalšími formáty: e-maily podporují formát PNG, JPEG i GIF. Ne všechny e-mailové programy podporují SVG. PDF je taky formát, ve kterém obrázek být nemůže. Web Picture neboli WebP také není plošně podporovaný. Pokud tedy budete obrázek ukládat, uložte ho buď ve formátu PNG, JPEG nebo GIF. Pro běžné obrázky se nejčastěji používá JPEG. Pro obrázky s průhledným pozadím pak PNG, protože tento formát umožňuje uložit obrázek s průhledným pozadím.

Klikám tedy na JPEG. Nabídlo mi to rozměr 700 krát 339 a upravím si název obrázku. Napíšu třeba „žena na modrém pozadí“. Dám uložit a obrázek se vám stáhne do počítače, do stažených souborů. Když ho teď budu chtít vložit do e-mailu, kliknu na obrázek, dám Vybrat, Stažené soubory, mám tady obrázek, který jsem si právě uložil, a tímto způsobem ho načtu do e-mailu. Mám ho v nejlepším možném poměru velikosti a kvality, jaký můžu mít, a mám ho vložený jedna k jedné.

Já osobně si obrázek zpravidla ukládám trošku větší, abych nemusel pořád přepočítávat, jak velký zrovna mám e-mail. Vím, že maximální šířka je 800, takže obrázky zpravidla ukládám ve velikosti 800 a tak je vkládám do e-mailu.

Pokud bych chtěl obrázek nějak upravit, protože mi třeba úplně nevyhovuje, že je takto vysoký, mohl bych samozřejmě upravit jeho rozměr, ale strany se mi začnou zmenšovat poměrově vůči sobě. Pokud bych tedy chtěl jen řekněme polovinu obrázku nebo nějaký výřez, musím si pomoct takzvaným ořezem. To zase velmi jednoduše uděláme v Photopea.

Máme tady obrázek, který máme k dispozici, a v levém menu je ikona se zkříženými čarami, která se jmenuje Ořez. Když na ni kliknu, obrázek se mi takto označí a já můžu pomocí bodů na okrajích začít zónou pro ořez různě pohybovat. Nebo můžu využít přesnější rozměr, pokud mi jde o to, aby ořez měl přesnou velikost. Tohle teď zruším a vrátím zpět, tady se mi to právě ořízlo.

Kliknu na ikonu ořezu a zvolím si volbu pro nastavení ořezu. Často používám pevnou velikost, kde si můžu přesně nastavit šířku i výšku ořezu. Nastavím si 700 pro šířku, protože to je 100 % šířky obrázku, ale vím, že na výšku bych ho chtěl třeba jen 250. Změním tedy rozměr na 250 a zóna se mi tady změní na 700 na 250 pixelů. Se zónou pak můžu po obrázku libovolně hýbat.

Vidíte tam červené čáry na krajích obrázku, které mi zónu ukotvují, abych ji měl úplně na kraji, takže to nemusím hlídat. Teď vidíte i červenou čáru uprostřed, která znamená, že jsem na středu obrázku. Já bych ale chtěl výřez spíš v horní části, abych tam tu paní měl i s loktem a s hlavou. Například takto. Zónu si tedy umístím, kam chci, zmáčknu Enter a obrázek se mi ořízne do rozměru 700 krát 250 pixelů.

Zase si ho uložím přes Soubor, Uložit jako JPEG. Vidíte, že rozměr je 700 na 250, a nějak si ho pojmenuju, třeba „žena 700 na 250“, a dám uložit. Do e-mailu ten obrázek vložím standardně a budu tam mít už jen výřez. Tímto způsobem si můžete obrázek upravit, aniž byste ztratili jeho kvalitu. Pokud ho ale potřebujete na jiný rozměr a chcete zachovat šířku, musíte si ho oříznout do požadovaného poměru a velikosti.

Občas se objeví i potřeba, třeba když mám dvousloupcový design, udělat z obrázku kolečko nebo jakýkoliv jiný tvar. Kolečko bývá poměrně časté, tak si ho ukážeme. Řekněme, že bychom si chtěli vyříznout pouze kolečko, ve kterém bude tady ta slečna.

V levém menu najdete ikonu, která se jmenuje obdélníkový výběr. Když na ni kliknu pravým tlačítkem, můžu zvolit eliptický výběr, takže můžu dělat výběr kruhový. Vím, že mám obrázek 700 na 250, takže si nastavím pevnou velikost, a abych měl kolečko, nastavím 250 na 250. Kdybych nastavil 250 na 100, měl bych samozřejmě elipsu. Mám tedy 250 na 250, a když kliknu do plochy a potáhnu myší, kolečko se mi tady naznačí a já s ním můžu po obrázku pohybovat. Mohl bych udělat i takovýhle výřez, ale řekněme, že chci výřez na celou výšku. Proto mám 250 na 250 a do výřezu umístím tu slečnu.

Když tohle děláte, je důležité mít jistotu, že máte aktivní správnou vrstvu. Obecně je při práci s touto grafikou potřeba mít vrstvu aktivní. Jakmile jsem na obrázek položil kruhový výběr, stačí klasicky zmáčknout Ctrl C, Ctrl V, a vidíte, že mi tady přibyla další vrstva, ve které je pouze vyříznutý obrázek. Když si okem skryju vrstvu pod ní, objeví se mi tady jen výřez, který jsem udělal pomocí kolečka. Takže teď mám kolečko. Spodní vrstvu už nepotřebuju, takže ji můžu přetáhnout myší do koše tady dole a zůstane mi jen horní vrstva.

Kdybych teď obrázek uložil, pořád by měl 700 na 250, takže potřebuju upravit pozadí na velikost obrázku. Tomu se říká plátno, to je něco, na čem obrázek leží. Upravíte ho tak, že v horním menu kliknete na položku Obraz, Velikost plátna. Plátno si upravím na 250 na 250 s tím, že obrázek chci mít uprostřed, aby výsledný formát obrázku byl 250 na 250. Tím, že si ho uložím s průhledným pozadím, budou okraje průhledné a zobrazí se pouze kolečko, které jsme si vyřízli.

Upravil jsem si to tedy na tuto velikost. Teď si obrázek umístíme na střed, pomocí červených linek se tam přichytí, a máme obrázek ve velikosti 250 na 250, který je ale kolečko s průhlednými okraji kolem sebe. Abych ho mohl umístit do e-mailu, uložím si ho ve formátu PNG. Formát PNG mi umožní uložit obrázek s průhlednými okraji. Když na to kliknu, vidím v náhledu, že kostkované okraje pořád naznačují průhledné pozadí. Kdybych zvolil formát JPEG, vidíte, že pozadí je bílé. JPEG nepodporuje průhledné pozadí, takže bych měl kolečko na bílém pozadí. Pokud má e-mail bílé pozadí, nebude to ničemu vadit, ale jak si za chvilku ukážeme, pro dark mode je lepší, když je pozadí průhledné.

Vrátím se tedy zpátky, dám Soubor, Uložit jako PNG, opět si ho pojmenuju, že má průhledné pozadí, a dám uložit. Vrátím se zpět do e-mailu. Tady mám třeba nějaký textový popis a nadpis a sem bych chtěl umístit kolečko. Dám si tedy Vybrat, tady mám stažený obrázek, dám načíst a mám ho tady.

Teď je řádek vyšší než samotný vložený obrázek a velikost obrázku se řádku přizpůsobí. Když se obrázek zmenšuje, kvalitu neztrácíme. Když ho ale zvětšujeme oproti jeho originálnímu rozměru, kvalitu lehce ztrácíme, takže je lepší zakliknout tady Originální velikost. Tím se obrázek vrátí na 250 krát 250, jak jsme ho měli uložený. A máme obrázek, který je kulatý a má kolem sebe průhledné pozadí. Tímto způsobem můžete u obrázků měnit velikost a dělat z nich výřez, ať už obdélníkový nebo kruhový.

Teď bych se rád podíval na tři loga, která na bílém pozadí vypadají totožně. Mají stejnou velikost a vypadají stejně, ale jde o tři různé soubory a tři různá zpracování obrázku. Proč vám to chci ukázat? Souvisí to hlavně s něčím, čemu se říká dark mode. Některé počítačové aplikace a spousta mobilních e-mailových programů používá inverzní zobrazení e-mailu. To znamená, že z bílé udělají černou a z černé bílou.

Jak to s e-maily bývá, není to vždycky tak jednoduché. Přístup k dark modu je různý. Existuje takzvaný částečný dark mode a plný dark mode. Plný dark mode skutečně převrací všechny barvy, vždycky udělá tu inverzní, takže z červené vám udělá zelenou, z bílé černou, z bílého pozadí černé pozadí a podobně. Částečný dark mode, který třeba používá Microsoft ve svých programech, barvy posouvá podle nějaké své vlastní logiky. Některé převrátí úplně, některé jen trošku a některé zachová. Není tedy úplně jednoznačné, že by dark mode vždycky všechno otočil na inverzní barvu.

Pokud posíláte e-mail s bílým pozadím, jako mám tady, a přijde vám do Outlooku na počítači, je všechno v pořádku. Pokud ale přijde do dark modu, loga už můžou vypadat jinak. Nasimulujeme si to tak, že tady udělám černé pozadí řádku, a ukážeme si, jak loga v dark modu vypadají, když se zobrazí na černém pozadí.

Tady vidíte, že loga uložená různě a v různých formátech se v dark modu zobrazí jinak. Tady máme logo na bílém pozadí ve formátu JPEG. Protože dark mode obrázek nijak nezmění, vyrobí vám i v dark modu takovouhle bílou kostku. Někdy to nevadí, ale někdy to vzhled e-mailu zbytečně rozbije a nevypadá to vizuálně hezky, když je tam najednou bílá kostka s obrázkem.

Druhé logo je stejné jako tady, ale je uložené na průhledném pozadí. Tady vidíte, že se zobrazuje celkem dobře a je viditelné. Pokud by ale šlo například o tmavší text ve formě obrázku, na tmavém pozadí už může být problém s kontrastem a s čitelností. I v tomto případě je to trošku na hraně, protože ta tmavě modrá je dost tmavá a logo může zaniknout.

Třetí verze je to samé logo s drobným bílým stínem. To se v poslední době v e-mailech používá dost často právě pro podporu zobrazení tmavých textů, tmavých log a čehokoliv, co nemá přirozeně dobrý kontrast vůči černé barvě v pozadí. Na jednu stranu tak pod logem nemáte bílý čtvereček. Na druhou stranu, kdyby tady šlo třeba o černý text, nebyl by vůbec vidět, protože pokud je na průhledném pozadí a jde o obrázek, dark mode ten černý text na bílý nezmění. Běžný text se na bílý převrátí, ale text, který je součástí obrázku, zůstane černý.

Poslední dobou se na to začalo používat právě takzvané podstínování loga, tedy takovýhle bílý stín, který na bílém pozadí není vůbec vidět. Logo tedy nijak nenaruší, ale pokud si ho zobrazíte na černém pozadí, má kolem sebe bílý stín.

Jak tohle vyrobit v Photopea? Teď si tady to logo otevřu a ukážu vám, jak postupovat, kdybyste něco takového chtěli vyrobit. Mám tady obrázek, ze kterého jsem vycházel. Jako první vidím, že mám logo a tady vrstvu, která tvoří bílé pozadí. Tu si smažu, abych měl obrázek na průhledném pozadí.

Teď použiju tady nástroj pro označení obrázku, ten čtvercový. Označím si celou plochu, tedy celý obrázek, a udělám si kopii: Ctrl C a Ctrl V. Naskočí mi tady další vrstva, ve které je logo také. Teď mám tedy na pozadí jedno logo a to samé logo ho překrývá. Obrázek se nezměnil, ale mám tady novou vrstvu.

Dole mám nástroj pro výběr barvy. Pokud tam nebudete mít bílou, kliknete na čtvereček a nastavíte si bílou barvu, protože chceme udělat bílý stín. Princip je takový, že si logo přebarvíme na bílo, rozmažeme ho a to nám vytvoří podstínování stávajícího loga. Nastavím si tedy bílou barvu a pomocí nástroje kyblíku, tady té ikony vlevo, si stávající logo takhle naklikám a barvy změním na bílou. Teď mám bílé logo, které aktuálně překrývá moje barevné logo.

Teď ho potřebuju rozmazat, protože kdybych to takto uložil, měl bych loga přes sebe a nic by se nezměnilo. Potřebuju dosáhnout toho, aby se okraj rozmazal a trochu zvětšil. Udělám to tak, že v horním menu půjdu na Filtr, zvolím Rozostření a tady položku Gaussovské rozostření. Ta mi nabízí, jak moc se to má rozostřit v pixelech. Natáhnu si to třeba na dvacet pixelů, aby se stín trošku natáhl do krajů, a kliknu na OK.

Tím se mi celé logo rozmazalo a trošku roztáhlo. Teď si tady změním pořadí vrstev, abych měl nahoře logo, které chci, a přehodím ho nad rozmazanou vrstvu. Logo se mi teď tady zobrazilo. Teď je to tady špatně vidět, ale vidíte, že drobný stín kolem loga už se vytvořil.

Pokud bychom si to chtěli i tady ověřit, můžeme si přidat jednobarevnou krycí vrstvu, kterou uděláme černou, a tu vrstvu dáme úplně dolů. Teď se nám logo ukáže a vidíte, že jsme si touto úpravou vyrobili logo, které má pod sebou bílý rozmazaný stín.

Kdybychom si ho teď chtěli uložit, abychom s ním mohli pracovat v e-mailu, černou vrstvu smažu a klasicky kliknu na Soubor, Uložit jako PNG a logo si uložím. Já ho teď ukládat nebudu, už tam jedno takové mám. Vy byste si ho ale uložili a tímto způsobem ho vložili do e-mailu.

Těmito jednoduchými kroky dokážete stávající logo, text nebo cokoliv jiného přebarvit na bílo, rozmazat a udělat bílý stín, který vám pak v e-mailu udělá takovéhle podstínování. Pokud je to bez stínu v pořádku, je to dobře viditelné a je tam dobrý kontrast, stín vyrábět nemusíte. Pokud je kontrast horší, doporučuju stín vyrobit. Dost často totiž dostávám e-maily, kde se v dark modu některá loga, která jsou třeba skoro černá a mají průhledné pozadí, ztrácí a skoro nejsou vidět. To je pak škoda, když pošlete příjemci něco, co neuvidí.

Pokud byste měli k čemukoliv, co tady zaznělo, nějaké dotazy, napište nám je prosím do chatu. Na dotazy se podíváme na konci dnešního webináře.

Poslední téma, které tady máme, je název obrázku. To je něco, co jsem zmiňoval na začátku. Když kliknete na obrázek, v pravém menu je položka Název obrázku. Doporučuju ho vždy použít, ať už ho budete stylovat nebo ne. Z hlediska kódu, doručitelnosti a správnosti e-mailu by totiž každý obrázek měl mít nějaký název. Určitě je tedy lepší, když jednotlivé obrázky v e-mailu pojmenujete.

Nemusí to ale být jen název, aby byl obrázek pojmenovaný. Můžete ho využít i pro zákazníky, kteří vám jako odesílateli zatím zobrazování obrázků nepovolili, aby tam něco viděli a neměli tam jen červený křížek. Celá řada e-mailových programů podporuje něco, čemu se říká stylování alt textu neboli stylování názvu obrázku.

Teď si tady obrázek nějak pojmenuju, třeba „žena na modrém pozadí“. Určitě je ale lepší, když ho pojmenujete smysluplně. Když mám tady například logo Quanda, je lepší, aby mělo název Quanda, tak jak to mám tady, protože když se logo nezobrazí, chci, aby se zobrazil ten název. Tímto způsobem můžu dosáhnout toho, že pokud se zákazníkovi obrázek nezobrazí, zobrazí se mu název. Obrázek tady mám pojmenovaný jako Quanda a nastyloval jsem si ho. Dal jsem mu velikost, písmo, barvu, tučnost a řádkování. Když kliknete na Nastavit vzhled, zobrazí se vám nastavení vzhledu pro tento název.

Když si to tady nasimulujeme smazáním adresy obrázku, ve chvíli, kdy příjemce e-mailu nemá povolené zobrazování obrázků, zobrazí se místo obrázku text Quanda, který je nastylovaný pomocí tohoto pravého menu. Celá řada e-mailových programů takzvané stylování alt textu podporuje, takže vám místo obrázku zobrazí tento text. Je to určitě lepší než ikonka obrázku, který se nenačetl. Když je to logo, může tam být název vaší firmy. Když je to obrázek nějakého produktu, může tam být název produktu nebo služby. Je lepší, aby se na tom místě zobrazil nastylovaný nadpis než nic nebo červený křížek.

Napsal jsem k tomu poměrně podrobný návod, který najdete na našem blogu. Teď ho hledat nebudu, ale poprosím tady kolegu Štěpána, aby nám článek našel a vložil vám odkaz do chatu. V článku najdete celou řadu informací o tom, jak alt text a jeho stylování používat, jak to funguje, ve kterých e-mailových programech v počítači se zobrazí a ve kterých ne, které vám nadpis zobrazí tak, jak ho vidíte teď tady, a které vám ho naopak dají jen jako součást nějakého popisku, a jak je to v mobilních programech.

Například mobilní zařízení zobrazování alt textů většinově podporují, takže tam se určitě vyplatí ho použít. U počítačových programů je to jak u kterého. S Outlookem je to horší, u ostatních je to lepší. Na Macu je například podpora ve všech verzích pošty. Určitě tedy převažuje podpora, kdy se nadpis zobrazí, nad místy, kde se nezobrazí. Pokud ale jste v B2B oboru a posíláte zákazníkům, kteří mají Outlook, název se tam sice zobrazí, ale jen jako součást popisku plochy, která informuje o tom, že obrázek nebylo možné načíst, protože odesílatel není schválený jako bezpečný. V Outlooku tedy toto zobrazení podporované není, ale na celé řadě dalších míst ano. Určitě tedy doporučuju obrázky pojmenovávat, a pokud budete chtít, můžete nastavit i jejich vzhled a formátování. A tady logo vrátím zpátky.

Tím jsme vyčerpali dnešní témata. Podívám se tady do chatu, jestli máme nějaké dotazy. Štěpáne, máme nějaké dotazy?

Kde se vezme webová adresa obrázku? Ještě jednou nasdílím obrazovku. Tahle adresa, ta, co je tady v tom řádku? Pokud jde o tuto adresu, a doufám, že ano, ta se tady vygeneruje automaticky, když uložíte obrázek. Je to adresa na naše úložiště. Funguje to tak, že když načtete obrázek z vašeho počítače, uloží se k nám na server, kde spravujeme všechna média, všechny obrázky a další věci. Úložiště nám vrátí tuto adresu, ta se pak vloží do kódu e-mailu a e-mail si z tohoto místa daný obrázek načte. Adresa se vám tam tedy vygeneruje automaticky po načtení obrázku.

Má to i jednu výhodu: úložištěm obrázku nemusí být náš server. Pokud máte například na svém webu nějakou produktovou fotku, ale nechcete ji ukládat a posílat k nám, je možné obrázek prolinkovat přímo z vašeho webu nebo odkudkoliv jinud. Vyhledám si tady nějaký obrázek lesa. Obrázek se totiž může načítat buď od nás nebo z jakéhokoliv jiného místa.

Když na vašem webu nebo kdekoliv jinde, ale samozřejmě pozor na práva k obrázkům, kliknete na obrázek pravým tlačítkem, je tady volba Kopírovat adresu obrázku. Ta zkopíruje adresu úložiště, kde je obrázek uložený. Dám tedy kopírovat adresu obrázku, vrátím se zpátky do e-mail editoru, do tohoto místa, kde se mi teď zobrazuje zástupné místo, adresu vymažu a vložím tam adresu, kterou jsem si zkopíroval. A mám v e-mailu obrázek. Bude to fungovat, e-mail se s ním normálně pošle a obrázek se bude zobrazovat. Už ale nemáme pod kontrolou, co se s ním stane. Kdyby ho někdo z úložiště, kam teď obrázek směřuje, vymazal, v e-mailu se samozřejmě přestane zobrazovat.

Určitě je tedy lepší obrázek načíst z počítače a uložit k nám. Pak máte jistotu, že obrázek, který jste tam vložili, je uložený u nás. My obrázky nemažeme, takže tam jsou napořád a zákazníkům budou fungovat nonstop. Tím, že jsou média fyzicky oddělená od naší databáze na jiném serveru, obrázky se načítají vždycky, i když má Quanda okno údržby, kdy je odstavená kvůli údržbě nebo aktualizaci. Obrázky se načítají vždycky bez ohledu na to, jestli Quanda zrovna jede nebo nejede, když to tak řeknu.

Dobrá. Máme ještě nějaký dotaz? Ano.

Název obrázku je něco jiného než titulek, ale principiálně je to alt text v kódu. Píše se sem do názvu obrázku. Titulek se používá spíš pro odkazy. Když edituji odkaz, mám tam potom titulek, takže titulkem nazýváme trošku něco jiného. Když tady vložím odkaz, třeba udělám obrázek proklikávací, vložím tam odkaz na Quanda.cz a dám titulek „Web Quanda“, titulek je něco, co se zobrazí při najetí myší na obrázek tady v nápovědné bublině.

Alt text neboli název obrázku se ale nezobrazuje nikde, ani vám, ani příjemci e-mailu. Je pouze v kódu e-mailu a pojmenovává obrázek. Z pohledu kódu je určitě čistější ho mít vyplněný. A je to i obecné doporučení napříč naším oborem: obrázky v e-mailu pojmenovávat. Tohle je tedy skutečně název obrázku a titulkem spíš nazýváme nápovědný text pro odkaz.

Máme ještě nějaký dotaz? Ne, tak to je všechno. Moc vám děkuju za pozornost a díky, že jste dneska přišli. Pokud byste k tomu měli další dotazy nebo jste to šli zkoušet do Photopea a něco vám nešlo, prosím ozvěte se nám, rádi vám s tím pomůžeme.

Stejně jako minule bych vás rád poprosil o zpětnou vazbu. Štěpán vám po skončení webináře zašle krátký dotazník, prosím vás o jeho vyplnění a odeslání. Jedna z otázek se ptá i na tipy na příští témata. Určitě budeme rádi, když nám nějaký tip dáte. Pokud to bude jakkoliv možné, rádi ho v některém z dalších dílů našich pravidelných měsíčních webinářů připravíme a podělíme se o know-how, pokud ho v té oblasti budeme mít.

Ještě jednou děkuju, že jste přišli. Přeji vám hezký zbytek léta a budu se těšit u příštího webináře. Mějte se hezky, na shledanou.