Hoje, estamos quebrando como adicionar imagens no WordPress e reduza o tamanho do arquivo (para manter suas páginas e postagens carregadas o mais rápido possível).
Quando você está apenas aprendendo os fundamentos de como iniciar um blog, há muito a descobrir, entendi. Falamos sobre como alterar o tamanho da fonte, alterar a cor da fonte, criar um link clicável e muito mais aqui.
A boa notícia é que, em 2020, agora é muito fácil aprender a adicionar imagens no WordPress com todas as atualizações e aprimoramentos de usabilidade que eles viram na última década.
Neste tutorial rápido, mostrarei como adicionar imagens nas postagens do WordPress, tanto no Clássico Editor (que eu prefiro usar) e através de suas mais recentes Gutenberg Editor.
Agora, vamos mergulhar na adição de imagens às postagens do WordPress, além de reduzir o tamanho do arquivo o máximo possível, para manter-se alinhado às melhores práticas de SEO e manter as páginas carregando o mais rápido possível.
Como adicionar imagens WordPress (e reduzir o tamanho do arquivo) em 2020
- Adicionando imagens a postagens no editor clássico do WordPress
- Adicionando imagens a postagens no Gutenberg WordPress Editor
- Adicionando uma imagem em destaque a uma postagem no WordPress
Agora, rapidamente, antes de abordarmos este tutorial sobre como adicionar imagens ao WordPress, mostrarei como reduzir o tamanho do arquivo de uma imagem (ajudando suas postagens a carregar mais rapidamente) em duas etapas fáceis.
Instale o plug-in (gratuito) Compactar imagens JPEG e PNG por Tiny PNG
Você pode fazer o download do plugin gratuito Compactar imagens JPEG e PNG para WordPress bem aqui da biblioteca de plugins do WordPress.
Como alternativa, você também pode procurar o plug-in e instalá-lo diretamente dentro do seu menu de plugins, acessível no lado esquerdo da seção de administração do blog aqui ou confira este tutorial rápido em como instalar um plugin do WordPress:
Depois de instalar o plug-in Compactar imagens JPEG e PNG, todas as novas imagens enviadas para o seu blog WordPress serão otimizado automaticamente e o tamanho do arquivo reduzido o máximo possível sem comprometer a qualidade da sua imagem.
Nota: Este é o melhor plug-in de compactação de imagem do mercado. Ele permite até 500 compressões de imagem gratuitas por mês (o que é muito mais do que você provavelmente precisará) antes de precisar atualizar para um plano pago a US $ 0,009 / imagem além dos primeiros 500 por mês. É uma pechincha e você não encontrará um plug-in de compactação melhor que oferece mais créditos gratuitos.
No entanto, se você deseja fazer a compactação de imagem diretamente no seu próprio computador (ilimitado de graça), recomendo o Aplicativo ImageOptim.
Carregar suas imagens
É isso aí! Sério, é assim tão fácil.
Depois de instalar o plug-in de compactação no seu blog - ou compactar primeiro imagens individuais no computador - você estará pronto para enviá-las para suas postagens ou páginas no WordPress.
Agora, vamos descobrir exatamente como adicionar imagens ao WordPress.
1. Adicionando imagens a postagens no editor clássico do WordPress
Se você gosta de mim e ainda prefere o Editor clássico do WordPress layout para adicionar / editar suas postagens, siga aqui.
Por outro lado, se você estiver usando o Editor Gutenberg mais recente para o conteúdo da sua postagem, vá para a próxima seção dessa explicação passo a passo. Se você não tiver certeza de qual editor está usando, dê uma olhada nas capturas de tela da imagem abaixo e compare-as com a aparência do seu editor. Deseja usar o Editor clássico, mas não sabe como obtê-lo? Reserve 2 minutos para seguir o tutorial simples de Yoast sobre instalando o Editor clássico no seu blog WordPress.
1. Abra a publicação para a qual você está adicionando imagens (e encontre o local certo)
Primeiro, você precisa verificar se está dentro da postagem na qual deseja adicionar uma imagem.
Em seguida, navegue até o local exato da postagem em que deseja adicionar a imagem.
2. Clique no botão "Adicionar mídia" na parte superior do seu editor.
Esse botão ficará assim aqui:
Depois de clicar no botão "Adicionar mídia", você verá a tela na qual pode fazer o upload do seu arquivo de imagem.
3. Clique em "Upload Files"
Clique na guia "Carregar arquivos" e você será direcionado para a tela em que pode usar a ferramenta seletora para escolher um arquivo de imagem de onde está localizado no seu computador.
Como alternativa, se você estiver arrastando um arquivo de imagem da área de trabalho e enviando-o, poderá pular a tela "Upload Files" e seguir diretamente para arrastar e soltar a imagem (há uma demonstração disso na próxima etapa) .
4. Carregue seu arquivo de imagem
Prefiro arrastar arquivos de imagem da área de trabalho e soltá-los no carregador de arquivos (em vez de usar o seletor para localizá-los no meu computador), pois é muito mais rápido.
Aqui está uma rápida demonstração em vídeo / GIF de como adicionar uma imagem da sua área de trabalho ao WordPress:
Depois de fazer o upload da sua imagem, o plug-in de compactação funcionará para ajudar a reduzir o tamanho do arquivo (nos bastidores).
Nota: Antes de terminar as opções de imagem e clicar em "Inserir na postagem", você deve escrever um Texto alternativo compatível com SEO para sua imagem - algo que descreva a natureza do que está acontecendo na sua imagem e, idealmente, tecendo em uma das segmentar palavras-chave para as quais você espera que o artigo seja classificado (nos resultados de pesquisa orgânica).
5. Selecione suas opções de imagem e clique em "Inserir na postagem"
Por fim, você terá algumas opções para definir para sua imagem. Isso inclui:
- Controlando o alinhamento de como sua imagem aparece em sua postagem (sempre seleciono Alinhamento centralizado)
- Como vincular sua imagem a outra página ou publicação em seu blog (ou a um link externo para o qual você deseja direcionar os leitores)
- Tamanho da tela (eu sempre recomendo fazer o upload em tamanho real para evitar perda na qualidade da imagem)
Depois de selecionar essas opções, você está pronto para clicar em "Inserir na postagem" e pronto!
Esse botão estará bem aqui no canto inferior direito da tela:
Agora, você será levado de volta à sua janela do editor e verá a imagem que acabou de adicionar, bem ali onde a enviou.
Lembre-se de que você ainda tem algumas opções de edição fáceis e rápidas, se decidir mudar alguma coisa com a exibição da sua nova imagem:
- Você pode redimensioná-lo manualmente, agarrando um dos cantos e arrastando-o para cima ou para baixo no tamanho
- Você pode clicar no centro da imagem e arrastá-la pela postagem para reposicioná-la
- Você sempre pode excluir a imagem clicando em "backspace" ou "delete" no teclado e começar de novo
E é isso! Você aprendeu como adicionar uma imagem ao WordPress com o Editor clássico.
2. Adicionando imagens a postagens no Gutenberg WordPress Editor
No Editor do Gutenberg WordPress, suas opções de edição de post serão muito diferentes do que você verá no Editor clássico.
Gutenberg adota uma abordagem de adição / edição de conteúdo através de um sistema de "blocos", como blocos de texto, blocos de cabeçalho, blocos de imagem e assim por diante. Então, vamos mergulhar na adição de imagens em Gutenberg.
1. Selecione o ícone "Adicionar imagem"
Depois de adicionar uma imagem no local certo na sua postagem, selecione o ícone "Adicionar imagem". Vai ficar assim aqui:
Depois de clicar no ícone "Adicionar imagem", você terá algumas opções para como você pode adicionar uma imagem à sua postagem.
2. Escolha como você adicionará a imagem
Em Gutenberg, você tem algumas opções rápidas para adicionar uma imagem no WordPress. Isso inclui:
- Upload (que abrirá uma tela seletora que permite escolher o arquivo de imagem do seu computador)
- Biblioteca de mídia (que leva você à sua biblioteca de imagens existente - da qual você também pode arrastar e soltar em uma imagem)
- Inserir a partir do URL (se houver uma imagem localizada em algum lugar on-line que você deseja importar, cole esse link aqui)
Aqui está um instantâneo dessas opções (pessoalmente, basta clicar em "Enviar" e pegar rapidamente a imagem que desejo da minha área de trabalho):
3. Carregue sua imagem
Depois de selecionar a imagem que você deseja enviar, basta clicar no botão "Abrir" e ela será adicionada à sua postagem.
Agora que você adicionou a imagem, uma miniatura menor aparecerá como um novo bloco em sua postagem.
Aqui está uma captura de tela de como isso ficará:
4. Configurações de imagem e opções de edição rápida
Antes de prosseguir, você deseja discar as configurações de imagem (de acordo com as práticas recomendadas de SEO).
E, assim como no Editor clássico, você poderá definir várias configurações e propriedades diferentes para uma imagem. Com Gutenberg, é apenas um pouco diferente. Suas configurações de imagem estão localizadas na barra lateral direita (depois de clicar uma vez na imagem).
Veja como são essas configurações:
Certifique-se de definir suas configurações de imagem para pelo menos essas duas propriedades:
- Escrever um texto alternativo compatível com SEO que descreve a imagem e tece em uma frase-chave
- Tamanho da imagem (eu sempre exibo imagens em tamanho real para evitar perda de qualidade)
Você também pode clicar nas configurações de “Estilo” para adicionar mais recursos diferenciados de estilo e corte com o Gutenberg.
5. Movendo imagens em um post via Gutenberg
Um efeito colateral muito interessante do foco do editor Gutenberg em usar blocos de conteúdo é a facilidade com que você pode mover suas imagens (ou qualquer bloco de conteúdo) dentro de uma postagem.
Depois de clicar uma vez na imagem que você deseja reorganizar na postagem, você verá as setas "para cima" e "para baixo" aparecerem ao lado da imagem.
Clique nessas setas para mover sua imagem para cima ou para baixo dentro de sua postagem, da seguinte maneira:
E é isso! Você está pronto para ir.
Agora você aprendeu como adicionar uma imagem ao WordPress no Editor Gutenberg também "
3. Adicionando uma imagem em destaque a uma postagem no WordPress
As imagens em destaque são essenciais em um blog WordPress - porque são as imagens exibidas na parte superior das postagens do seu blog (e nos resultados de pesquisa e nas plataformas de mídia social quando o conteúdo é compartilhado).
Por último, mas não menos importante, veja como adicionar uma imagem em destaque a uma postagem (ou página) no WordPress.
No canto inferior direito da janela do Editor do WordPress, você verá uma seção para adicionar uma imagem em destaque. Clique em "Definir imagem em destaque" e você será direcionado para a tela de upload de imagem padrão, onde poderá adicionar a imagem que deseja destacar na parte superior da sua postagem (também nos resultados de pesquisa e nas plataformas sociais).
Depois de fazer o upload da imagem que você deseja usar e clicar em "Definir imagem em destaque", você será levado de volta à tela do editor e verá uma pequena miniatura da imagem sendo exibida no canto inferior direito (para confirmar adicionou a imagem correta) assim:
Muito simples, certo?
Se você selecionou a imagem errada (ou deseja fazer alterações posteriormente), basta clicar no texto "Remover imagem em destaque" e terá a oportunidade de selecionar ou fazer upload de uma imagem diferente para ser destacada em sua postagem.
Considerações finais sobre como adicionar uma imagem no WordPress
Adicionar imagens às suas postagens no WordPress não precisa ser difícil.
Esteja você usando o Editor clássico ou o Gutenberg em seu blog, a equipe por trás do WordPress trabalhou duro para tornar a adição de imagens um processo muito fácil.
Se você ainda estiver com problemas, envie-me um comentário na parte inferior desta postagem. Teremos prazer em ajudá-lo a solucionar os problemas que você está tendo.
Isso é tudo por hoje!
Acabamos de abordar como adicionar imagens no WordPress 👏
Gostou do que está vendo? Inscreva-se para obter mais tutoriais e conselhos sobre blogs.
Deseja que mais tutoriais de blogs sejam entregues diretamente na sua caixa de entrada?
Inscreva-se hoje e participe de 122.843 outros blogueiros inteligentes, recebendo meus melhores conselhos sobre blogs.