Existem alguns detalhes técnicos envolvidos, mas a regra geral é apenas manter o arquivo de imagem o menor possível.
De um modo geral, você não deseja que seu site carregue uma imagem gigantesca, apenas para que ela seja reduzida pelo HTML. Isso causa velocidades de página desnecessariamente altas! Otimizar suas imagens é uma ótima maneira de melhorar seus tempos de página, e isso pode ser feito de várias maneiras.
As ferramentas ajudarão!
Ferramentas de redimensionamento de imagens Não poderíamos escolher apenas uma ferramenta para esta importante etapa. Basicamente, você deseja que suas imagens tenham exatamente a mesma largura e altura necessárias em seu site. Isso significa que você não deseja ter uma imagem com 1200 pixels de largura, mas exibida em seu blog com 300 pixels.
Você precisa redimensionar o arquivo de imagem real para 300 pixels. Isso reduzirá o tamanho de suas imagens e reduzirá drasticamente o tempo de carregamento. Aqui está uma lista de ferramentas e tutoriais com os quais você pode fazer isso:
Redimensionando uma imagem no Photoshop
Redimensionando uma imagem no Paint
Redimensionando uma imagem no Microsoft Picture Manager
Pixlr
Redimensionador da Web
Encolher imagens
Ferramentas de compressão de imagem de redimensionamento de imagem
Da mesma forma, existem tantas ferramentas de compactação por aí também!
A compactação de imagem combinará cores semelhantes e removerá muito lixo extra de que suas imagens não precisam. Isso parece brutal, mas geralmente você não consegue ver a diferença entre as imagens que são e as que não são compactadas! Você também pode fazer isso no Photoshop, mas encontramos algumas ferramentas de compactação em massa online que podem ser mais fáceis de usar:
Kraken.io
TinyPNG
Outra forma de fazer isso é com a ferramenta PageSpeed Insights dentro da extensão do Google Chrome .
Na seção Otimizar imagens, os links “Ver conteúdo otimizado” aparecerão ao lado de cada sugestão. Você pode abri-los e salvá-los para uso em seu site! grandepexinxa.
Lazy Load Images Você pode dar um passo adiante para acelerar suas imagens. Na verdade, você pode simplesmente não carregá-los! …
isto é, até que o visitante realmente precise vê-los. As imagens carregadas lentamente são impedidas, via JavaScript, de carregar até que um determinado evento aconteça. Esse evento pode ser baseado no tempo ou no local para onde o visitante está olhando.
Por exemplo, uma imagem não será carregada até que o usuário role a página o suficiente para vê-la. Isso evita que sua página tenha que esperar o carregamento de uma imagem que só será vista vários segundos (ou até minutos) depois. Lazy load pode ser um tópico complicado, mas existem muitos plug-ins WordPress de carregamento lento e plug-ins jQuery que não são muito difíceis de configurar se você souber lidar com HTML e JavaScript.
Ferramentas CSS Sprite
Seu site pode ter algumas imagens e ícones que você criou ou encontrou online para usar em todo o site.
Uma ótima maneira de economizar espaço é combinando essas imagens em sprites CSS (não, não a bebida). Um sprite CSS permite que você tenha várias imagens combinadas em uma, economizando a quantidade de vezes que um navegador precisa se comunicar com o servidor. Em seguida, um CSS simples divide a imagem em seções para exibir a parte correta onde ela é necessária no site.
Combinar as imagens e encontrar as dimensões corretas para cada seção pode ser um processo chato. No entanto, algumas pessoas legais criaram algumas ferramentas aqui e ali para ajudar a facilitar o processo!
Spritecow
SpritePad Spritebox (foto acima)
