Redimensionamento e otimização de imagens online

Se você tem uma coleção de fotos incríveis, com certeza vai adorar compartilhá-las com seus clientes no seu site. Você pode criar uma bela apresentação de slides, galerias ou simplesmente inserir as imagens em uma página ou post de blog. Seja qual for a opção escolhida, haverá uma dificuldade comum em editores de conteúdo não especializados: o redimensionamento de imagens.

Abaixo, seguem algumas recomendações para redimensionamento de imagens que serão úteis para você.

Ajuste o tamanho para que se adeque ao seu conteúdo

Sempre redimensione suas imagens de acordo com o tamanho ou a largura do conteúdo. Por exemplo, se a área do seu conteúdo for limitada a 650 pixels de largura, não há necessidade de redimensionar a imagem para além de 650 pixels, pois a página exibirá apenas até 650 pixels. Se a imagem for menor ou maior que o contêiner, a qualidade da exibição será prejudicada.

Adaptar a resolução da imagem para a web

Não haverá qualquer indicação de "por polegada" no layout de nenhum site. PPI (pixels por polegada) e DPI (pontos por polegada) não têm relevância alguma quando você edita ou redimensiona sua imagem para qualquer finalidade, como enviar por e-mail, publicar em blogs ou compartilhar em redes sociais. Exceto para impressão, na visualização em tela, você não conseguirá diferenciar os recursos ou a qualidade da imagem.

Isso é especialmente importante para PDFs ; evite disponibilizar PDFs para leitura na web que contenham imagens com resolução superior a 72 dpi. Nesse caso, o ImageRecycle pode ajudar: otimize um PDF com imagens de 300 dpi e você poderá economizar até 98% do tamanho do arquivo, mantendo uma qualidade perfeita para leitura na web.

A melhor qualidade de exportação JPG com ImageRecycle

Ao usar o Photoshop, a recomendação para a web é salvar suas imagens JPEG com no máximo 20% de compressão. Você também pode fazer alguns testes com diferentes configurações de JPEG para encontrar a que funciona melhor para você. Aplicar uma compressão global é uma questão de equilíbrio entre tamanho e qualidade.

Agora, com o algoritmo de otimização de imagens ImageRecycle , o processo é bem diferente. ImageRecycle detecta a taxa de compressão atual da imagem e, com base nisso, otimiza a imagem. Como a compressão não é aplicada à imagem inteira, você ficará realmente impressionado com o teste abaixo.

Lembre-se: quanto menos a imagem original for comprimida, melhor será a otimização e menor o tamanho.

No exemplo abaixo, exportei 4 imagens JPG usando o Photoshop com os seguintes níveis de qualidade: 60% | 80% | 90% | 100%.
Em seguida, otimizei as imagens usando ImageRecycle . Aqui está o resultado em termos de tamanho. Em relação à qualidade, as imagens com 90% e 100% apresentaram um desempenho ligeiramente melhor do que as outras duas. A lição aqui é: exporte suas imagens JPG com a menor compressão possível, e ImageRecycle fará o resto!

Otimize as imagens finais

Dependendo do tipo de site que você administra, as mesmas imagens podem ser exibidas em páginas diferentes com tamanhos diferentes. Isso é típico de sites de e-commerce com sliders, listas de produtos, detalhes de produtos, etc.
O processo de redimensionamento geralmente é feito por uma biblioteca PHP online, como o GD. Certifique-se da qualidade e do tamanho das suas imagens ORIGINAIS em comparação com as imagens FINAIS geradas pelo usuário. Não confie em bibliotecas online e geradores de cache, pois você pode ter problemas com a qualidade e o tamanho das imagens. Se a sua imagem original já estiver otimizada (ajustando qualidade, cores e compressão) para economizar largura de banda e reduzir o tempo de carregamento da página, você pode perder tudo isso com algumas bibliotecas de redimensionamento de extensões web!

A solução:

• Aplique a otimização à imagem que será exibida no navegador do seu cliente final. Você pode fazer isso manualmente para cada imagem e tamanho, ou usar nossa API ou a extensão CMS do ImageRecycle para selecionar a pasta onde suas imagens finais estão armazenadas. Em seguida, execute a otimização automática.
• Use nossa ferramenta de redimensionamento para imagens originais. Você pode economizar espaço de armazenamento no servidor, manipular suas imagens mais rapidamente e, geralmente, não precisa de imagens com largura superior a 1600px na exibição final

O que vem a seguir: HTML5 e o<picture> elemento

As técnicas de design responsivo, que incluem media queries, são a maneira que os webdesigners encontram para adaptar o layout de um site a uma ampla gama de dispositivos, de desktops a smartphones, mantendo uma aparência sempre nítida. O problema aqui não é a tela em si, mas o desempenho: trata-se da imagem da versão para desktop que é exibida e carregada em smartphones e tablets.

O<picture> O elemento HTML5 tenta resolver esse problema. A vantagem de um recurso de imagem otimizado nativamente é o tempo de carregamento, o que é especialmente importante para usuários com conexões de internet móvel mais lentas.<picture> O elemento permite um redimensionamento dinâmico real, bastando fornecer uma instrução HTML ao navegador.

Trecho do código:

A limitação atual é que isso requer uma versão muito recente do Chrome (39) e algum código JavaScript para funcionar corretamente. Em um futuro próximo, com essa tecnologia associada a um otimizador de imagens, podemos esperar o melhor desempenho possível no tempo de carregamento do site.