Imatges instructives de mida: 13 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:15

Teniu problemes per aconseguir que les imatges tinguin una mida correcta? La mida de les imatges és massa gran i desborda el marc com el de dalt? Aquest instructiu intent de resumir el que he après per solucionar aquest problema.

El personal instructiu m’ha dit que totes les imatges penjades es duplicen en diverses proporcions. Aquest conjunt d’imatges s’extreuen i es dimensionen de manera diferent en funció del dispositiu des del qual es visualitzi l’instructible. No hi ha una manera d'especificar a l'editor normal quina mida i quina relació s'ha de mostrar.

A continuació, van suggerir que "Una altra opció que pot funcionar és si pengeu imatges amb una relació d'aspecte més tradicional. Qualsevol cosa entre 16: 9 i 4: 3 s'hauria de mostrar molt bé".

Fixeu-vos que diuen que això pot "funcionar". Això és el que he trobat en les meves lluites per aconseguir que les meves imatges es mostrin decentment. (Tingueu en compte que estic fent servir imatges del meu "Cub de Rubik fàcil de fer" per instruir, per tant, totes aquestes imatges de cub!)

La imatge anterior té la mida original (600x195) que no es troba en aquest rang de relacions d’aspecte tradicionals. Com podeu veure, Instructables mostra aquesta imatge massa gran amb els costats esquerre i dret tallats. Vegem què podem fer perquè aquesta imatge es mostri correctament.

Pas 1: provem la relació d'aspecte 16: 9

Proveu, doncs, la relació d’aspecte 16: 9 (amplada: alçada). Conservaré l’amplada original de 600 píxels, 16: 9 vol dir que l’altura ha de ser de 338 píxels, de manera que farem una mida de llenç de 600x338 i deixarem caure la imatge de 600x195.

Vegem, doncs, l’aspecte d’aquesta imatge de 600x338 (relació d’aspecte 16: 9). Curiosament, quan vaig deixar caure aquesta imatge i la vaig previsualitzar, encaixava perfectament: les vores dreta i esquerra no estaven tallades. N’he pres una captura de pantalla només com a prova, la veig a la següent diapositiva.

Però, quan veig això al meu navegador (Chrome), el que veig a la imatge anterior és que els costats dret i esquerre es tornen a tallar. Per tant, d’aquest experiment sembla que canviar la mida a una relació d’aspecte de 16: 9 no solucionarà els nostres problemes.

Com a nota lateral, el 16: 9 és la "nova" relació d'aspecte comuna coneguda com a "pantalla panoràmica", mentre que el 4: 3 és la "pantalla completa" de la vella escola que era habitual en els dies de la televisió. Sí, és probable que el vostre millennial no tingueu ni idea del que estic parlant.

Pas 2: Imatge 16: 9 recentment penjada tal com es veu a la vista prèvia

Aquesta imatge és la captura de pantalla que mostra que la nostra imatge de 16: 9 té un aspecte perfecte a la vista prèvia. Èxit no? Bé, no és tan ràpid: vegeu què passa quan realment veiem aquesta pàgina al nostre navegador (Chrome). Les vores esquerra i dreta es tornen a tallar. Només heu de tornar enrere per deixar lliscar l'anterior i veureu-ho vosaltres mateixos.

Lliçó apresa: no confieu en la vista prèvia. El que es veu bé a la vista prèvia es tradueix de manera diferent en la visualització real amb un navegador.

A més, sí, hi ha molt d’espai en blanc a sota de la meva imatge. Això es deu al fet que vaig deixar caure una imatge de 600x195 en un llenç de 600x338 i la vaig posar a la part superior, de manera que hi ha tot aquest espai en blanc a la part inferior. Què podem fer al respecte? Bé … intentarem solucionar-ho en una diapositiva posterior.

Per tant, continuem veient com podem mostrar aquesta imatge en la seva totalitat.

Pas 3: 16: 9 que es mostra amb els costats de L&R tallats

Només per recordar-ho, per si per qualsevol motiu el vostre navegador mostra perfectament aquestes imatges de 16: 9, d'això estic parlant. Aquí teniu una captura de pantalla de com veig la meva imatge 16: 9 al pas 1 després de "instal·lar-me" després de la previsualització inicial; observeu que es tallen l'esquerra i la dreta.

Si veieu la imatge del meu pas 1 perfectament, bé, genial. Fes-m'ho saber! Però així ho veig. Sí, és molt millor que la imatge original de la pàgina de títol, però encara està tallada. Per tant, per a mi, malgrat els consells del personal d’Instructables, la relació d’aspecte 16: 9 no l’acaba de reduir. Passem a la relació d'aspecte 4: 3.

Pas 4: provem la relació d'aspecte 4: 3

Proveu, doncs, la relació d’aspecte 4: 3. Conservaré l’amplada original de 600 píxels, 4: 3 significa que l’alçada ha de ser de 450 píxels, de manera que farem una mida de llenç de 600x450 i hi deixarem caure la imatge de 600x195.

Com és aquesta imatge de 600 x 450 (relació d’aspecte 4: 3)?

Una vegada més, quan la deixo entrar per primera vegada, la imatge té un aspecte fantàstic (excepte tot l’espai en blanc de la part inferior). Es mostren bé l'esquerra i la dreta. Si ho mireu en un navegador, sembla que la dreta i l’esquerra continuen mostrant-se bé.

Com es va assenyalar anteriorment, tot aquest espai en blanc que hi ha a sota de la imatge és perquè he deixat caure la meva imatge de 600x195 en un llenç de 600x450 i l’he col·locat a la part superior.

Lliçó apresa: sembla que és necessària una relació d'aspecte 4: 3 perquè els costats dret i esquerre no es tallin. Malauradament, això vol dir que hi haurà molt espai en blanc per a imatges curtes i amples, perquè haureu de deixar aquestes imatges en un llenç de mida 4: 3. Sí, podríeu centrar la vostra imatge de manera que hi hagi un espai en blanc igual a la part superior i inferior, però, independentment, hi haurà un munt d’espai en blanc per sobre o per sota de la vostra imatge, però, segons el que sé, aquest és el compromís heu de fer-ho a Instructables perquè les vostres imatges es mostrin intactes.

Pas 5: 4: 3 Amb la imatge centrada

Aquí teniu la mateixa imatge de 600 x 195 caiguda en un llenç de 600 x 450 però centrada de manera que hi hagi un espai en blanc igual a la part superior i inferior. Es veu una mica millor, el text no sembla tan separat de la imatge.

Pas 6: 4: 3 Amb la imatge a la part inferior

I, finalment, aquí hi ha la mateixa imatge que va caure i es va moure cap al fons. Ara hi ha un munt d’espai en blanc a la part superior de la imatge. Ara la imatge està realment separada de la barra de títol, però està més a prop del text. Aquests són els vostres compromisos i lliçons apreses:

• 4: 3 sembla ser la relació d'aspecte que heu d'utilitzar perquè les imatges es mostrin íntegrament a Instructables.
• no confieu en la previsualització: pot mostrar perfectament la vostra imatge, però es poden trencar parts al navegador real

Pas 7: Quina és l'amplada mínima?

Ara vegem quin ha de ser l’amplada mínima. La imatge que es mostra té una mida de 382x206, propera a 2: 1, sembla realment enorme, oi? Viouslybviament, Instructables ha ampliat la imatge per adaptar-la a una certa amplada, probablement 640 píxels, no estic segur.

Però sí que encaixa perquè és més "quadrat", és a dir, no és massa ample per la seva alçada. Espera, em va tornar a enganyar amb aquesta vista prèvia. En realitat no encaixa: els costats de R&L es tornen a truncar.

En realitat, això és estrany, no només la vista prèvia està desordenada. De fet, el vaig mirar al navegador i al principi es va mostrar correctament (és a dir, les vores de R&L no es van tallar). Però tornant a mirar-la a través del navegador, ara la imatge es canvia de mida amb les vores de R&L truncades. Senar

Intentem, doncs, que la imatge sigui més petita. Reduirem la imatge a 200 x 108, mantenint la mateixa relació d’aspecte 2: 1.

Pas 8: reduir la imatge però mantenir la relació d'aspecte

Per tant, redimensiono aquesta imatge a 200x108, mantenint la mateixa relació d’aspecte 2: 1.

Ara, de nou, sembla que s’adapta al principi (amb la resolució (qualitat de la imatge) molt deteriorada), però, per descomptat, probablement ho estigueu mirant i no s’adapta gens, i té exactament l’aspecte de la imatge original, excepte l’original. millor resolució. Una vegada més, Instructables està ampliant la imatge per adaptar-la a una certa amplada, de manera que és per això que aquesta imatge més petita (200x108) té un aspecte tan horrible, molt pitjor que l'original de 382x206.

Dic "probablement" perquè realment no tinc ni idea de com Instructables mostra aquestes imatges al vostre navegador. Qualsevol que sigui la raó, si actualitzo la memòria cau i reviso aquesta instrucció, les mides de les meves imatges no semblen ser coherents, de manera que realment no sé què fa Instructables, excepte que pot ser inconsistent. Per tant, l'objectiu d'aquest instructable és esbrinar com es poden dimensionar les imatges perquè es mostrin almenys de manera coherent.

Pas 9: prova que les imatges es mostren correctament al principi

Això és el que vaig veure al principi immediatament després de penjar la imatge. (Tingueu en compte que vaig haver d’ajustar la captura de pantalla anterior a una imatge de 1600x1200 (és a dir, una proporció de 4: 3) perquè Instructables mostri tota la captura de pantalla.)

Però, per descomptat, ja sabeu que quan mireu aquesta imatge, ara ja no s’adapta un parell. Vegem quin ha de ser l’amplada mínima perquè s’ajusti.

Pas 10: provar 382x287 (relació 4: 3)

Vaig mantenir l’amplada de 382 i vaig deixar caure la imatge original de 382x206 en un llenç de 382x287 per convertir-la en una relació d’aspecte de 4: 3 perquè prèviament hem descobert que Instructable necessita una imatge que s’ajusti a aquesta proporció de 4: 3 per mostrar-la sencera.

Per tant, ara hi ha un munt d’espai en blanc a sota. No s’adapta amb res tallat, però, de nou, s’ha ampliat per omplir una mica d’amplada fixada, de manera que la imatge no és nítida. Intentem trobar quin és aquest ample instructable perfecte.

Pas 11: Ampliar la imatge de 300x206 a 600x206 per veure si es mostra millor

Vaig deixar caure la imatge original de 382x206 (2: 1) en un llenç de 600x206 (3: 1) només per veure si ampliar-la a 600 píxels faria que Instructables mostri tota la imatge. De nou, al principi ho va fer, però com podeu veure ara no.

Això és realment estrany: cada vegada que introduïu una imatge per primera vegada, sembla que Instructables mostrarà aquesta imatge correctament, independentment de la mida o la relació d’aspecte d’aquesta imatge. Aquesta vegada, fins i tot vaig tancar la sessió a Instructables i vaig tancar aquesta pestanya, i després vaig tornar a revisar aquest "nou" instructable per dir-ho d'alguna manera per verificar si la imatge encara es mostra correctament. Normalment, això és suficient per permetre que Instructable pugui fer tot el possible i començar a canviar la mida de les imatges que no tenen una proporció de 4: 3 i mostrar-les amb els costats esquerre i dret tallats.

Per a la meva sorpresa, el primer parell de vegades que vaig tornar a revisar aquest "fresc" instructiu, aquesta imatge es va mostrar en la seva totalitat, però, per desgràcia, després d'haver-me allunyat per fer una altra cosa i vaig arribar potser una hora més tard, aquesta imatge va començar a mostrar-se ampliat amb els costats L&R truncats de nou tal com es veu a la part superior.

Per què o com passa això? No en tinc ni idea. No tinc ni idea de per què esperar un període de temps després de penjar una imatge faria que Instructables la renderitzés de manera diferent, però sí. Com a prova, mostraré la captura de pantalla de la imatge anterior que es visualitza perfectament en el primer oh, 10-15 minuts després d’haver-la penjat a la següent diapositiva.

Pas 12: prova que les imatges es mostren correctament inicialment després de penjar-les

A continuació, es mostra una captura de pantalla que mostra la imatge de 600 x 206 que es visualitza en la seva totalitat immediatament després de la càrrega. Es tracta d’una captura de pantalla de la diapositiva anterior. Torneu a la diapositiva anterior i podreu veure el grau de pujada de la imatge ara.

Tingueu en compte que la meva captura de pantalla tenia una mida de 1563 x 766, però, tal com vaig aprendre dels meus experiments al començament d’aquest instructiu, ho sabia, ja que no s’adaptava a aquesta relació d’aspecte 4: 3 (1563 x 766 és aproximadament de 4: 2), així que si ho faria acaba de penjar aquesta captura de pantalla en la seva mida original Instructable truncarà les vores. Així que vaig deixar caure aquesta imatge en un llenç de 4: 3, de manera que per això hi ha un munt d’espai en blanc buit sota la meva captura de pantalla.

Tingueu en compte que també es va fer una captura de pantalla abans de canviar el títol del pas 11 i acabar d’escriure tot aquest text per si us ho pregunteu.

Lliçó apresa: veure la imatge que heu penjat en un navegador immediatament després de penjar-la no mostrarà necessàriament com es mostrarà en el futur. Sigui pel motiu que sigui, gairebé qualsevol mida i / o relació d’aspecte de la imatge sembla mostrar-se bé immediatament després de la càrrega, i fins i tot durant uns 10-15 minuts després de la càrrega i fins i tot després de tancar la sessió d’Instructables i veure-la recentment des d’una nova sessió del navegador, etc..

Però espereu aproximadament una hora o més i les coses canvien. La imatge, si no s'adapta a la relació d'aspecte 4: 3, s'ajustarà (normalment s'amplia) mitjançant Instructable per tal que les vores quedin truncades.

Pas 13: Resum: Què he après?

Per tant, què he après?

1. Per mostrar una imatge en la seva totalitat, és imprescindible mantenir una relació d'aspecte 4: 3 (amplada: alçada).

2. Utilitzeu imatges originals grans amb la màxima resolució possible i deixeu-les caure en un llenç de proporció 4: 3. Si és massa gran, Instructables el reduirà i obtindreu bones imatges nítides.

3. Si la vostra imatge és massa petita (molt menys de 600 píxels d’amplada), Instructable ampliarà la vostra imatge i la farà com a mínim de 600 píxels d’amplada, fent-la menys nítida. Dic "ish" perquè realment no sé exactament quina amplada utilitza Instructable, però sembla que és propera a 600. Probablement sigui 640, que era una amplada habitual als dies de la vella pantalla de tubs de l'escola.

600x450 i 640x480 són relacions d’aspecte 4: 3. Tots els monitors de tub de "pantalla completa" de la vella escola tenien una mida de 640x480 (amplada x alçada).

4. Què cal fer si la imatge original no té una amplada mínima de 600 píxels? Tot el que podeu fer és deixar-lo caure en un llenç que s'adapti a la proporció 4: 3 que mostra la vostra imatge a la mida original. Si la imatge original és petita, hi haurà un munt d'espai en blanc, així que intenteu centrar la imatge o posar l'espai en blanc per sobre o per sota de la imatge i que quedi millor.

Segons el que sé, aquest és el compromís que haureu de fer a Instructables perquè les vostres imatges es mostrin intactes.

Com a exemple, la imatge anterior té una mida de llenç de 600x450 amb una imatge de 382x206 caiguda i centrada de manera que tinguem un espai en blanc igual i superior a sota. La imatge es mostra aproximadament en la seva mida original, crec que Instructables podria expandir-la a 640x480 (expansió insignificant), de manera que és aproximadament el millor que podem fer amb aquesta imatge original.

5. NO confieu en la previsualització ni en l'aspecte de la vostra imatge durant les primeres hores després de penjar-les a Instructable. Per qualsevol motiu, les mides de les imatges no semblen mantenir-se uniformes fins un parell d’hores després de penjar-les.

Cada vegada que introduïu una imatge per primera vegada, sembla que Instructables mostrarà la imatge correctament, independentment de la mida o la relació d’aspecte d’aquesta imatge. Fins i tot pot romandre visualitzant-se correctament durant algun període de temps després, però NO ES DEIXI COMBINAR perquè, finalment, els canviarà la mida i us donarà problemes, tret que seguiu aquesta regla de 4: 3.

Espero que això us ajudi i si us plau, si trobeu una manera millor o teniu algun altre consell, feu-m'ho saber.