Como otimizar suas imagens da web

Gostaria que seus clientes parassem de perguntar "Por que a velocidade da minha página é tão ruim?". Essas etapas simples garantirão a criação de imagens de alta qualidade que não sejam superdimensionadas.

O problema

Você acabou de construir seu novo site e otimizou tudo o possível, incluindo os tamanhos de imagem personalizados, e então entrega para o usuário. Duas semanas depois, você recebe a mensagem "Por que a velocidade da minha página é tão ruim?" ou “Por que a página está demorando tanto para carregar?” questões. Você vai, dá uma olhada no site e descobre que as imagens são enormes! Tenho certeza de que todo desenvolvedor já esteve nesta posição antes. É uma coisa difícil de lidar no clima atual de imagens de alta resolução que vêm de DSLRs, telefones e telas de retina, mas espero que este post cubra algumas coisas muito simples que você pode implementar para evitar alguns desses problemas. Em última análise, mesmo apenas uma imagem superdimensionada pode reduzir seriamente as classificações de velocidade da página.

A situação mundial perfeita

Antes de iniciar a construção do site, converse com seu designer para garantir que todas as imagens no design sigam uma proporção de imagem padrão. O corte da imagem não deve se tornar um problema se você definir os tamanhos de imagem personalizados de acordo. Tente usar 3: 2, 4: 3 ou 16: 9, pois essas são as proporções de aspecto da câmera padrão. Se isso não for possível e você estiver usando imagens de um site ativo atual para a reconstrução, verifique para ver quais são as proporções de aspecto e projete de acordo para incorporá-las, ou você terá alguns problemas no não tão distante futuro.

Restringir o tamanho do upload do arquivo

Existem muitos plug-ins que permitem controlar isso; tantos que não os listarei, mas uma simples pesquisa mostrará quantos são. Esses plug-ins vêm em várias formas, mas eu escolheria a mais simples possível. Normalmente, eles adicionam uma opção adicional às suas configurações / opções de mídia no WordPress que você pode definir quando conectado como administrador e seria semelhante à imagem abaixo.

Se você não quiser mais plugins, então isso também pode ser feito conectando-se ao 'wp_handle_upload_prefilter'. Um bom exemplo de como utilizar isso pode ser visto nesta postagem do blog na parte inferior da página.

Para imagens que são chamadas usando Campos personalizados avançados, você pode adicionar dimensões máximas de imagem / tamanho de arquivo e restringir a tipos de arquivo específicos dentro da IU. Eu altamente aconselho você a fazer isso.

Você pensaria que forçar um tamanho máximo de upload seria o suficiente, certo? Bem, infelizmente não é, isso não vai impedir o cliente de enviar uma imagem de 500kb que tem apenas 100px x 100px, e nem removerá os dados EXIF ​​(meta) do arquivo. Portanto, teremos que implementar outra camada de verificação.

Otimize as imagens

A melhor maneira de fazer isso é usar a opção Salvar para web do Photoshop, mas você não pode garantir que o usuário terá esse software, portanto, agora temos duas opções disponíveis:

Plugins

Existem alguns plug-ins bons disponíveis, sendo o Smush um dos melhores, pois é ótimo para otimização em lote e também permite uma opção de tamanho máximo de upload de arquivo. Há uma caixa de seleção adicional para remover dados EXIF ​​nas configurações.

Otimização de imagem online

Novamente, existem muitos por aí, mas o TinyPNG é uma das opções mais simples disponíveis: carregue seu arquivo e baixe a versão compactada. TinyPNG remove todos os dados EXIF.

Ainda não é suficiente?

Configuramos algumas verificações que, com sorte, resolverão os problemas de imagem, mas tenho certeza de que você já viu alguns problemas que ainda podem ocorrer:

• O tamanho máximo do arquivo ainda é muito grande para algumas imagens pequenas
• O tamanho real do pixel pode ser maior do que o realmente necessário
• Não há controle visual ou comparação sobre as imagens otimizadas, a menos que o usuário tenha um bom software de edição de imagem
• A imagem é do tipo de arquivo errado

Infelizmente, não há maneira de contornar isso e nós configuramos o máximo possível para detectar quaisquer problemas. A única maneira de realmente corrigir o problema é educar o usuário sobre os tipos de arquivo e garantir que ele use algum tipo de software de edição de imagem.

Eduque seus usuários

Possíveis soluções para o usuário

Essa não é, de forma alguma, a maneira perfeita de fazer as coisas, mas deve ajudar todos os envolvidos e reduzir o tamanho dos arquivos de imagens:

Conheça seus tipos de arquivo

Há muito o que discutir nesta postagem, mas se você quiser ler mais sobre os tipos de arquivos, então esta postagem é um bom recurso para uma análise aprofundada do assunto. Para o propósito desta postagem, porém, vou dividi-lo da forma mais simples possível:

• Uma fotografia contendo pessoas, paisagens etc = JPG
• Um recorte de uma pessoa ou produto que se sobrepõe a algo que não está nas imagens de fundo = PNG
• Um infográfico ou ícone = GIF ou PNG

Se você está pensando em enviar qualquer coisa como um TIF, PSD ou AI como um arquivo de imagem em seu site, PARE agora.

O cenário de caso usual

Programas

• SO Windows usando Microsoft Paint

A imagem

• Maximize o navegador para que você possa ver o maior tamanho de viewport em que a imagem está sendo usada. Use a ferramenta de recorte do Windows para calcular o tamanho real do pixel da imagem
• Crie uma nova tela / documento no MS Paint com base nas dimensões da ferramenta de recorte
• Ajuste sua nova imagem na nova tela
• A imagem precisa de um fundo transparente?
• Sim ? Salvar como GIF ou PNG
• Não ? Salvar como JPG
• Use TinyPNG para compactar sua imagem
• Faça upload da imagem compactada

O melhor cenário

Programas

• Qualquer sistema operacional usando Photoshop

A imagem

• Maximize o navegador para que você possa ver o maior tamanho de viewport em que a imagem está sendo usada. Use a ferramenta de captura de tela (ferramenta mac) para calcular o tamanho real do pixel da imagem
• Crie uma nova tela / documento no Photoshop com base nas dimensões da ferramenta de recorte
• Ajuste sua nova imagem na nova tela
• Selecione salvar para a web
• Certifique-se de que você está vendo a imagem em 100%
• A imagem precisa de um fundo transparente?
• Sim ? Selecione GIF, PNG8 ou PNG24 no menu suspenso (você verá a qualidade da imagem e o tamanho do arquivo mudar ao fazer isso)
• Não ? Selecione JPG no menu suspenso
• Altere as várias configurações dependentes de formato de imagem até obter uma boa relação qualidade / tamanho de imagem
• Selecione a lista suspensa de metadados e escolha nenhum
• Salve e faça upload para o seu site

Conclusão

Esperamos que isso ajude o usuário a compreender melhor como adicionar novas imagens ao site e economizar muito tamanho de arquivo. Eu sei que este post não cobre o uso de imagens de fundo, retina, SVG e muitos outros recursos de imagem, mas se as opções cobertas forem aplicadas, isso ainda deve ajudar a maioria dos usuários.

Para obter mais ajuda com web design, entre em contato com nossos especialistas hoje.

Se precisar de ajuda com seu Desenvolvimento Web, não hesite em nos contatar.