Redimensionamento e otimização de imagens on-line

Se você tem um conjunto de fotos incríveis, tenho certeza de que gostaria de compartilhá-lo com seus clientes em seu site. Você pode fazer uma apresentação de slides adorável, fazer galerias ou simplesmente inserir imagem em uma única página ou blog. Qualquer que seja a opção que você selecionar, haverá uma dificuldade única que você encontrou com o editor de conteúdo não especialista: o redimensionamento da imagem.

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

Adapte o tamanho ao seu conteúdo

Sempre redimensione suas imagens de acordo com o tamanho do conteúdo ou de acordo com a largura do conteúdo. Por exemplo, se sua área de conteúdo é limitada a 650 pixels de largura, não há nenhum requisito para dimensionar sua imagem com mais de 650 pixels, porque sua página exibirá apenas até 650 pixels. Se a propriedade de tamanho da imagem for menor ou maior do que o contêiner, a qualidade de exibição será deteriorada.

Adaptar a resolução da imagem para a web

Não haverá nenhuma impressão de “por polegada” em nenhum esboço do site. PPI, que é pixels por polegada e DPI, que é pontos por polegada, não tem nenhuma relevância quando você edita ou redimensiona sua imagem para qualquer finalidade, como e-mail, blog ou compartilhamento nas mídias sociais. Exceto para impressão, na exibição na tela, você não poderá fazer qualquer diferenciação no recurso ou qualidade da imagem.

Esse é especialmente o caso do PDF , evite disponibilizar PDF para leitura na web que contenha imagens com resolução superior a 72 dpi. Neste caso o otimizador ImageRecycle PDF pode ajudar, otimizar um PDF com imagens de 300dpi dentro e você pode economizar 98% do tamanho do pdf com uma qualidade perfeita para ser lido na web.

A melhor qualidade de exportação JPG com ImageRecycle

Usando 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 vários recursos JPEG que funcionam melhor para você. Aplicar uma compactação global é uma questão de equilíbrio entre tamanho e qualidade.

Agora, com o algoritmo de otimização de imagem ImageRecycle , o processo é bem diferente. ImageRecycle está detectando a taxa de compressão da imagem atual e, em relação a isso, otimiza a imagem. Como a compactação não é aplicada em toda a imagem, você ficará genuinamente surpreso com o teste abaixo.

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

No exemplo abaixo exportei 4 imagens jpg usando photoshop no nível de qualidade: 60% |
80% | 90% | 100% Então otimizei imagens usando ImageRecycle , aqui está o resultado do tamanho. Sobre a qualidade os 90/100% são um pouco melhores que os outros 2. A lição aqui é: exporte suas imagens jpg o menos compactadas possível, ImageRecycle fará o resto!

Otimize as imagens finais

Dependendo do site que você está executando, as mesmas imagens podem ser exibidas em páginas diferentes com tamanhos diferentes. Isso é tipicamente algo que você encontrará em um Ecommerce com Slider, lista de produtos, detalhes do produto, ...
O processo de redimensionamento geralmente é feito por uma biblioteca php online como GD. Certifique-se da qualidade e peso de suas imagens de usuário ORIGINAL vs FINAL. Não confie em bibliotecas online e gerador de cache ou você pode ter problemas de qualidade e tamanho. Se sua imagem original já estiver otimizada do seu lado (fazendo um ajuste fino entre qualidade, cores, compactação) para economizar largura de banda e carregamento de página, com algumas bibliotecas de redimensionamento de extensões da Web, você pode perder tudo isso!

A solução:

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

O que vem a seguir: HTML5 e o elemento

Técnicas de design responsivo que incluem consultas de mídia são a maneira para os webdesigners adaptarem o layout de um site a uma ampla variedade de dispositivos, de desktops a smartphones, e mantê-lo consistentemente nítido. O problema aqui não é a exibição, mas sim o desempenho, esta é a imagem do desktop que é exibida e carregada no smartphone e tablet.

o O elemento HTML5 está tentando resolver esse problema. O benefício do recurso de imagem otimizado nativamente é o tempo de carregamento - especialmente importante para usuários em conexões de Internet móvel mais lentas. o O elemento possibilita um redimensionamento dinâmico real, fornecendo apenas uma instrução HTML ao navegador.

Trecho do código:

O limite no momento é que isso requer uma versão muito recente do Chrome (39) e algum JS para funcionar corretamente. Num futuro próximo, com esta tecnologia associada a um otimizador de imagens, podemos esperar o melhor para o tempo de carregamento do site.