Ao longo dessa nossa série de posts passamos por um número muito grande de conceitos e informações. Para ajudá-lo a ter uma melhor fixação de tudo que foi visto, neste post nós faremos um pequeno resumo.

Depois do entendimento agora vamos separa o que você precisa realmente fixar.

O que foi visto?

                Apresentação:

                A missão da google é entregar para quem fez a pesquisa o conteúdo mais relevante

                As imagens são parte importantíssima de uma estratégia de conteúdo

                Lazyload

                Explicamos o que é carregamento antes e depois da dobra

                Explicamos que é importante retardar o carregamento das imagens que aparecem depois da dobra.

                Sugestões de tamanhos e srcset

                Criamos a ilustração da imagem com o gato com novelo de la

                Mostramos o problema gerado quando colocamos apenas uma imagem do gato com novelo de la no servidor do site

                Passamos que a melhor prática é colocar umas 4 ou 5 imagens do gato com novelo de la e sugerir para o google com o tamanho mais indicado para cada tipo de resolução

                Explicamos que srcset é o set se srcs das imagens do gato com novelo de lã.

                Formato de última geração

                Explicamos o que é um formato  .webp

                Passamos que nem todos os navegadores suportam, e que a melhor prática é servir em WebP e em algum formato mais popular como jpg, por exemplo.

                Chamamos a atenção para a quantidade de imagens do gato com novelo de la que devemos subir para o servidor do site.

                Atributos width e height

                Mostramos que não se trata de definir altura e largura em folha de estilos. E sim definir os tributos width e heigth da tag <img />

                Explicamos que isto não torna as imagens estáticas, e css do tipo width: 75%; height: auto; continuam funcionando perfeitamente.

                Explicamos que definir estes atributos no html serve para informar ao navegador as proporções da imagem e qual a quantidade de memória será necessária para baixá-las.

                Explicar a imagem para a google

                Mostramos que não adianta rechearmos nossos posts com imagens se não conseguirmos mostrar para a google qual o conteúdo da imagem e como ela se relaciona com o texto.

                Passamos que as ferramentas para fazer isto são 4, a saber: Nome do arquivo, texto alternativo, legenda e title.

Este é o handbook que nós utilizamos aqui na Pipeline para fazer com que as imagens além de não prejudicar a performance possam ajudar as campanhas de SEO.