Dimensionando imagens instrutíveis: 13 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

Você tem problemas para fazer com que as imagens tenham o tamanho correto? Suas imagens ficam muito grandes e transbordam do quadro como o mostrado acima? Este instrutível tenta resumir o que aprendi para resolver esse problema.

A equipe instrutível me disse que todas as imagens carregadas são duplicadas em várias proporções de aspecto. Esse conjunto de imagens é retirado e dimensionado de forma diferente dependendo de qual dispositivo você está visualizando o instrutível. Não há uma maneira de especificar no editor regular o tamanho e a proporção a exibir.

Eles então sugeriram que "Outra opção que pode funcionar é se você enviar imagens com uma proporção de aspecto mais tradicional. Qualquer coisa de 16: 9 a 4: 3 deve ser exibida muito bem."

Observe que eles dizem que isso "pode" funcionar. Aqui está o que descobri em minhas lutas para fazer com que minhas imagens fossem exibidas de maneira decente. (Observe que estou usando imagens instrutíveis do meu "cubo de Rubik facilitado", daí todas aquelas imagens de cubo!)

A imagem acima tem seu tamanho original (600x195), que não está na faixa de proporções tradicionais. Como você pode ver, o Instructables está exibindo essa imagem ampliada demais, com os lados esquerdo e direito cortados. Vamos ver o que podemos fazer para que esta imagem seja exibida corretamente.

Etapa 1: vamos tentar a proporção de aspecto de 16: 9

Então, vamos tentar a proporção de aspecto 16: 9 (largura: altura). Vou manter a largura original de 600 pixels, 16: 9 significa que a altura precisa ser de 338 pixels, então faremos um tamanho de tela de 600x338 e colocaremos a imagem 600x195 nela.

Então, vamos ver a aparência desta imagem de 600x338 (proporção de aspecto de 16: 9). Curiosamente, quando coloquei esta imagem e a visualizei, ela se encaixou perfeitamente - as bordas esquerda e direita não foram cortadas! Eu fiz uma captura de tela dele apenas para prova, veja no próximo slide.

Mas, quando vejo isso no meu navegador (Chrome), o que vejo na imagem acima, é que os lados direito e esquerdo estão novamente cortados! Portanto, a partir dessa experiência, parece que o redimensionamento para uma proporção de aspecto de 16: 9 não resolverá nossos problemas!

Como observação lateral, 16: 9 é a "nova" proporção comum conhecida como "widescreen", enquanto 4: 3 é a "tela inteira" da velha escola, comum na época da TV de tubo. Sim, você provavelmente não tem ideia do que estou falando.

Etapa 2: imagem 16: 9 recém-enviada como visualizada na visualização

Esta imagem é a captura de tela mostrando que nossa imagem 16: 9 parece perfeita na visualização. Sucesso certo? Bem, não tão rápido - veja o que acontece quando realmente visualizamos esta página em nosso navegador (Chrome)! As bordas esquerda e direita estão truncadas novamente! Basta voltar para o slide anterior e ver por si mesmo.

Lição aprendida - não confie no Preview! O que parece bom na visualização é renderizado de maneira diferente na visualização real com um navegador!

Além disso, sim, há muitos espaços em branco abaixo da minha imagem. Isso porque eu coloquei uma imagem de 600x195 em uma tela de 600x338 e coloquei no topo, então há todo aquele espaço em branco na parte inferior. O que podemos fazer sobre isso? Bem … vamos tentar resolver isso em um slide posterior.

Portanto, vamos continuar a ver como podemos fazer essa imagem ser exibida em sua totalidade.

Etapa 3: 16: 9 exibido com os lados esquerdo e direito cortados

Só para registro, caso por algum motivo seu navegador esteja exibindo essas imagens 16: 9 perfeitamente, é disso que estou falando. Aqui está uma captura de tela de como vejo minha imagem 16: 9 na Etapa 1 exibida após "se acomodar" após a visualização inicial - observe que a esquerda e a direita estão cortadas.

Se você está vendo minha imagem da Etapa 1 exibida perfeitamente, ótimo. Avise! Mas é assim que estou vendo. Sim, é muito melhor do que a imagem original da página de título, mas ainda está cortada. Então, para mim, apesar do conselho da equipe do Instructables, a proporção de aspecto 16: 9 não é suficiente. Vamos passar para a proporção de 4: 3.

Etapa 4: vamos tentar a proporção de aspecto 4: 3

Então, vamos tentar a proporção de 4: 3. Vou manter a largura original de 600 pixels, 4: 3 significa que a altura precisa ser 450 pixels, então faremos uma tela de tamanho 600x450 e colocaremos a imagem 600x195 nela.

Qual é a aparência desta imagem de 600x450 (proporção de 4: 3)?

Novamente, quando eu o coloco pela primeira vez, a imagem parece ótima (exceto por todo o espaço em branco na parte inferior). Esquerda e direita são exibidos corretamente. Olhando para ele em um navegador, parece que a direita e a esquerda parecem continuar sendo exibidos corretamente.

Como observado anteriormente, todo aquele espaço em branco abaixo da imagem é porque eu coloquei minha imagem 600x195 em uma tela 600x450 e apenas coloquei no topo.

Lição aprendida - a proporção de aspecto 4: 3 parece ser necessária para que os lados direito e esquerdo não sejam cortados. Infelizmente, isso significa que haverá muito espaço em branco para imagens curtas e largas, porque você terá que soltar essas imagens em uma tela de tamanho 4: 3. Sim, você pode centralizar sua imagem para que haja um espaço em branco igual na parte superior e inferior, mas, independentemente, haverá muito espaço em branco acima ou abaixo da sua imagem, mas pelo melhor do meu conhecimento, este é o compromisso que você tem que fazer em Instructables para que suas imagens sejam exibidas intactas.

Etapa 5: 4: 3 com imagem centrada

Aqui está a mesma imagem de 600x195 colocada em uma tela de 600x450, mas centralizada de forma que haja espaço em branco igual na parte superior e inferior. Parece um pouco melhor, o texto não parece tão separado da imagem.

Etapa 6: 4: 3 com imagem na parte inferior

E, por último, aqui está a mesma imagem colocada e movida para o fundo. Agora há uma tonelada de espaço em branco em cima da imagem. A imagem agora está realmente separada da barra de título, mas está mais próxima do texto. Portanto, estes são seus compromissos e lições aprendidas:

• 4: 3 parece ser a proporção de aspecto que você precisa usar para que as imagens sejam exibidas em sua totalidade no Instructables.
• não confie na visualização - ela pode mostrar sua imagem perfeitamente, mas partes podem ser truncadas no navegador real

Etapa 7: Qual é a largura mínima?

Agora vamos ver qual deve ser a largura mínima. A imagem mostrada tem o tamanho 382x206, perto de 2: 1, parece muito grande, não é? Obviamente, o Instructables ampliou a imagem para ajustá-la a uma largura definida, provavelmente 640 pixels, não tenho certeza.

Mas se encaixa porque é mais "quadrado" - ou seja, não é muito largo para sua altura. Oh espere, fui enganado por aquele Preview de novo! Na verdade, não se encaixa - os lados R&L estão truncados novamente.

Na verdade, isso é estranho, não é apenas a visualização que está bagunçada. Na verdade, olhei para ele no navegador e, a princípio, ele foi renderizado corretamente (ou seja, as bordas R&L não foram cortadas). Mas, olhando novamente pelo navegador, agora a imagem está sendo redimensionada com as bordas R&L truncadas. Ímpar.

Então, vamos tentar diminuir a imagem. Reduziremos a imagem para 200x108, mantendo a mesma proporção de 2: 1.

Etapa 8: Reduzindo a imagem, mas mantendo a proporção do aspecto

Então, eu redimensiono essa imagem para 200x108, mantendo a mesma proporção de 2: 1.

Agora, novamente, parece caber no início (com a resolução (qualidade da imagem) muito deteriorada!), Mas é claro que você provavelmente está olhando para ele e não se encaixa de jeito nenhum, e parece exatamente com a imagem original, exceto que o original tem melhor resolução. Novamente, o Instructables está expandindo a imagem para fazê-la caber em alguma largura definida, então é por isso que essa imagem menor (200x108) parece tão horrível, muito pior do que o 382x206 original.

Digo "provavelmente" porque realmente não tenho ideia de como o Instructables está exibindo essas imagens no seu navegador. Por alguma razão, se eu atualizar meu cache e revisar este Instructable, meus tamanhos de imagem não parecem permanecer consistentes, então eu realmente não sei o que o Instructables está fazendo, exceto que pode ser inconsistente. Portanto, o objetivo deste Instrutível - descobrir como dimensionar imagens para que sejam exibidas pelo menos de forma consistente!

Etapa 9: prova de que as imagens são renderizadas corretamente no início

Aqui está o que vi logo após enviar a imagem - ela se encaixa! (Observe que tive que ajustar a captura de tela acima em uma imagem de 1600x1200 (ou seja, proporção 4: 3) para fazer com que os Instructables exibissem a captura de tela inteira!)

Mas é claro que você sabe que quando você olha para aquela imagem alguns slides atrás agora, ela não se encaixa mais. Vamos ver qual é a largura mínima necessária para caber.

Etapa 10: tentar 382 x 287 (proporção de 4: 3)

Eu mantive a largura de 382 e coloquei a imagem 382x206 original em uma tela 382x287 para torná-la uma proporção de 4: 3, porque descobrimos anteriormente que o Instructable precisa de uma imagem para caber nessa proporção de 4: 3 para exibi-la em sua totalidade.

Portanto, agora há muitos espaços em branco por baixo. Ele se encaixa sem nada cortado, mas novamente foi expandido para preencher uma largura definida, então a imagem não é nítida. Vamos tentar descobrir qual é a largura instrutível perfeita.

Etapa 11: ampliando a imagem de 300x206 para 600x206 para ver se ela é exibida melhor

Larguei a imagem 382x206 (2: 1) original em uma tela de 600x206 (3: 1) apenas para ver se ampliá-la para 600 pixels faria com que o Instructables exibisse a imagem inteira. De novo, a princípio funcionou, mas como você pode ver, não agora.

Isso é realmente estranho - toda vez, quando você coloca uma imagem pela primeira vez, parece que o Instructables exibirá essa imagem corretamente, não importa o tamanho ou proporção dessa imagem. Desta vez, eu até mesmo saí do Instructables e fechei aquela guia, e então revisitei este Instructable "fresco", por assim dizer, para verificar se a imagem ainda era exibida corretamente. Normalmente, isso é o suficiente para permitir que o Instructable faça seu trabalho e comece a redimensionar as imagens que não estão em uma proporção de aspecto de 4: 3 e exibi-las com os lados esquerdo e direito cortados.

Para minha surpresa, nas primeiras vezes que revisitei este Instructable "fresco", esta imagem permaneceu exibida em sua totalidade, mas, infelizmente, depois que saí para fazer outra coisa e cheguei talvez uma hora ou mais depois, esta imagem começou a ser exibida ampliado com os lados L&R truncados novamente como você vê acima.

Por que ou como isso acontece? Não faço ideia. Não tenho ideia de por que esperar algum tempo após o upload de uma imagem faria com que o Instructables a renderizasse de maneira diferente, mas é. Como prova, mostrarei minha captura de tela da imagem acima exibindo perfeitamente nos primeiros oh, 10-15 minutos depois de carregá-la no próximo slide.

Etapa 12: prova de que as imagens são exibidas corretamente inicialmente após o upload

Aqui está uma captura de tela mostrando a imagem 600x206 exibida em sua totalidade imediatamente após o upload. Esta é uma captura de tela do slide anterior. Volte para o slide anterior e você pode ver como a imagem está levantada agora!

Observe que minha captura de tela tinha, na verdade, o tamanho de 1563x766, mas como aprendi com meus experimentos no início deste Instructable, eu sabia, já que não cabia na proporção de 4: 3 (1563x766 é aproximadamente 4: 2), então se eu tivesse acabei de enviar a captura de tela em seu tamanho original Instructable truncaria as bordas. Então, coloquei essa imagem em uma tela 4: 3 e é por isso que há muito espaço em branco vazio abaixo da minha captura de tela.

Observe que a captura de tela também foi tirada antes de eu alterar o título da Etapa 11 e terminar de digitar todo esse texto, caso você esteja se perguntando sobre isso!

Lição aprendida - visualizar sua imagem carregada em um navegador imediatamente após carregá-la não mostrará necessariamente como será exibida no futuro. Por alguma razão, quase qualquer tamanho e / ou proporção de imagem parece ser exibida bem imediatamente após o upload, e mesmo por cerca de 10-15 minutos após o upload e mesmo depois de você sair do Instructables e visualizá-lo em uma nova sessão do navegador, etc..

Mas espere cerca de uma hora ou mais e as coisas mudam! Sua imagem, se não se ajustar à proporção de 4: 3, será ajustada (geralmente ampliada) por Instructable para que as bordas sejam truncadas.

Etapa 13: Linha de fundo - O que aprendi

Portanto, linha de fundo - o que eu aprendi?

1. Para exibir uma imagem em sua totalidade, é obrigatório manter uma proporção de 4: 3 (largura: altura)!

2. Use imagens originais grandes com a resolução mais alta possível e coloque-as em uma tela de proporção 4: 3. Se for muito grande, o Instructables o reduzirá e você terá imagens nítidas.

3. Se a sua imagem for muito pequena (muito menos do que 600 pixels de largura), o Instructable irá expandir sua imagem e torná-la pelo menos 600 pixels de largura, tornando-a menos nítida. Digo "ish" porque não sei exatamente qual largura o Instructable está usando, mas parece perto de 600. É provavelmente 640, que era uma largura comum na época dos monitores de tubo da velha escola.

600x450 e 640x480 são proporções de 4: 3. Todos os monitores de tubo de "tela inteira" da velha escola tinham 640x480 (largura x altura).

4. O que fazer se a imagem original não tiver pelo menos 600 pixels de largura? Tudo o que você pode fazer é soltá-lo em uma tela que se ajusta à proporção 4: 3 que exibe sua imagem perto de seu tamanho original. Se a imagem original for pequena, haverá muitos espaços em branco, então tente centralizar a imagem ou coloque o espaço em branco acima ou abaixo da imagem e faça com que tenha a melhor aparência possível.

Até onde sei, este é o compromisso que você terá que fazer no Instructables para que suas imagens sejam exibidas intactas.

Por exemplo, a imagem acima tem um tamanho de tela de 600x450 com uma imagem de 382x206 inserida e centralizada de forma que tenhamos um espaço em branco igual acima e abaixo. A imagem é exibida aproximadamente em seu tamanho original, acho que o Instructables pode estar expandindo para 640x480 (expansão insignificante), então é o melhor que podemos fazer com a imagem original.

5. NÃO confie na visualização ou na aparência de sua imagem nas primeiras horas após carregá-la no Instructable! Por alguma razão, os tamanhos das imagens não parecem permanecer consistentes até algumas horas depois de carregá-las.

Cada vez, quando você coloca uma imagem pela primeira vez, parece que o Instructables exibirá essa imagem corretamente, não importa o tamanho ou proporção dessa imagem. Ele pode até permanecer sendo exibido corretamente por algum tempo depois, mas NÃO SEJA ENGANADO porque, eventualmente, ele irá redimensioná-los e causar problemas a menos que você siga a regra 4: 3!

Espero que ajude e por favor, se você encontrar uma maneira melhor ou tiver alguma outra dica, me avise!