Dimenzovanie obrázka s pokynmi na zmenu veľkosti: 13 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 12:00

Máte problémy so správnym nastavením veľkosti obrázkov? Sú vaše obrázky príliš veľké a pretečú rámom ako na obrázku vyššie? Tento návod sa pokúša zhrnúť to, čo som sa naučil riešiť tento problém.

Instructable Staff mi povedal, že všetky nahrané obrázky sú duplikované do rôznych pomerov strán. Tieto súbory obrázkov sa potom vyberajú a majú rôznu veľkosť v závislosti od zariadenia, z ktorého si prezeráte pokyny. V bežnom editore neexistuje spôsob, ako určiť, akú veľkosť a pomer má zobrazovať.

Potom navrhli, že "Ďalšou možnosťou, ktorá môže fungovať, je, ak odovzdáte obrázky s tradičnejším pomerom strán. Všetko od 16: 9 do 4: 3 by sa malo zobrazovať veľmi pekne."

Všimnite si, že sa hovorí, že to „môže“fungovať. Tu je to, čo som našiel v mojich snahách, aby sa moje obrázky zobrazovali slušne. (Všimnite si, že používam obrázky z mojej inštrukcie „Rubikova kocka uľahčená“, teda všetky tie obrázky kocky!)

Vyššie uvedený obrázok je jeho pôvodná veľkosť (600 x 195), ktorá nie je v takom rozsahu tradičných pomerov strán. Ako vidíte, aplikácia Instructables zobrazuje tento obrázok príliš veľký a odrezanú ľavú a pravú stranu. Pozrime sa, čo môžeme urobiť, aby sa tento obrázok zobrazil správne.

Krok 1: Skúsme pomer strán 16: 9

Skúsme teda pomer strán 16: 9 (šírka: výška). Ponechám pôvodnú šírku 600 pixelov, 16: 9 znamená, že výška musí byť 338 pixelov, takže vytvoríme veľkosť plátna 600 x 338 a vložíme doň obrázok 600 x 195.

Pozrime sa teda, ako tento obrázok 600 x 338 (pomer strán 16: 9) vyzerá. Je zaujímavé, že keď som tento obrázok vložil a zobrazil si jeho ukážku, perfektne sedel - ľavý a pravý okraj neboli orezané! Nasnímal som si to ako dôkaz, pozrite si to na ďalšej snímke.

Keď to však vidím vo svojom prehliadači (Chrome), na vyššie uvedenom obrázku vidím, že pravá a ľavá strana sú opäť odrezané! Z tohto experimentu teda vyplýva, že zmena veľkosti na pomer strán 16: 9 naše problémy nevyrieši!

Ako vedľajšiu poznámku uvádzame, že 16: 9 je „nový“bežný pomer strán známy ako „širokouhlý“, zatiaľ čo 4: 3 je stará škola „na celú obrazovku“, ktorá bola bežná už v časoch elektronickej televízie. Áno, vy, mileniáli, pravdepodobne neviete, o čom hovorím.

Krok 2: Čerstvo nahraný obrázok 16: 9 podľa zobrazenia v ukážke

Tento obrázok je snímkou obrazovky, ktorá ukazuje, že náš obrázok 16: 9 vyzerá v ukážke perfektne. Úspech nie? Nie tak rýchlo - uvidíte, čo sa stane, keď si túto stránku skutočne pozrieme v našom prehliadači (Chrome)! Ľavý a pravý okraj sú opäť skrátené! Vráťte sa, aby ste nechali predchádzajúcu snímku, a presvedčte sa sami.

Poučenie - ukážke neverte! To, čo v ukážke vyzerá dobre, sa pri skutočnom prezeraní v prehliadači vykreslí odlišne!

Tiež áno, pod mojím obrázkom je veľa bieleho miesta. Dôvodom je, že som obrázok s rozmermi 600 x 195 umiestnil na plátno s rozmermi 600 x 338 a umiestnil som ho hore, takže v spodnej časti je všetko prázdne miesto. Čo s tým môžeme urobiť? No … pokúsime sa to vyriešiť v neskoršej prezentácii.

Pokračujme teda v skúmaní, ako môžeme tento obrázok zobraziť ako celok.

Krok 3: 16: 9 Zobrazené s orezanými stranami L&R

Len pre informáciu, v prípade, že z akéhokoľvek dôvodu váš prehliadač zobrazuje tieto obrázky 16: 9 perfektne, hovorím o tom. Tu je snímka obrazovky, ako vidím svoj obrázok 16: 9 v kroku 1 zobrazený po „usadení“po úvodnom náhľade - všimnite si, že ľavá a pravá časť sú orezané.

Ak vidíte môj obrázok z kroku 1 zobrazený dokonale, dobre, skvele. Daj mi vedieť! Ale takto to vidím ja. Áno, je to oveľa lepšie ako pôvodný obrázok z titulnej strany, ale stále je to orezané. Takže pre mňa, napriek radám personálu Instructables, pomer strán 16: 9 to celkom neznižuje. Prejdeme k pomeru strán 4: 3.

Krok 4: Skúsme pomer strán 4: 3

Skúsme teda pomer strán 4: 3. Ponechám pôvodnú šírku 600 pixelov, 4: 3 znamená, že výška musí byť 450 pixelov, takže urobíme veľkosť plátna 600 x 450 a vložíme doň obrázok 600 x 195.

Ako tento obrázok 600 x 450 (pomer strán 4: 3) vyzerá?

Opäť, keď ho prvýkrát vložím, obrázok vyzerá skvele (až na všetky biele miesta v spodnej časti). Vľavo a vpravo sú zobrazené v poriadku. Keď sa na to pozrieme v prehliadači, zdá sa, že Pravé a Ľavé sa naďalej zobrazuje v poriadku.

Ako už bolo uvedené, prázdne biele miesto pod obrázkom je spôsobené tým, že som svoj obrázok s rozmermi 600 x 195 umiestnil na plátno s rozmermi 600 x 450 a umiestnil som ho hore.

Poučenie - Zdá sa, že je potrebný pomer strán 4: 3, aby pravá a ľavá strana neboli orezané. Bohužiaľ to znamená, že pre krátke a široké obrázky bude veľa bieleho miesta, pretože tieto obrázky budete musieť vložiť na plátno veľkosti 4: 3. Áno, môžete vycentrovať svoj obraz tak, aby bol v hornej a dolnej časti rovnaký biely priestor, ale bez ohľadu na to bude nad alebo pod vašim obrázkom veľa bieleho priestoru, ale pokiaľ viem, toto je kompromis, ktorý urobíte. musíte urobiť v pokynoch, aby sa vaše obrázky zobrazovali neporušené.

Krok 5: 4: 3 So stredom obrazu

Toto je ten istý obrázok s rozmermi 600 x 195, ktorý bol vložený na plátno s rozmermi 600 x 450, ale vycentrovaný tak, aby v hornej a dolnej časti bolo rovnaké prázdne miesto. Vyzerá to o niečo lepšie, text sa nezdá byť tak oddelený od obrázku.

Krok 6: 4: 3 S obrázkom zospodu

A nakoniec, tu je ten istý obrázok, ktorý padol a presunul sa dnu. V hornej časti obrázku je teraz veľa prázdneho bieleho miesta. Obrázok je teraz skutočne oddelený od záhlavia, ale je bližšie k textu. Toto sú teda vaše kompromisy a ponaučenia:

• Zdá sa, že pomer strán 4: 3 je pomer strán, ktorý musíte použiť na to, aby sa obrázky v programe Instructables zobrazovali celé.
• ukážke neverte - môže dokonale zobrazovať váš obrázok, ale časti môžu byť v skutočnom prehliadači skrátené

Krok 7: Aká je minimálna šírka?

Teraz sa pozrime, aká by mala byť minimálna šírka. Zobrazený obrázok má veľkosť 382 x 206, blízko 2: 1, zdá sa byť skutočne obrovský, však? Instructables očividne zväčšil obrázok, aby zodpovedal určitej nastavenej šírke, pravdepodobne 640 pixelov, nie som si istý.

Ale hodí sa, pretože je viac „hranatý“- t. J. Nie je príliš široký na svoju výšku. Počkajte, opäť som sa nechal oklamať tou ukážkou! V skutočnosti sa to nehodí - strany výskumu a vývoja sa opäť skrátia.

V skutočnosti je to zvláštne, nie je to len ukážka, ktorá je pokazená. Vlastne som sa na to pozrel v prehliadači a najskôr sa to vykreslilo správne (t. J. Neboli orezané okraje VaV). Keď sa však na to pozrieme znova cez prehliadač, teraz je obrázok vykresľovaný so zmenšenými hranami R&L. Zvláštny.

Skúsme teda obrázok zmenšiť. Zmenšíme obrázok na 200 x 108, pričom zachováme rovnaký pomer strán 2: 1.

Krok 8: Zmenšenie obrazu, ale zachovanie pomeru strán

Zmením teda veľkosť obrázku na 200 x 108, pričom zachovám rovnaký pomer strán 2: 1.

Teraz sa opäť zdá, že to na prvý pohľad sedí (pričom rozlíšenie (kvalita obrazu) sa výrazne zhoršila!), Ale samozrejme sa na to pravdepodobne pozeráte a vôbec sa to nehodí a vyzerá presne ako pôvodný obrázok, s výnimkou pôvodného lepšie rozlíšenie. Instructables opäť rozširuje obrázok tak, aby zodpovedal určitej nastavenej šírke, a preto tento menší (200 x 108) obrázok vyzerá tak strašne, oveľa horšie ako pôvodný 382 x 206.

Hovorím „pravdepodobne“, pretože skutočne nemám predstavu, ako sa v programe Instructables vo vašom prehliadači zobrazujú tieto obrázky. Ak z akéhokoľvek dôvodu obnovím svoju vyrovnávaciu pamäť a prečítam si tento návod, zdá sa, že moje veľkosti obrázkov nezostávajú konzistentné, takže skutočne neviem, čo program Instructables robí, okrem toho, že môže byť nekonzistentný. Cieľom tohto pokynu je teda zistiť, ako obrázky rozmerovať, aby sa zobrazovali aspoň trochu konzistentne!

Krok 9: Dôkaz, že obrázky sa najskôr správne vykreslia

Tu je to, čo som najskôr videl bezprostredne po nahraní obrázku - sedí to! (Všimnite si toho, že som musel vložiť vyššie uvedenú snímku obrazovky do obrázka 1 600 x 1 200 (t. J. Pomer 4: 3), aby Instructables zobrazil celú snímku obrazovky!)

Ale samozrejme viete, že keď sa pozriete na ten obrázok, ktorý teraz pár skĺzne, už to nie je vhodné. Pozrime sa, aká by mala byť minimálna šírka, aby to pasovalo.

Krok 10: Skúste 382 x 287 (pomer 4: 3)

Ponechal som šírku 382 a spustil pôvodný obrázok 382 x 206 na plátno s rozmermi 382 x 287, aby bol pomer strán 4: 3, pretože sme už zistili, že Instructable potrebuje obrázok, ktorý by zodpovedal tomuto pomeru 4: 3, aby ho zobrazil celý.

Teraz je teda pod ním veľa prázdneho bieleho miesta. Nehodí sa s ničím odseknutým, ale opäť bol rozšírený tak, aby vyplnil určitú nastavenú šírku, takže obraz nie je ostrý. Pokúsme sa zistiť, čo je táto dokonalá inštruovateľná šírka.

Krok 11: Rozšírenie obrázka z 300x206 na 600x206, aby ste zistili, či sa zobrazuje lepšie

Vložil som pôvodný obrázok 382x206 (2: 1) na plátno 600x206 (3: 1), aby som zistil, či jeho rozšírenie na 600 pixelov spôsobí, že Instructables zobrazí celý obrázok. Znova to spočiatku išlo, ale ako vidíte, teraz nie.

Toto je skutočne zvláštna vec - zakaždým, keď vložíte obrázok, sa zdá, že Instructables tento obrázok zobrazí správne bez ohľadu na veľkosť alebo pomer strán tohto obrázku. Tentokrát som sa dokonca odhlásil z Instructables a zavrel túto kartu a potom som sa vrátil k tomuto „novému“inštrukcii takpovediac, aby som overil, či sa obrázok stále zobrazuje správne. Obvykle to stačí na to, aby Instructable mohol urobiť svoju vec a začať meniť veľkosť obrázkov, ktoré nie sú v pomere strán 4: 3, a zobrazovať ich s odseknutou ľavou a pravou stranou.

Na moje prekvapenie, prvý krát, čo som sa vrátil k tomuto inštruktážnemu „novému“obrázku, zostal zobrazený celý, ale bohužiaľ, potom, čo som odišiel robiť niečo iné a prišiel som asi o hodinu neskôr, sa tento obrázok začal zobrazovať zväčšené so stranami L&R opäť skrátenými, ako to vidíte vyššie.

Prečo alebo ako sa to stane? Netuším. Netuším, prečo by čakanie po nahraní obrázka spôsobilo, že ho Instructables vykreslí inak, ale robí to. Ako dôkaz ukážem svoju snímku obrazovky vyššie uvedeného obrázka, ktorá sa bude perfektne zobrazovať v prvom oh, 10-15 minút potom, čo som ho odovzdal, na ďalšej snímke.

Krok 12: Dôkaz, že obrázky sa po odoslaní zobrazujú správne pôvodne

Tu je snímka obrazovky, ktorá ukazuje, že obrázok s rozlíšením 600 x 206 sa zobrazuje úplne ihneď po nahraní. Toto je snímka obrazovky predchádzajúcej snímky. Vráťte sa na predchádzajúcu snímku a uvidíte, ako je obrázok teraz vylepšený!

Všimnite si toho, že môj záber obrazovky bol v skutočnosti veľký 1563x766, ale ako som sa dozvedel zo svojich experimentov na začiatku tohto Instructable, vedel som, že pretože to nepasovalo na ten pomer strán 4: 3 (1563x766 je zhruba 4: 2), takže ak by som práve nahral, že snímka obrazovky v pôvodnej veľkosti Instructable skráti okraje. Preto som ten obrázok vložil na plátno 4: 3, a preto je pod mojou snímkou obrazovky veľa prázdneho bieleho priestoru.

Všimnite si toho, že snímka obrazovky bola urobená aj predtým, ako som zmenil názov kroku 11 a dokončil zadávanie celého tohto textu, keby vás to zaujímalo!

Ponaučenie - zobrazenie nahraného obrázku v prehliadači bezprostredne po nahraní nemusí nevyhnutne znamenať, ako sa bude v budúcnosti zobrazovať. Zdá sa, že z akéhokoľvek dôvodu sa obrázok takmer akejkoľvek veľkosti a/alebo pomeru strán zobrazuje pekne ihneď po nahraní, dokonca aj asi 10-15 minút po nahraní a dokonca aj po odhlásení sa z programu Instructables a jeho novom zobrazení z novej relácie prehliadača atď..

Ale počkajte asi hodinu alebo viac a všetko sa zmení! Ak váš obrázok nezodpovedá pomeru strán 4: 3, bude upravený (zvyčajne zväčšený) pomocou funkcie Instructable, aby boli okraje skrátené.

Krok 13: Zrátané a podčiarknuté - čo som sa dozvedel

Takže záver - čo som sa naučil?

1. Ak chcete zobraziť obrázok ako celok, je nevyhnutné dodržať pomer strán 4: 3 (šírka: výška)!

2. Používajte originálne obrázky, ktoré sú veľké, s najvyšším možným rozlíšením, a umiestnite ich na plátno s pomerom strán 4: 3. Ak je príliš veľký, Instructables ho zmenší a budete mať pekné ostré obrázky.

3. Ak je váš obrázok príliš malý (oveľa menší ako 600 pixelov na šírku), nástroj Instructable rozšíri váš obrázok a urobí ho najmenej 600 pixelov na šírku, čím bude menej ostrý. Hovorím „ish“, pretože skutočne neviem, akú šírku Instructable používa, ale zdá sa, že je blízko 600. Je to pravdepodobne 640, čo bola bežná šírka v časoch starých školských monitorov.

Pomery strán 600x450 a 640x480 sú 4: 3. Všetky trubkové monitory „na celú obrazovku“zo starej školy boli 640 x 480 (šírka x výška).

4. Čo robiť, ak váš pôvodný obrázok nemá šírku najmenej 600 pixelov? Jediné, čo môžete urobiť, je vložiť ho na plátno, ktoré vyhovuje pomeru 4: 3 a zobrazí váš obrázok v pôvodnej veľkosti. Ak je váš pôvodný obrázok malý, bude tu veľa prázdnych medzier, preto skúste obrázok vycentrovať alebo umiestniť biele miesto buď nad, alebo pod svoj obrázok, aby vyzeral čo najlepšie.

Pokiaľ viem, toto je kompromis, ktorý budete musieť urobiť v programe Instructables, aby sa vaše obrázky zobrazovali neporušené.

Vyššie uvedený obrázok má napríklad veľkosť plátna 600 x 450, do ktorého je vložený a vycentrovaný obrázok s rozmermi 382 x 206, takže máme rovnaké a prázdne biele miesto nad aj pod. Obrázok sa zobrazuje zhruba v pôvodnej veľkosti, myslím, že ho Instructables môže rozšíriť na 640 x 480 (zanedbateľné rozšírenie), takže je to asi to najlepšie, čo s týmto pôvodným obrázkom môžeme urobiť.

5. NEDôverujte ukážke a neverte tomu, ako váš obrázok vyzerá niekoľko prvých hodín po ich nahraní do Instructable! Z akéhokoľvek dôvodu sa zdá, že veľkosti obrázkov zostanú konzistentné až niekoľko hodín po ich nahraní.

Zakaždým, keď prvýkrát vložíte obrázok, zdá sa, že program Instructables zobrazí tento obrázok správne, bez ohľadu na veľkosť alebo pomer strán tohto obrázku. Potom sa môže dokonca zobrazovať správne ešte nejaký čas, ale NEDÁVAJTE SI FOOL, pretože nakoniec ich zmení veľkosť a spôsobí vám problémy, pokiaľ nedodržíte pravidlo 4: 3!

Dúfam, že to pomôže a ak nájdete lepší spôsob alebo máte iné rady, dajte mi vedieť!