Už dlho ma trápi neznalosť alebo nepochopiteľnosť toho, že ľudia a primárne klienti nevedia pochopiť, alebo im proste nejde do hlavy to, ako to, že ich obrázky na webe vyzerajú inak ako by si oni predstavovali a špeciálne sa jedná o témy ako "resizing" alebo "crop".
Teda ak človek do miesta kde je dané, že bude štvorček nahrá fotku, ktorá je obdĺžnik a nechápe prečo je fotka vyrezaná na stred a nezobrazuje sa celá, alebo potom keď sa zobrazí celá, prečo sú hore a dole biele miesta.
Práve tomuto som sa trošku chcel v tomto článku povenovať a možno objasniť prečo to je tak a pochopiť prečo sa to takto deje a prijať realitu.
Resizing alebo "zmena veľkosti"
V prvom rade sa poďme pozrieť na to čo je to ten "resizing" alebo po našom zmena veľkosti.
V podstate ide o to, že menite veľkosť obrázku tak aby ste nestratili jeho celkový obraz. Povedzme, že máte fotografiu bratislavského hradu, viď foto.
Povedzme toto máte u seba a chcete to nahrať vymyslím si na Instagram. A Instagram vám vyhodí hlášku, ops! fotografia má veľké rozmery prosím aby mala na výšku maximálne 1080px. Tak prídete a budete ju chcieť zmenšiť, ale zároveň nechcete z nej nič stratiť chcete ju tam tak ako je teraz.
Takže ju "proporčne" zmenšíte tak aby na výšku mala 1080px a šírku ponecháte uzamknutú k výške. To znamená, že obrázok bude mať teraz 864x1080 px a veľkosť 257kb, a zanechali ste vlastne fotku bez nejakej výraznej straty, teda nijako nie je orezaná ani z hora ani z dola. Tomu hovorím "resizing".
Crop alebo "orezanie"
Ďalej si poďme vysvetliť čo chápem pod pojmom "crop" alebo orezanie. To sa stane v momente keď potrebujem fotku úplne iných rozmerov.
Povedzme máme znova tú istú fotku ale tento krát nám Instagram povie, že on nechce len výšku 1080px ale chce aby fotografia bola v štvorčekovom formáte a je mu jedno aká to bude veľkosť, len nech to je štvorec. Takže čo urobíte. V tomto prípade máte asi tak dve možnosti. Ukážeme si obe.
Prvá možnosť je vyrezať z fotky štvorec tak aby to vyzeralo dobre a aby sme nestratili pravú podstatu fotografie. Napríklad takto:
Ako môžete vidieť na fotke, je v tvare štvorca ale museli sme z nej časť odobrať teda nejakú časť horných stromov.
Druhá možnosť je pridať fotke neviditeľné, alebo inak farebné miesto po stranách.
Znova môžeme vidieť, že fotka je štvorec, ale po stranách fotky sme ju museli niečim vyplniť, buď takto nejakou farbou, alebo je možné to spraviť aj transparentné, ale môže, sa to potom rôzne prejaviť pri viacerých fotkách vedľa seba, môže nastať problém, že každá bude vyzerať inak aj keď sme chceli docieliť aby každá bola rovnaká.
A toto je ten najväčší problém, ktorý ja často vidím, že ľudia nevedia pochopiť a nejde im do hlavy prečo sa to proste inak nedá. No pretože ak nahráme do štvorčeka, ktorý ma mať rozmer 500x500px a chcem tam dať fotku ktorá ma 1000x500px, tak buď ju orežeme niekde na stred, alebo ju takto vyplníme transparentnými alebo farebnými okrajmi.
Ak by sme fotku zobrali a chceli ňou vyplniť celú plochu, tak sa nám fotka proste deformuje.
Ukážka jasne demonštruje to, ako sa to bude správať ak by sme to chceli nechať vyplniť do štvorca, obrázok, ktorý je fotený na výšku sa proste deformuje a všetko bude vyzerať tak ako nemá.
A ako sa tomuto dá najlepšie vyvarovať a nesťažovať sa na programátorov, ktorý nemôžu za to ako sa správajú fyzykálne zákony. Viete keby som prišiel k vám domov, a povedal vám, že z vašej fotky vo fotoalbume, ktorá je fotená na výšku máte spraviť štvorec, čo by ste mi povedal ? Asi, že či šaliem, a jediné možné riešenie by asi bolo tu fotku ostrihať tak aby z nej bol vo finále štvorec ale to čo odstrihnete už tam nebude a to presne sa deje aj vo svete obrázkov, ktoré vidíte na webe.
Za prvé skúste pred tým ako nahráte fotku kde má byť štvorec popremýšľať nad fotkou, ktorú nahrávate, či je štvorcová a ak nie skúste ju pred tým, možno sami orezať do štvorca tak aby sa vám to pozdávalo. Ak to neviete nevadí, nahrajte to tam, ale musíte proste počítať, že kód si to upraví sám do štvorca takže nebuďte prekvapený ak to oreže nie presne tak ako chcete, pretože on väčšinou nevie ako to vy chcete.
Za druhé, skúste dodržať aspoň správny pomer fotografie, povedzme máte nahrať na web fotografiu, ktorá ma pomer strán 16:9. Tak sa nad tým zamyslite a neobviňujte programátorov z toho, že to nie je správne keď tam nahráte fotku 9:16 ta fotka, sa tam proste nikdy správať správne nebude ani keby programátor bol Harry Potter.
Dúfam, že som to aspoň lajcky a zbežne vysvetlil ak nie, ospravedlňujem sa a odporúčam si o tom naštudovať viac, internet je toho plný a verím, že sa vám podarí prísť na to ako to funguje a hlavne skúste nad tým premýšľať ako nad reálnou fotografiou, ktorú mate doma. Ako zo obdĺžnika na šírku spravím obdĺžnik na výšku bez straty obrazu a orezania ? Ďakujem pekne všetkým, ktorý sa pri čítaní dostali až sem!