Otimize imagens e fotos para um site WordPress mais rápido

1. Introdução: As pessoas dizem que são importantes em cada site para o problema é que se você carregar uma foto que é um tamanho de arquivo muito grande, que vai diminuir o seu site. Isso é ruim para todos os visitantes, mas também é ruim para sua pontuação de SEO, sua pontuação de pesquisa do Google. Então, como mantemos o tamanho do arquivo pequeno, mas mantemos a qualidade da imagem alta? Vou te mostrar aqui. Olá, sou John Wolfgang Nella. Eu sou um designer profissional agora há 20 anos, e eu trabalho para alguns grandes clientes como a Fox TV aqui na Austrália. As três regras importantes para cada foto que você enviar um tamanho de arquivo, proporção e nome de arquivo. Agora, nesta aula, vou mostrar-lhe como obter todos os três perfeitos usando o Photoshop ou usando o programa de fotos pré-instalado em seu laptop. Ok, vamos começar. 2. Velocidade /tamanho imagem ideal: As imagens são muito importantes para cada website. Você quer que eles pareçam incríveis para que seu site parece incrível. O problema é que se você carregá-los incorretamente, ele pode tornar o seu site mais lento. Aqui estamos em um dos sites de teste de velocidade, métricas GT. Então, venha aqui e digite seu URL. Esta não é uma boa pontuação. Há muitas coisas que podem tornar seus sites mais lentos. Alguns deles precisam de um pouco mais de assistência técnica, mas vamos apenas olhar para as imagens. Então, nesta página, se viermos aqui para estruturar, podemos ver alguns problemas em torno do tamanho da imagem. Este primeiro aqui em baixo, dimensionar corretamente as imagens. Se eu clicar neste, isso está me dizendo cada imagem que é potencialmente muito grande no meu site aqui, ou dizer-lhe o tamanho da imagem e sobrecarga, ele diz o tamanho que deve ser para acelerar o seu site. E mais uma coisa para olhar aqui. Aqui onde diz Serve imagens em formatos de próxima geração. Isso ocorre porque estamos usando uma imagem JPEG em nosso site, mas poderíamos estar usando um desses ou WebP Image. Falarei sobre isso mais tarde nesta aula. Mas antes de tudo, vamos dar uma olhada nos tamanhos de imagem e ver como podemos melhorar isso. Cada imagem que você carrega em um site fica dentro de um contêiner. E esse contêiner tem um certo tamanho. Tem uma largura de pixel e uma altura de pixel. Estes na parte superior são bem pequenos, o que significa que a imagem que enviei é provavelmente muito grande para o contêiner. Como você descobre o tamanho que deve ser? Bem, isso é muito simples. Basta clicar com o botão direito do mouse em qualquer imagem e ir para Inspecionar. E quando essa janela aparecer, clique aqui e, em seguida, passe o mouse sobre o item que você deseja verificar. Os números abaixo que mostramos o tamanho da imagem devem ser. As chances são de eu ter feito este muito grande para aquele lugar. Então vamos abrir nossas imagens e começar a redimensioná-las. 3. Edição de imagem - Photoshop e mais: Estamos agora no Photoshop. Todas as imagens carregadas devem seguir três regras. Número 1 é razão. Isso é importante para manter cada tamanho de imagem consistente em seu site. Isso significa que as coisas se alinham corretamente e faz com que seu site pareça agradável e limpo. O número dois é o tamanho do arquivo. Queremos que a qualidade da imagem seja alta, mas queremos que ela seja tão pequena quanto possível, porque então nosso site é mais rápido. E o número três é o nome final. Como você pode ver no momento, essas duas imagens apenas têm um número aleatório no final delas, que não vai ajudar ninguém a pesquisar no Google. Se você adicionar palavras-chave ao seu nome de arquivo, isso ajudará sua pontuação de pesquisa do Google. Vamos começar com este mais pequeno. Quando olhamos para o site, podemos ver qual era a proporção ideal para este. Tinha 360 pixels de largura e 240 pixels de altura. Então essa é uma razão é três por dois. Para alterar a proporção em qualquer imagem, basta passar o mouse aqui e clicar na ferramenta de corte. Como podem ver aqui em cima, isso já está definido para quatro por três. Mas eu quero mudar isso para três por dois. Para manter-se consistente em todo o site. Eu faço todas as imagens de paisagem três por dois proporção. Então, nesta pequena janela que passa o mouse para cima onde você pode mover a imagem em segundo plano para obter um corte melhor e clicar duas vezes. Lá vamos nós. Agora a imagem tem uma proporção de três por dois. Agora vou exportar este e dar uma olhada no tamanho do arquivo e o nome do arquivo. Então vá até aqui para Arquivo e vá para Exportar. E Exportar como. Na janela pop-up, você verá que o formato já é um JPEG. Se você tem algo que precisa de um fundo claro, faça esse PNG. Mas para uma imagem quadrada normal, vamos manter isso como JPEG. Aqui você verá qual o tamanho da imagem já é. A largura é de 910 pixels e a altura é de 607. Queremos que isto seja 360 por 240. Então vamos mudar a altura para 240. Quando eu faço isso, ele muda automaticamente a largura também. Mudou um único pixel aqui. Não se preocupe com isso. Isso não vai fazer uma grande diferença. Ainda é a proporção correta. Agora a próxima coisa a olhar é aqui à esquerda, este número aqui, este é o tamanho do arquivo que é 840 kilobytes. Isso não é muito grande, mas pode ser muito menor. Aqui você vai ver a qualidade que é em 100%. Na lista suspensa, brinque com este pequeno botão e deixe cair a qualidade. Aqui, eu deixei cair para 49 por cento. E você pode ver isso como um tamanho de arquivo muito menor. Essa qualidade é alta o suficiente? Vai clicar aqui para baixo e você pode ampliar a imagem para ver como ela se parece. Isso parece-me bem. Mas se eu quiser torná-lo um pouco mais forte, é só para cima em um pouco. Ok, e neste tamanho agora está chegando a 34 kilobytes. Então tente manter cada imagem que você carregar um menor de 100 kilobytes. Este é 34, então está tudo bem. Vamos clicar em Exportar. E neste pop-up, é aqui que você pode alterar o nome do arquivo. Como você pode ver no topo, ele ainda tem o nome do arquivo original. Mas eu quero que isso inclua palavras que as pessoas podem estar procurando no Google para que minha imagem apareça. Então eu vou chamá-lo assim. E depois salve. Se você não tiver o Photoshop, basta usar o editor de fotos pré-instalado no seu laptop. Eu uso um Mac, então estou usando fotos da Apple aqui. Só vou escolher a imagem que quero editar. E, nesta janela, passe o mouse até o topo e escolha Editar. Você tem muitas opções aqui, mas vamos escolher a colheita. Nós ainda queremos que esta seja uma proporção de três por dois, e nós temos todas essas opções aqui do lado direito. Vamos escolher três por dois. E clique em Concluído. E, em seguida, passe o mouse aqui para Arquivo Exportar e Exportar uma foto. Você pode mudar o tipo de foto e queremos que seja JPEG. Qualidade. Brincar com isso, ver o que funciona para você. Vou escolher o meio aqui só para ver qual é a qualidade. Agora minha largura, eu quero que seja 360 pixels. E aqui em baixo diz nome do arquivo, escolha este e digite o que você gostaria que ele fosse capturado. E exportação. Agora encontre a pasta. E você verá que pegou o nome que lhe demos, mas colocou este traço e um no final. Então apague isso. Como você pode ver o tamanho do arquivo aqui. Bem, eles são bastante semelhantes, mas basta tentar obtê-lo o mais baixo possível e apenas jogar ao redor com a qualidade que você vai ver o que funciona melhor para você eo tipo de site que você está executando. Agora essas imagens estão prontas. Vamos enviá-los todos para o WordPress. 4. Otimização extra — Imagens WebP: Este é um serviço chamado pixel curto. O que isso faz é comprimir todas as suas imagens para um tamanho IV ou menor. Se você quiser fazer um teste gratuito rápido, basta vir aqui e digitar o URL do seu site. E se eu usar este serviço para compactar minhas imagens ainda mais, e nós vamos até fazer o site funcionar 44% mais rápido se você tiver apenas um site muito pequeno, bem, clique aqui, Ver detalhes. Isto irá dizer-lhe quais imagens foram redimensionadas. Você pode baixar a versão menor e fazer o upload dela. Mas se você tem um grande site com um monte de imagens, você vai precisar instalar o plug-in e pixel curto tem dois plugins. Um comprime o tamanho dos jpegs que você carregou. E número dois, esse é um que ajuda você a criar a página da Web, uma versão de suas imagens. São imagens somente na web. Portanto, eles são ainda menores e fazem o seu site funcionar ainda mais rápido. Então vamos dar uma olhada nisso. Entre em seu painel WordPress e vá para Adicionar Plugins, digite pixel curto. E você verá esses dois no topo. Um deles é o Optimizer de imagem que torna seus jpegs tão pequenos quanto possível. E esta é uma imagem adaptativa que transforma cada imagem na versão da página web. Então vamos instalar os dois. E, em seguida, basta passar por todo o processo de configuração. Eles têm uma versão gratuita que permite que você redimensione até um 100 imagens gratuitamente. Ou eles têm algumas versões pagas. Se você tem um site muito maior com milhares de imagens. Basta verificar a seção Sobre aqui. Se eu tiver alguma oferta desta empresa, incluirei alguns links lá. Quando você tiver tudo configurado, vá para o otimizador de imagem, plug-in, preencha todos os detalhes e clique aqui em Salvar. E aqui você pode ver que ele irá otimizar cento, duzentos e trinta e oito de minhas imagens. Isso é porque eu tenho um site bastante grande aqui, mas basta clicar nisso. Quando isso for concluído, venha até aqui para Configurações e escolha aquele que é curto processo AI pixel que você passar. Vamos certificar-nos de que o seu site é adequado para esta alteração nas imagens WebP. Você pode executar alguns testes ou você pode configurar tudo e apenas ver se ele está funcionando e se ele não está gravado para baixo o plugin. Quando você vem para esta página aqui, ele diz Suporte Web PIE. Apenas certifique-se de que eles são todos textos e que irá mudar cada imagem, carregou seu site em uma versão de página web. Em seguida, entre em seu site e clique no ícone de pixel curto na parte superior. E você verá CDN aparecer no topo de algumas imagens. Clique nisso. E então você verá o que o serviço fez. Ele tem imagem otimizada e dimensionada de um 1000 pixels para 334. Esse é o tamanho certo que precisa ser. Como você pode ver, isso reduziu o tamanho e 32 KV para 5,9 KB. Então, isso é muito menor. Agora, quando você olhar para isso, você pode ir, na verdade, essa não é a qualidade da imagem que eu quero. Então você tem um monte de opções aqui para excluir uma imagem como esta. Se você clicar em Excluir este URL de imagem, isso significa que a imagem não será incluída nesta otimização. Mas isso parece-me bem. Então vamos continuar com isso. E se descermos aqui, clique nas outras imagens. Você verá que todas as imagens aqui foram redimensionadas. Então, portanto, você deve ter um site muito mais rápido. Então voltamos às métricas de serviço e testamos novamente a velocidade do site. E você pode ver que tudo agora está correndo muito mais rápido. E isso é porque muito menos espaço agora é ocupado por imagens em nosso site. E se voltarmos ao site, enquanto a qualidade parece tão alta quanto era antes, nada mudou. E temos um site muito mais rápido. E todos os sites são configurados de uma maneira diferente. E pode ser um caso de usar ambos os plug-ins aqui não funciona em seu site, se esse for o caso, Aqui está o que eu recomendo. Exclui o i1 e vá para o pixel curto regular. Em seguida, venha para esta página, muito avançado, e abaixo de onde está escrito imagens de próxima geração, clique nesta caixa. Em seguida, o abaixo que diz entregar essas versões de próxima geração no front-end. E você terá algumas opções aqui. Destrua tudo isso para ver qual deles vai trabalhar em seu site e obter os melhores resultados. Dê-lhe uma tentativa. Você rolar para baixo aqui e salvá-lo, e então você terá o site perfeito trabalhando rápido. 5. Obrigado: Obrigado por assistirem a toda a aula. Se você tiver alguma dúvida sobre o upload de fotos, hospede-as aqui abaixo na seção de discussão. Além disso, enquanto estiver lá, clique no meu nome e confira o meu perfil Skillshare. Aqui você verá todas as minhas aulas sobre a construção de um site. Havia um perfeito para iniciantes sobre o uso do construtor de páginas Elementor e outro sobre a criação de seu próprio portfólio on-line. Mas ambos, você não precisa saber um único pedaço de codificação. É tudo sobre design criativo. Além disso, certifique-se de me seguir e você receberá notificações toda vez que eu carregar uma turma nova. Ok, isso é tudo. Tenha um ótimo dia.