Jak udělám čistě bílý obrázek

janavk:
Otevři Malování a ve vlastnostech obrázek nastav na velikost 970x170px, následně jen menu: Soubor -> Uložit -> ... -> Hotovo!

Podívat se, jak přesně to tam je teď nemůžu, na svém počítači mám Linux.

janavk:
„jak ten bílý obrázek 970x170px“
Prečo by si ho robil v takej veľkosti? Stačí ho spraviť 1x1px a roztiahnuť na celé pozadie.

„photoshop či cokoliv jiného nemám a hlavně neovládám.“
„Skicár“ vo Windowse snáď zvládneš.

janavk:
„Takového exota jste tady myslím dlouho neměli..“
No, spíše se divím, že jsi dokázala napsat sem na fórum, když neovládáš základní funkce počítače, jako je třeba tvorba primitivních obrázků.

janavk:
„pohořela jsem hned na tom, že nemohu najít, kde otevřít malování.“
Vo Vistovskom Štartmenu napíš do dolného políčka pre vyhľadávanie Skicár (čo ti, mimochodom, spomínal už aj _es) a stlač Enter, otvorí sa ti program Skicár/Malovanie. Ak máš iný Windows, otvor klasické Štartmenu, a tam by defaultne mal niekde byť prichytený odkaz na Skicár či Malovanie. Ak nie je, klikni v tom menu na Zobraziť všetky programy, trochu sa tam poobzeraj a Malovanie tam určite nájdeš.

V prípade, že máš iný operačný systém, to ti veľmi neporadím, na Linuxe som ani ja nenašiel jednoduchý editor obrázkov a Mac som nikdy nepoužíval.

janavk:
„pohořela jsem hned na tom, že nemohu najít, kde otevřít malování“
Ve Windows XP to je:
Start > Všechny programy > Příslušenství > Malování
Obrázek > Atributy > Šíška xxx, Výška xxx, Barvy - černobíle
Soubor > Uložit > Uložit do + Název souboru* + Uložit jako jako typ PNG (PNG)

*Malování je potvůrka, některé přípony dává velkými písmeny. Dá se tomu zabránit třeba tak, že napíšeš jméno souboru i s příponou do uvozovek, příklad: "hlavicka.png"
Ve jménech souborů pro web nepoužívej mezery ani diakritiku, jako třebas "hlavička.png".
Pro jednoduché obrázky (málo barev) je vhodnější formát PNG, než JPEG, důvodů je více.

janavk:
A keby si naozaj nevedela nájsť ten Skicár, vytvoril som živú ukážku takého obrázku (trvalo to asi osem a pol sekundy, z toho 5 sekúnd sa mi otváral program Logo Motion):
Bohužiaľ je to obrázok 1x1 pixel, takže tu asi nebude veľmi viditeľný (na mobiloch pri maximálnom priblížení by mal byť vidieť malý biely štvorček), skôr sa pozri na živú ukážku použitia.

Bubák:
„Pro jednoduché obrázky (málo barev) je vhodnější formát PNG, než JPEG, důvodů je více.“
Nemám v formátoch až taký prehľad, ale mám dojem, že na 1x1 pixel je najlepší GIF (používa sa prevažne pre malé obrázky). Ak hovorím tlachy, tak ma prosím, oprav.

Doplním, že při vykreslování trochu většího než jednopixelového obrázku se prohlížeč méně nadře a z hlediska datového přenosu je rozdíl mezi jedním a několika stovkami pixelů zanedbatelný, zvláště když formát bude PNG a obrázek jednobarevný.

janavk: „já to v té nabídce "Příslušenství" prostě nemám“
Zkus si to vygůglit v obrázcích, ať víš, jak vypadá ikonka toho programu, měl by být v každé základní instalaci Windows.

Tady ten obrázek máš:

Paint.NET je úplně jiný program, takový "fotoshop chudých", jednoduché ovládání, umí křivky a vrstvy.


Nejrychlejší postup v Paint.NET (mám jej v angličnině, nechce se mi instalovat češtinu):
Image > Canvas size, nastavíš šířku (width) a výšku (height), ostatní nastavení není v tomto případě důležité.
Dáš uložit jako PNG, ve jménu souboru pro web nepoužívej mezery ani diakritiku. Dialog Save Configuration ponech na autodetect, mimo zvláštní případy je to nejvhodnější volba.

Pro zajímavost, co se stane, když klepneš na Start > Spustit (nebo stiskneš win + R) a napíšeš mspaint? Pokud je Malování nainstalováno, spustí se. Možná jen někdo smazal ikonku malování z Příslušenství.

Petr ZZZ:
„Doplním, že při vykreslování trochu většího než jednopixelového obrázku se prohlížeč méně nadře a z hlediska datového přenosu je rozdíl mezi jedním a několika stovkami pixelů zanedbatelný“
Nezpochybňuji to, ale nemáš k tomu nějaké doplňující informace? Nedovedu si vysvětlit, proč by v tom vykreslování měl být vnímatelný rozdíl. Že 970×170 px nejspíš nebudou stovky pixelů je asi jasné… Je však pravda, že ten rozdíl dat velký nebude.

jenikkozak:
Papouškuji Chamurappiho; že trochu větší než jednopixelový obrázek je lepší, zmínil myslím nejen tady, ale další výskyt či vysvětlení se mi nedaří najít.

Petr ZZZ: To zalezi na algoritmech. Spatne udelany tapetuje 1x1 na 1000px sirku 1000x. Celkove 1000 kroku cyklu. Kdezto 100x1 se tapetuje 10x, 10 kroku cyklu (to je tim, ze jsem zvolil 100x100, pri 10x10 je to 100 kroku). Coz je vykonove mnohem mensi zatez. Chytry algoritmus si vytapetuje z 1x1 treba 10x10 a pak 100x100 obrazek a pak ho dal tapetuje. Celkove 30 kroku cyklu.
A je to teda v nekolika starsich tematech, mozna i s odkazy.

Bubák:
„Pro zajímavost, co se stane, když klepneš na Start > Spustit (nebo stiskneš win + R) a napíšeš mspaint? Pokud je Malování nainstalováno, spustí se. Možná jen někdo smazal ikonku malování z Příslušenství.“
V modernějších Windows (Vista a novější) je asi nejjednodušší postup stisknout Windows tlačítko na klávesnici (což rozbalí nabídku Start, resp. obrazovku Start ve Windows 8) a začít psát (měl by být rovnou aktivní řádek „Prohledat programy a soubory“) název programu: „Malování“ (v anglických Windows „Paintbrush“).

jenikkozak:
„Nezpochybňuji to, ale nemáš k tomu nějaké doplňující informace?“
Jednou jsem ten efekt viděl, ale už tak před deseti lety.

Tehdy opravdu když byl na pozadí stránky 1px opakující se obrázek (roztažený být nemohl, vývoj CSS3 ještě ani nezačal), hlavně na slabších počítačích šlo opravdu vidět, jak prohlížeč ty stovky* opakování postupně vykresluje. Výhoda je, že závislost počtu opakování na počtu pixelů je hyperbola (1/x), takže první přidaný pixel udělá největší rozdíl.

Týká se to samozřejmě opakování obrázku na pozadí, nevím, jak to bude s roztažením.

Ještě jedna zajímavost: Hlavně když jde o PNG obrázek s nějakým pravidelným vzorem, nemusí být obrázek ve větším rozměru datově větší.
Příklad: Mám přechod černá-bílá v PNG, široký 10px a jeho varianty na 1-4px výšky (jednoduše n opakování té 1px varianty pod sebou).
Výsledná velikost souboru:
1x10 px: 170 B
2x10 px: 184 B
3x10 px: 193 B
4x10 px: 178 B

Další věc je, že třeba ten bílý obrázek 500x100 co poslal Petr ZZZ má velikost 468 bajtů, což skoro nemá cenu řešit. Pro zajímavost, je to zhruba 1% velikosti jQuery.

* vertikálního rozlišení displejů jako by se technický vývoj netýkal, za těch 10 let se výrazně nezměnilo

Oprava: Přesunul jsem poznámku, že se to týká opakování obrázku, k textu, ke kterému patří.

Joker:
„Hlavně když jde o PNG obrázek s nějakým pravidelným vzorem, nemusí být obrázek ve větším rozměru datově větší.“
Je použitá aj bezstratová kompresia, tú je tuším možné použiť aj v GIF obrázku. Jednotlivé softvéry sa môžu líšiť v tom, do akej miery ju použijú.

„Další věc je, že třeba ten bílý obrázek 500x100 co poslal Petr ZZZ má velikost 468 bajtů, což skoro nemá cenu řešit.“
Pri nastavení čiernobielej farebnej palety v obyčajnom Windows „skicári“ by mal veľkosť len 195 či 138 batov. Pri použití nejakých „špeciálnejších“ nastavení formátu či kompresie možno aj menej.

Joker:
116b indexovana paleta, vypnute komentare, cerna-bila ve vodorovnem smeru 10x10 (Gimp)

218b - bmp, run-length kodovani

_es:
„Pri nastavení čiernobielej farebnej palety v obyčajnom Windows ‚skicári‘ by mal veľkosť len 195 či 138 batov. Pri použití nejakých ‚špeciálnejších‘ nastavení formátu či kompresie možno aj menej.“
V IrfanView při uložení pluginem PNGOUT to je dokonce jen 100 bajtů (přeuložením přes GIF, nebo jiný formát, který neukládá rozlišení, případně dodatečným odstraněním chunku pHYs (info o rozlišení).


peta:
Tvůj obrázek jsem přeuložil do PNG ve škále šedé a dostal jsem se na 114 B, což je 2 bajtů méně, než u tvého obrázku v GIFu. S barevným obrázkem by tento trik nešel použít a velikost by narostla o zanedbatelných 10 bajtů.

Za deset let se dost věcí změnilo. Tehdy ještě skoro každý kodér věděl, co jsou to „bezpečné barvy“, vertikální rozlišení zobrazovacích zařízení se příliš nezměnilo, ale výkon zařízení narostl mnohonásobně. Tak nějak bych předpokládal, že i prohlížeče jsou v tomto směru lépe navrženy.

Reaguji na Jokera:
Při skutečně dobrém zmačkání mají bílé obrázky 1×10 až 4×10 všechny 82 bajtů (liší se navzájem jen v bajtu určujícím velikost a v CRC).

„roztažený být nemohl, vývoj CSS3 ještě ani nezačal“
Vývoj CSS 3 začal koncem roku 1998 a někdy od roku 2000 už šlo v Exploreru roztahovat obrázky DirectX filtrem AlphaImageLoader. Což u jednopixelového obrázku na některých grafických kartách vedlo (a tam, kde filtr funguje, stále vede) ke zvláštním výsledkům — mohl vzniknout jakýsi diagonální bíloprůhledný gradient.


Reaguji na jenikkozaka:
„Tak nějak bych předpokládal, že i prohlížeče jsou v tomto směru lépe navrženy.“
Jsou, více spoléhají na grafickou kartu, která také raději pracuje s většími texturami. Ale s malými obrázky už je určitě méně potíží než bývalo. Pokud vím, tak opakování malých obrázků špatně snáší z dnes používaných prohlížečů už jen Explorer 7.

„Tehdy ještě skoro každý kodér věděl, co jsou to ‚bezpečné barvy‘“
Před patnácti lety možná, před deseti už spíš ne. Nejsem si ani moc jistý, kdy a jak dlouho vůbec bývaly bezpečné barvy skutečně vnímané jako důležitý výčet. To, že se barva zaokrouhlila, nebyla z hlediska kodéra zase taková tragédie (na současných TN displejích se také zaokrouhluje) a tehdejší grafikové.

_es, peta, Chamurappi:
Má poznámka ve smyslu, že rozdíly jsou tak malé, že je můžeme zanedbat, zdá se vyvolala závody v produkování ještě zanedbatelnějších rozdílů :-)

Ale já víceméně i schválně nehledal co nejvíc optimalizovaný obrázek, ale spíš výchozí nastavení. Závěr „Při typickém použití jsou rozdíly minimální a optimalizací je můžeme ještě zmenšit“ je myslím lépe vypovídající, než „V ideálním případě se můžeme dopracovat až k nulovému rozdílu“.

jenikkozak:
„Za deset let se dost věcí změnilo.“
Ale předpokládal bych, že opakování obrázku sežere pořád podobné množství výkonu, jen výkon počítačů narostl do té míry, že to není vidět.
Samozřejmě pořád je řeč o opakování obrázku, roztažení obrázku asi bude něco úplně jiného.