Utasítható képek méretezése: 13 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:43

Problémái vannak a képek megfelelő méretre állításával? Túl nagyok a képei, és túlcsordul a keret, mint a fenti? Ez az oktatható kísérlet összefoglalja, mit tanultam ennek a problémának a kezelésére.

Az Instructable Staff azt mondta nekem, hogy minden feltöltött kép különböző képarányokba van másolva. Ezeket a képkészleteket ezután lehúzzák és különböző méretűek, attól függően, hogy milyen eszközről nézi az utasítást. A szokásos szerkesztőben nincs lehetőség a megjelenítendő méret és arány megadására.

Ezt követően azt javasolták, hogy "Egy másik lehetőség, amely működhet, ha hagyományos képarányú képeket tölt fel. A 16: 9 és 4: 3 közötti értékeknek nagyon szépen kell megjelenniük."

Vegye figyelembe, hogy azt mondják, hogy ez "működhet". Íme, mit találtam azon küzdelmeim során, hogy képeimet tisztességesen jelenítsem meg. (Megjegyzés: A "Rubik -kocka megkönnyítve" oktatható képeket használom, ezért ezek a kockaképek!)

A fenti kép eredeti mérete (600x195), amely nem tartozik a hagyományos képarányok tartományába. Amint láthatja, az Instructables túl nagyra jeleníti meg ezt a képet, a bal és a jobb oldalt levágva. Lássuk, mit tehetünk annak érdekében, hogy ez a kép megfelelően megjelenjen.

1. lépés: Próbáljuk ki a 16: 9 képarányt

Tehát próbáljuk meg a 16: 9 (szélesség: magasság) képarányt. Megtartom az eredeti 600 képpont szélességet, a 16: 9 azt jelenti, hogy a magasságnak 338 képpontnak kell lennie, így készítünk egy 600x338 -as méretű vásznat, és bedobjuk a 600x195 -ös képet.

Lássuk tehát, hogyan néz ki ez a 600x338 (16: 9 oldalarányú) kép. Tehát érdekes módon, amikor bedobtam ezt a képet és előnézeti, tökéletesen illeszkedett - a bal és a jobb szél nem volt levágva! Képernyőképet készítettem róla, csak bizonyítékul, lásd a következő diában.

De amikor ezt nézem a böngészőmben (Chrome), azt látom a fenti képen, hogy a jobb és a bal oldal ismét levágódott! Ebből a kísérletből tehát úgy tűnik, hogy a 16: 9 képarányra való átméretezés nem oldja meg a problémáinkat!

Mellékesen megjegyzem, hogy a 16: 9 az "új" közös képarány, amelyet "szélesvásznú" néven ismernek, míg a 4: 3 a régi iskola "teljes képernyős" formája, amely a csöves tévézési időkben általános volt. Igen, te, ezredévesek, valószínűleg fogalmad sincs, miről beszélek.

2. lépés: 16: 9 kép frissen feltöltve, az Előnézet nézetben

Ez a kép a képernyőfelvétel, amely azt mutatja, hogy a 16: 9 kép tökéletes az előnézeti képen. Siker ugye? Nos, nem olyan gyorsan - nézze meg, mi történik, ha ténylegesen megtekintjük ezt az oldalt böngészőnkben (Chrome)! A bal és a jobb szél ismét csonka! Csak menjen vissza, hogy hagyja az előző csúszást, és győződjön meg róla.

Tanulság - ne bízzon az előzetesben! Ami az előnézetben jól néz ki, az másképp jelenik meg a böngészővel való tényleges megtekintés során!

Továbbá, igen, sok fehér hely van a képem alatt. Ennek az az oka, hogy egy 600x195 -ös képet elejtettem egy 600x338 -as méretű vászonra, és a tetejére tettem, tehát az üres fehér hely az alján van. Mit tehetünk ez ellen? Nos… megpróbálunk ezzel foglalkozni egy későbbi diában.

Tehát továbbra is nézzük meg, hogyan tudjuk ezt a képet teljes egészében megjeleníteni.

3. lépés: 16: 9 Az L&R oldalak levágásával jelenik meg

Csak azért, mert a böngészője bármilyen okból tökéletesen megjeleníti ezeket a 16: 9 képeket, erről beszélek. Itt van egy képernyőkép arról, hogyan látom a 16: 9 -es képemet az 1. lépésben az első előnézet utáni "beilleszkedés" után - észreveszi, hogy a bal és a jobb oldal elvágva.

Ha tökéletesen látja az 1. lépés képét, akkor remek. Tudasd velem! De én így látom. Igen, sokkal jobb, mint a címlap eredeti képe, de mégis levágott. Tehát számomra az Instructables személyzetének tanácsa ellenére a 16: 9 képarány nem egészen csökkenti. Térjünk át a 4: 3 oldalarányra.

4. lépés: Próbáljuk ki a 4: 3 képarányt

Tehát próbáljuk ki a 4: 3 képarányt. Megtartom az eredeti 600 képpont szélességet, a 4: 3 azt jelenti, hogy a magasságnak 450 képpontnak kell lennie, így 600x450 -es vászonméretet készítünk, és a 600x195 -ös képet ejtjük bele.

Hogyan néz ki ez a 600x450 (4: 3 oldalarányú) kép?

Ismét, amikor először bedobom, a kép remekül néz ki (kivéve az összes fehér helyet az alján). A bal és a jobb oldal jól látható. Ha böngészőben nézzük, úgy tűnik, hogy a jobb és bal oldal továbbra is rendben van.

Amint azt korábban már említettük, az üres fehér hely a kép alatt csak azért van, mert 600x195 méretű képemet 600x450 -es vászonra ejtettem, és csak a tetejére tettem.

Tanulság - Úgy tűnik, 4: 3 képarányra van szükség ahhoz, hogy a jobb és a bal oldal ne legyen levágva. Sajnos ez azt jelenti, hogy sok fehér hely marad a rövid és széles képekhez, mert ezeket a képeket 4: 3 méretű vászonra kell dobnia. Igen, középre állíthatja a képét úgy, hogy egyenlő fehér hely legyen felül és alul, de ettől függetlenül sok fehér hely marad a kép felett vagy alatt, de legjobb tudomásom szerint ez a kompromisszum be kell írnia az Instructables -t, hogy a képek sértetlenül jelenjenek meg.

5. lépés: 4: 3 Kép középre állítva

Itt ugyanaz a 600x195 méretű kép 600x450 -es vászonra esve, de középre állítva úgy, hogy a tetején és az alján egyenlő üres fehér hely legyen. Kicsit jobban néz ki, a szöveg nem tűnik annyira távol a képtől.

6. lépés: 4: 3 Kép alul

És végül, ugyanez a kép beesett és az aljára került. Most egy csomó üres fehér hely van a kép tetején. A kép most valóban el van választva a címsortól, de közelebb áll a szöveghez. Tehát ezek a kompromisszumok és a tanulságok:

• Úgy tűnik, hogy a 4: 3 képarány szükséges ahhoz, hogy a képek teljes egészében megjelenjenek az Instructables alkalmazásban.
• ne bízzon az előnézetben - lehet, hogy tökéletesen megjeleníti a képét, de a részeket le lehet csonkítani a tényleges böngészőben

7. lépés: Mi a minimális szélesség?

Most nézzük meg, mi legyen a minimális szélesség. A kép 382x206 méretű, közel 2: 1, tényleg hatalmasnak tűnik, nem? Nyilvánvaló, hogy az Instructables felnagyította a képet, hogy illeszkedjen valamilyen beállított szélességhez, valószínűleg 640 pixelhez, ebben nem vagyok biztos.

De azért illik, mert inkább "négyzet alakú" - azaz nem túl széles a magasságához képest. Ó, várj, megint becsaptam az előnézetet! Valójában nem illik - az R&L oldalak ismét csonka.

Valójában ez furcsa, nem csak az előzetes zavaros. Valójában megnéztem a böngészőben, és először rendesen renderelt (azaz az R&L széleit nem vágták le). De ha újra megnézzük a böngészőn keresztül, most a kép átméreteződik, és az R&L élek csonkolva vannak. Páratlan.

Tehát próbáljuk kicsinyíteni a képet. A képet 200x108 -ra zsugorítjuk, változatlan 2: 1 képarány mellett.

8. lépés: A kép zsugorítása, de a képarány megtartása

Így átméretezem a képet 200x108 -ra, ugyanazt a 2: 1 képarányt megtartva.

Most megint úgy tűnik, hogy elsőre illeszkedik (a felbontás (képminőség) jelentősen romlott!), De természetesen valószínűleg nézi, és egyáltalán nem illik, és pontosan úgy néz ki, mint az eredeti kép, kivéve az eredeti jobb felbontás. Ismételten, az Instructables kibővíti a képet, hogy illeszkedjen a beállított szélességhez, ezért ez a kisebb (200x108) kép olyan borzalmasan néz ki, sokkal rosszabbul, mint az eredeti 382x206.

Azért mondom "valószínűleg", mert fogalmam sincs, hogy az Instructables hogyan jeleníti meg ezeket a képeket a böngészőben. Bármilyen okból is, ha frissítem a gyorsítótárat és áttekintem ezt az Instructable -t, úgy tűnik, hogy a képméreteim nem maradnak konzisztensek, így valóban nem tudom, mit csinál az Instructables, kivéve azt, hogy ez inkonzisztens lehet. Így ennek az utasításnak a célja - kitalálni, hogyan kell méretezni a képeket, hogy azok legalább némileg következetesen jelenjenek meg!

9. lépés: Bizonyíték arra, hogy a képek először megfelelően jelennek meg

Íme, amit először a kép feltöltése után láttam először - illik! (Vegye figyelembe, hogy a fenti képernyőképet be kellett illesztenem egy 1600x1200 képpontos képbe (azaz 4: 3 arányban), hogy az Instructables megjelenítse a teljes képernyőképet!)

De persze tudod, hogy ha megnézed ezt a képet, egy pár visszacsúszik, ez már nem illik. Nézzük meg, mekkora legyen a minimális szélesség, hogy illeszkedjen.

10. lépés: 382x287 (4: 3 arány) kipróbálása

Megtartottam a 382 szélességet, és az eredeti 382x206 méretű képet 382x287 méretű vászonra ejtettem, hogy 4: 3 oldalarányú legyen, mert korábban felfedeztük, hogy az Instructable -nek szüksége van egy képre, amely illeszkedik ehhez a 4: 3 arányhoz, hogy teljes egészében megjelenjen.

Tehát most sok üres fehér hely van alatta. Nem illeszkedik semmihez, amit levágtak, de ismét kibővítették, hogy kitöltse a beállított szélességet, így a kép nem éles. Próbáljuk megtalálni, mi ez a tökéletes utasítható szélesség.

11. lépés: A kép kiszélesítése 300x206 -ról 600x206 -ra, hogy jobban látható -e

Az eredeti 382x206 (2: 1) képet elejtettem egy 600x206 (3: 1) méretű vászonra csak azért, hogy lássam, ha 600 képpontra való kiszélesítéssel az Instructables megjeleníti a teljes képet. Ismét az elején sikerült, de mint látható, most nem.

Ez az igazán furcsa dolog - minden alkalommal, amikor először dob be egy képet, úgy tűnik, hogy az Instructables helyesen jeleníti meg a képet, függetlenül attól, hogy milyen méretű vagy képarányú. Ezúttal ki is jelentkeztem az Instructables -ből, és bezártam azt a lapot, majd úgymond újra megnéztem ezt az Instructable -t, hogy ellenőrizze, hogy a kép továbbra is megfelelően jelenik -e meg. Általában ez elegendő ahhoz, hogy az Instructable tegye a dolgát, és elkezdje átméretezni a képeket, amelyek nem 4: 3 oldalarányúak, és megjeleníteni őket a bal és a jobb oldalt levágva.

Meglepetésemre az első néhány alkalommal, amikor újra megnéztem ezt az utasítást "friss", ez a kép teljes egészében megmaradt, de sajnos, miután elmentem valami mást csinálni, és talán egy órával később jöttem, ez a kép elkezdett megjelenni az L&R oldalakkal kibővítve, ahogy a fent látható.

Miért vagy hogyan történik ez? Nincs ötletem. Fogalmam sincs, miért várhat egy bizonyos idő elteltével egy kép feltöltése után az Instructables másképp, ha nem. Bizonyítékként a fenti kép tökéletesen megjelenő képernyőképét mutatom be az első órában, 10-15 perccel a feltöltés után a következő diában.

12. lépés: Bizonyíték a képek megfelelő megjelenítésére kezdetben a feltöltés után

Íme egy képernyőfelvétel, amely azt mutatja, hogy a 600x206 méretű kép teljes egészében megjelenik a feltöltés után. Ez az előző dia képernyőképe. Térjen vissza az előző diához, és láthatja, hogy a kép mennyire fel van szerelve!

Ne feledje, hogy a képernyőképem valójában 1563x766 méretű volt, de ahogy az utasításban leírt kísérleteimből megtanultam, tudtam, hogy nem illik ehhez a 4: 3 képarányhoz (1563x766 nagyjából 4: 2), így ha most töltötte fel azt a képernyőképet eredeti méretében. Az Instructable csonkolja a széleket. Tehát ezt a képet 4: 3 arányú vászonra ejtettem, ezért sok üres fehér terület van a képernyőképem alatt.

Ne feledje, hogy a képernyőkép is készült, mielőtt megváltoztattam a 11. lépés címét, és befejeztem a szöveg beírását, hátha kíváncsi vagy erre!

Tanulság - a feltöltött kép böngészőben történő megtekintése közvetlenül a feltöltés után nem feltétlenül mutatja meg, hogyan fog megjelenni a jövőben. Bármilyen okból is látszik, hogy szinte bármilyen méretű és/vagy képarányú kép szépen jelenik meg azonnal a feltöltés után, sőt körülbelül 10-15 percig a feltöltés után, és még azután is, hogy kijelentkezett az Instructables-ből, és frissen tekintette meg egy új böngészőmunkamenetből stb..

De várjon körülbelül egy órát vagy többet, és a dolgok megváltoznak! Ha a kép nem felel meg a 4: 3 oldalaránynak, akkor az Instructable segítségével állítják be (általában nagyítják), hogy a szélei le legyenek vágva.

13. lépés: Lényeg - amit tanultam

Tehát a lényeg: mit tanultam?

1. A kép teljes megjelenítéséhez elengedhetetlen a 4: 3 oldalarány (szélesség: magasság) megtartása!

2. Használjon nagy méretű eredeti képeket a lehető legnagyobb felbontásban, és dobja őket 4: 3 arányú vászonra. Ha túl nagy, az Instructables kicsinyíti, és szép éles képeket kap.

3. Ha a kép túl kicsi (sokkal kevesebb, mint 600 képpont széles), az Instructable kibővíti a képet, és legalább 600 pixel széles lesz, így kevésbé lesz éles. Azért mondom, hogy "ish", mert nem igazán tudom pontosan, hogy az Instructable milyen szélességet használ, de úgy tűnik, közel a 600 -hoz. Valószínűleg 640 -es, ami a régi iskolai csőmonitoros időkben általános volt.

A 600x450 és a 640x480 4: 3 oldalarány. Minden régi iskola "teljes képernyős" csőmonitorja 640x480 (szélesség x magasság) volt.

4. Mi a teendő, ha az eredeti kép nem legalább 600 képpont széles? Körülbelül annyit tehetsz, hogy bedobod egy vászonba, amely megfelel a 4: 3 aránynak, amely a képet az eredeti méretéhez közelíti. Ha az eredeti kép kicsi, sok üres hely marad, ezért próbálja középre állítani a képet, vagy tegye a fehért a kép fölé vagy alá, és tegye a lehető legjobbnak.

Legjobb tudomásom szerint ezt a kompromisszumot kell meghoznia az Instructables -ben, hogy a képek sértetlenül jelenjenek meg.

Példának okáért a fenti kép egy 600x450 -es méretű vászonméret, amelybe 382x206 -os képet ejtettek és középre állítottak, így egyenlő üres fehér helyünk van fent és lent. A kép nagyjából az eredeti méretben jelenik meg, azt hiszem, az Instructables 640x480 -ra bővíti (elhanyagolható kiterjesztés), így ez a legjobb, amit ezzel az eredeti képpel tehetünk.

5. NE bízzon az előnézetben, vagy abban, ahogy a képe kinéz az első néhány órában az Instructable -be való feltöltés után! Bármilyen okból is látszik, hogy a képméretek nem maradnak konzisztensek a feltöltésük után pár órával.

Minden alkalommal, amikor először dob be egy képet, úgy tűnik, hogy az Instructables helyesen jeleníti meg a képet, függetlenül attól, hogy milyen méretű vagy képarányú a kép. Előfordulhat, hogy bizonyos ideig később is helyesen jelenik meg, de NE HAGYJUK, mert végül átméretezi őket, és problémákat okoz, ha nem követi ezt a 4: 3 szabályt!

Remélem, ez segít, és kérem, ha talál jobb módszert, vagy bármilyen más tippje van, tudassa velem!