Como adicionar facilmente imagens ao seu blog como um profissional

Você escreveu seu melhor post de blog de todos os tempos.

Sério, isso é ótimo que está se tornando viral com hordas de leitores famintos.

Uau Prata! Primeiro, você precisa chamar a atenção deles.

Antes que alguém leia sua peça brilhante, eles precisam primeiro parar e prestar atenção.

É aí que entram as imagens..

Imagens, vídeos, capturas de tela, diagramas e ilustrações são uma ótima maneira de evitar que o leitor clique. Adicionar imagens ao seu blog ajuda os leitores a entender suas informações e ideias e lembrar de sua postagem.

O truque é criar e adicionar essas imagens de blog de forma rápida e eficaz.

Neste post, vamos orientá-lo em todas as etapas, ferramentas e truques para adicionar imagens ao seu blog sem ter que gastar horas fazendo isso.

POR QUE AS IMAGENS FUNCIONAM

“Nosso cérebro é principalmente um processador de imagem, não um processador de texto.” – Psicologia Hoje

Estamos (literalmente) conectados por imagens. O neuroanatomista RS Fixot estimou que dois terços da atividade do nosso cérebro são dedicados à atividade visual. E faz sentido…

Historicamente, usamos nossa visão para nos alertar contra ataques desagradáveis ​​de predadores ou para detectar alimentos que poderíamos caçar e matar ou colher e colher.

Na internet não é diferente…

Seus leitores estão procurando inconscientemente por conteúdo relevante ou divertido, ou ambos. De fato, artigos contendo imagens relevantes têm 94% mais visualizações totais do que artigos sem imagens.

Artigos que contêm imagens relevantes têm 94% mais visualizações totais do que artigos sem imagens Click To Tweet .

É aí que as imagens ajudam. Qualquer coisa, desde uma simples imagem até um gif personalizado, tornará a experiência de leitura mais interessante e manterá o leitor rolando para baixo.

Nosso cérebro pode processar imagens 60.000 vezes mais rápido que texto

De fato, 65% dos executivos seniores de marketing dizem que fotos, vídeos, ilustrações e infográficos são essenciais para a comunicação da história da marca.

Então, se as imagens são tão boas, como você deve adicionar imagens ao seu blog para obter mais tráfego e melhores resultados?

Vamos começar com os tamanhos de imagem.

PIXELS, FORMATO, TAMANHO E TODAS AS COISAS

Tentar entender as diferentes opções de tamanho de imagem pode ser bem complicado. As duas coisas básicas a saber são orientação e tamanho/compressão .

Orientação

Para a maioria dos blogs, uma orientação horizontal (largura maior que altura) funciona melhor. Imagens horizontais/paisagem ocupam menos espaço na tela, permitindo que seu conteúdo chame a atenção de seus leitores. Imagens horizontais também são perfeitas para compartilhar seu blog no Facebook, Twitter e LinkedIn.

Mas as imagens verticais ou quadradas têm melhor desempenho no Instagram e são mais propensas a serem fixadas no Pinterest. Novamente, o motivo é simples – Instagram e Pinterest são sobre imagens. Uma imagem vertical/retrato ocupa mais espaço na tela, o que as torna mais atraentes.

A orientação que você escolhe se resume a seus usuários e quais plataformas sociais eles usam.

O Sprout Social mantém uma lista atualizada dos melhores tamanhos de imagem para os vários canais de mídia social neste post.

É útil conhecer os conceitos básicos de tamanhos de imagem para cada plataforma que você usa.

Tamanho/Compressão

O tamanho da imagem pode significar duas coisas – o tamanho físico da imagem (comprimento x largura) e o tamanho do arquivo (bytes).

A maioria das imagens diretamente da sua câmera ou de um site de banco de imagens tem resolução (tamanho do arquivo) e tamanho físico maiores do que o necessário para a web. O problema com arquivos de imagem grandes é que eles tornam seu site mais lento.

Uma foto digital é composta de pixels (px) – minúsculos ladrilhos quadrados coloridos. Geralmente falamos sobre pixels de duas maneiras – contagem de pixels e densidade de pixels. A contagem de pixels é o número de pixels que compõem sua foto. Portanto, uma foto de 800px por 600px significa simplesmente que sua foto tem 800 pixels de largura e 600 pixels de altura.

A imagem à esquerda tem 3456 × 5184px e 2,7Meg. A imagem à direita foi reduzida para 800 x 1200 e 193kb.

A densidade de pixels, ou dpi, é o número de pixels por polegada quadrada. Quanto mais pixels por polegada quadrada, maior a resolução da imagem e mais nítida ela será.

Para imprimir fotos, 300 dpi ou superior é o ideal. Mas, para a web, um bom intervalo é de 72 a 150 dpi.

Os melhores tamanhos para o seu site

O objetivo do seu site é uma boa resolução (não confusa) e velocidade (não grande).

Suas imagens devem ser tão grandes quanto a largura do conteúdo do seu blog. Todos os sites modernos são construídos com design responsivo (redimensionar automaticamente a página para smartphones, laptops, tablets e telas de desktop), defina sua imagem para a largura máxima.

Encontre um equilíbrio entre o tamanho e a qualidade do arquivo

Quanto menor o tamanho do arquivo da sua imagem, mais rápido ele será carregado para o seu leitor. Mas, reduzir muito o tamanho pode criar uma imagem difusa. Seu objetivo é encontrar o equilíbrio entre o menor tamanho de arquivo e a qualidade aceitável.

Tente manter o tamanho da imagem entre 150 KB e 300 KB. Dê uma olhada no exemplo abaixo. A imagem original tinha 7,6 MB e 5000px de largura. A imagem à esquerda foi redimensionada para 860px de largura e salva como um jpeg de alta qualidade, que produziu um arquivo de 250KB.

Você mal pode dizer a diferença entre esta imagem e a original quando visualizada online. É perfeito para a web.

A imagem à direita foi redimensionada para 860px de largura, mas salva como um jpeg de 30KB de baixa qualidade. Claro, ele carregará rapidamente, mas é confuso e parecerá amador.

O tamanho ideal da imagem é 150-300kb. Qualquer menor e sua imagem ficará muito difusa.

Obviamente, ao adicionar imagens ao seu blog, nem sempre é possível manter suas imagens abaixo de 300 KB. Em telas de retina, uma fotografia complexa pode parecer confusa em 300 KB.

A ideia chave para levar para casa é manter os tamanhos dos arquivos tão pequenos quanto possível, especialmente se você estiver usando muitas imagens em sua postagem! Os tempos de carregamento da página afetam seus rankings do Google e os leitores provavelmente serão desligados de uma página que leva muito tempo para carregar.

Existem vários serviços gratuitos para reduzir o tamanho da imagem, como Pic Resize e Tiny PNG. Ou você pode usar sites de design gratuitos como Canva ou PicMonkey para obter o tamanho e a resolução certos para qualquer site de mídia social ou para o seu site (mais sobre como usar essas ferramentas abaixo).

Ferramentas como o Pic Resize facilitam a redução da resolução da sua imagem sem sacrificar a qualidade

Eu uso JPG, GIF, PNG, SVG?

Se você já se confundiu com todos os tipos de imagem (jpeg, gif…) isso vai ajudar.

Ao adicionar imagens ao seu blog qual o melhor formato?

• • JPG/JPEG – oferece imagens de grande qualidade em tamanho de arquivo pequeno. É a melhor opção para fotos, a menos que precisem ser transparentes, animadas ou com muito texto
• • GIF – perfeito para pequenos gráficos e animações, podendo ter fundos transparentes.
• • PNG – ideal para gráficos detalhados, imagens com muito texto ou imagens transparentes. Arquivos PNG tendem a ser maiores que arquivos JPG.
• • SVG – este é um formato vetorial escalável, o que significa que permanece nítido e claro em qualquer resolução. Eles tendem a ser grandes em termos de tamanho de arquivo, mas se você tem um gráfico complicado que precisa ser redimensionado automaticamente e/ou tem efeitos de rolagem ou animações, o SVG é a escolha perfeita.

Na maioria dos casos, use jpeg para todas as imagens, a menos que queira um plano de fundo transparente.

NOTA: Nem todos os sites estão configurados para lidar automaticamente com arquivos SVG. WordPress tem plugins que vão ajudar. Para sites que não são WordPress, experimente e, se o seu arquivo SVG não for exibido, verifique com seu desenvolvedor da web.

Teste suas imagens

Não tem certeza de como sua imagem será exibida online? A maioria dos sistemas de gerenciamento de conteúdo (como o WordPress) permite que você visualize seu rascunho de postagem no blog antes de publicá-lo.

IMAGENS EM DESTAQUE

Cada postagem do blog precisa de uma imagem em destaque.

Sua imagem em destaque é a primeira coisa que seu leitor vê e é a imagem puxada por seus canais de mídia social. Neste artigo, explicamos o que fazer se sua imagem não estiver sendo puxada corretamente por seus canais sociais.

Sua imagem em destaque pode ser uma fotografia ou, com um pouco de trabalho extra, sobrepor seu título na imagem. De qualquer forma, ele precisa criar alguma curiosidade e fazer o leitor querer ler.

No WordPress, você encontrará o link para escolher sua imagem em destaque no lado direito do menu do WordPress.

CRIANDO SUA PRÓPRIA IMAGEM

Imagens de banco de imagens são ótimas, mas original é melhor – mesmo que você esteja apenas adicionando um toque especial a uma imagem de banco de imagens.

Você não precisa ser um artista gráfico ou possuir um software caro para criar suas próprias imagens. Ferramentas gratuitas como Canva e Picmonkey têm uma ampla variedade de modelos, imagens e gráficos e fontes prontos para uso. Com um pouco de prática, você pode adicionar seu toque exclusivo às suas imagens ou criar imagens de citações, memes, diagramas e infográficos.

Aqui está uma imagem que fiz no Canva em apenas 5 minutos.

Com um pouco de esforço extra, você pode sobrepor seu título à sua imagem.

Depois de se familiarizar com essas ferramentas, você pode ser criativo com seus resultados. Técnicas simples como redimensionar imagens, adicionar telas, cortar – até mesmo escolher fontes mais interessantes fará com que sua imagem se destaque.

Aprenda técnicas mais simples para fazer suas imagens se destacarem neste post.

[Você não precisa ser um designer gráfico para vestir suas imagens para que elas se destaquem.]

EVITE A LEI

Você pesquisou na web, encontrou a imagem perfeita e a adicionou ao seu blog.

Avanço rápido de dois meses e você recebe uma carta de 'cessar e desistir' exigindo dinheiro por danos.

O QUE AAAA?

As imagens têm propriedade, assim como as obras de arte. E você não pode usar algumas imagens sem a permissão do proprietário. Neste post, explicamos como o creative commons funciona com imagens.

A boa notícia é que existem mais sites do que nunca para fornecer imagens brilhantes para as quais você pode comprar direitos de usuário ou usar creditando o artista.

Credite o artista

Se você estiver usando uma imagem sob uma licença Creative Commons, é uma boa prática creditar o fotógrafo e a fonte. A maioria dos sites de fotos fornece o link quando você baixa a imagem.

Com sites como o Unsplash, eles facilitam a cópia do crédito do artista para que você possa colá-lo na parte inferior da sua postagem

No BlogWorks usamos vários sites para nossas imagens. Temos uma conta no Adobe Stock na qual confiamos para os blogs de nossos clientes, além de usarmos frequentemente Pixabay, Unsplash, Refe e Magdeleine.

A Adobe fornece uma fonte de imagens de alta qualidade, juntamente com outros pacotes de software criativos. Se você está procurando uma nova maneira fácil de encontrar ou criar imagens, você pode conferir seus produtos aqui.

Se você ainda não conseguir encontrar o que deseja, vá para Librestock, onde imagens de mais de 40 sites são agregadas para você pesquisar. Listamos 7 sites para encontrar ótimas fotos neste post.

Você pode até usar o Google para adicionar imagens ao seu blog – apenas certifique-se de escolher 'Marcado para reutilização' em Ferramentas.

Se estiver usando o Google para encontrar imagens, sempre pesquise por "Marcado para reutilização"

Dica rápida sobre como procurar aquela imagem “perfeita”: encontrar uma imagem um pouco melhor do que a que você encontrou nos primeiros 5 minutos não fará com que seu post se torne viral. Limite-se a 5 minutos para encontrar uma imagem suficientemente boa – você sempre pode alterá-la mais tarde se encontrar uma melhor.

USE IMAGENS DE PESSOAS REAIS

Fotos de pessoas são uma das formas de conteúdo mais envolventes na internet.

Os rostos são únicos e os humanos têm uma preferência visual fixa para encarar rostos. Imagens de rostos e pessoas prenderão a atenção do leitor.

Mas sua imagem precisa se relacionar com o conteúdo ou ajudar a explicar um conceito ou ponto – estudos descobriram que fotos de pessoas são encobertas pelos leitores quando são imagens genéricas e decorativas.

Quando se trata de mídia social, os rostos nos envolvem. Fotos com rostos atraem mais comentários e curtidas.

Se estou adicionando imagens ao nosso blog, tento evitar imagens bregas, como a imagem à esquerda e procuro algo mais original, como a imagem à direita.

A fotografia de estoque pode ser simples, sem originalidade e meio chata (esquerda) ou mais interessante e original (direita)

ADICIONANDO CAPTURAS DE TELA E DIAGRAMAS

Digamos que você esteja tentando explicar como usar um mecanismo de pesquisa on-line ou onde ir em seu site para encontrar seu livro mais recente, ou até mesmo como garantir que seu e-mail opt-in não tenha entrado na pasta "promoção" dessa pessoa em Gmail.

Meio difícil de explicar em palavras – certo?

É aí que as capturas de tela são super úteis. Em alguns minutos você capturou a imagem, adicionou algumas setas e agora sua imagem vale mais que mil palavras – além disso, você leva mais pessoas ao lugar certo!

Uma ferramenta como o Snagit é um investimento inestimável. Por apenas US $ 50, você tem um cavalo de batalha pronto para usar para capturas de tela, vídeos e até gifs (todas as capturas de tela usadas neste post foram criadas com o Snagit).

Aqui está um vídeo que criei no Snagit usando o Snagit para editar uma captura de tela (agora isso é meta!).

Gráficos e diagramas personalizados são outra ótima maneira de explicar conceitos complexos ou apenas adicionar um pouco de diversão ao seu post. OmniGraffle e Lucidchart oferecem ferramentas de fluxograma que você pode usar para criar diagramas divertidos. O Piktochart possui uma versão gratuita para criar infográficos e gráficos orientados a dados.

Precisa de um gráfico para ajudar a ilustrar algumas informações? Você pode obtê-los diretamente do Excel, Planilhas Google ou Word. Basta copiar seu gráfico e colá-lo em seu editor de texto ou fazer uma captura de tela.

E não tenha medo de pegar um lápis ou caneta! Esboce sua ideia e tire uma foto. Não importa se você não é um artista – seus leitores vão gostar de ver que você é igual a eles!

ADICIONANDO VÍDEOS E GIFs

Às vezes, o texto por si só não é suficiente. É aí que o vídeo e as animações podem entrar.

Giphy e Tenor são bons recursos para GIFs animados. O Sitepoint tem uma ótima lista de recursos de locais para encontrar imagens, vídeos e outras mídias de Creative Commons.

Já me perguntaram muitas vezes como adiciono vídeos ao meu blog. Certamente não sou especialista, mas quando se trata de qualquer coisa que cheira a técnica, lembro-me 'feito é melhor que perfeito' e mantenho a simplicidade. Do início ao fim, um vídeo simples não deve demorar mais de 15 minutos.

Aqui está uma ilustração das etapas pelas quais passo.

Você precisa hospedar seu vídeo em algum lugar. Usamos o Vimeo há muitos anos e adoramos o preço e a rapidez e a simplicidade de uso. Você também pode usar o YouTube ou Wistia.

As etapas para adicionar vídeo ao seu blog são bem simples depois de praticá-las algumas vezes, mas elas variam dependendo do seu site e de onde você está hospedando seu vídeo.

Veja como inserir um vídeo do YouTube no WordPress:

1. Esse processo ficou super simples. Comece localizando o vídeo que deseja no YouTube.
2. Em seguida, copie o URL desse vídeo (será parecido com https://www.youtube.com/watch?v=JKrPz6JHwYw)
3. Faça login no seu site WordPress, abra a postagem do blog para editar, localize o cursor onde deseja o vídeo, cole o URL.

Esta ferramenta gratuita permitirá que você personalize a aparência do seu vídeo do YouTube e faça coisas como desligar os irritantes vídeos “relacionados”.

Veja como inserir um vídeo do Vimeo no WordPress:

1. • Para obter o código de incorporação do seu vídeo, acesse sua página no Vimeo e clique no botão 'Compartilhar'.
2. • Clique no link '+Mostrar opções' e copie o código de incorporação.
3. • Faça login no seu site WordPress, abra a postagem do blog para editar e clique na guia 'Texto' em seu editor de texto.
4. • Localize o cursor onde deseja o vídeo e cole o código de incorporação.

Com ferramentas como o Vimeo, é fácil inserir vídeos em seu blog como um profissional.

Nota: Você deve incluir texto em sua postagem com seu vídeo se quiser que sua postagem seja selecionada por mecanismos de pesquisa como o Google. Você pode ver como isso é feito no vlog de viagem do Gone with the Wynn. Com cada postagem no blog, eles têm muito texto, imagens e vídeos para manter você, o leitor interessado, e para fins de SEO.

USANDO UM TEMA CONSISTENTE

Ao escolher imagens ou fontes, é uma boa ideia ser consistente com o tema do seu site e do seu blog.

Pode ser tão simples quanto usar uma fonte consistente (sou fã de Helvetica Neue, Marker Felt, Yellowtail e Bebas Neue), um esquema de cores ou estilo de ícone.

O aplicativo de atendimento ao cliente, Help Scout, faz um ótimo trabalho ao usar elementos de design consistentes em seu blog que são leves, modernos e peculiares.

ESCOLHENDO O NOME DE ARQUIVO CERTO

O SEO da imagem começa com o nome do arquivo. Quando você usa imagens em postagens de blog, deseja que o Google saiba sobre o que é sua imagem sem nem mesmo olhar para ela!

Antes de enviar sua nova imagem, dê uma olhada no nome da imagem. Sua imagem deve ter um nome relacionado à imagem e/ou ao conteúdo do seu artigo. Ele também deve incluir suas palavras-chave sempre que possível. Escolher um nome rico em palavras-chave para sua imagem tornará mais fácil para os mecanismos de pesquisa classificarem sua página.

Por exemplo, se você estiver escrevendo um artigo sobre como escolher o melhor brinquedo de mastigar para filhotes, nomeie sua imagem como “melhor brinquedo de mastigar para filhotes.jpg”. Se sua imagem mostrar um pôr do sol em uma praia em Koh Samui, Tailândia, nomeie-o como 'thailand-koh-samui-beach-sunset.jpg'.

Use traços entre as palavras, em vez de espaços, sublinhados ou junte todas as suas palavras.

Esta recomendação vem diretamente do Google. Não temos certeza do motivo exato para isso, pois o Google protege como o algoritmo do mecanismo de pesquisa funciona mais perto do que um mágico protege seus truques. Mas o Google Webmaster diz que os traços entre as palavras ajudam o Google a encontrar suas imagens!

TEXTO ALTERNATIVO

Ao enviar sua imagem, vídeo ou outra mídia, você tem a opção de incluir texto ALT. Você deve fazer isso sempre que puder.

O texto ALT informa aos mecanismos de pesquisa sobre sua imagem, o que ajuda seus rankings. Além disso, os leitores de tela lêem o texto ALT para que você ajude seu conteúdo a ser mais acessível.

O texto Alt em suas imagens explica sobre o que é sua imagem

Seu texto ALT deve ajudar a explicar sua imagem ou o ponto que você está tentando ilustrar. Assim como escolher um nome de arquivo, seu texto ALT deve estar relacionado ao conteúdo do seu artigo ou às suas palavras-chave.

LEGENDAS E TÍTULOS

As legendas das imagens geralmente aparecem abaixo da imagem. Muitos leitores digitalizam artigos e as legendas de suas imagens podem chamar sua atenção e fazer com que fiquem curiosos sobre seu conteúdo.

No BlogWorks tentamos escrever legendas que acrescentem ao conteúdo escrito. A ideia é que, se o leitor apenas ler as legendas, terá uma boa ideia do que trata o artigo.

BarkPost, os inventores da assinatura mensal de petiscos para cães Bark Box, atormentam os amantes de cães (como eu) com imagens divertidas e patetas de cães combinadas com manchetes no estilo dos tablóides de Hollywood, como estas:

• • 5 sinais de meleca nos olhos do seu cão são causados ​​por algo perigoso
• • 18 cães que não aprovam essa tortura da água que você chama de “hora do banho”
• • Inscrevi meu cachorro em uma caixa de cuidados dentários, e aqui está o que aconteceu

SUA LISTA DE VERIFICAÇÃO FINAL

Qualquer imagem que você adicionar ao seu blog deve melhorar a experiência de seus leitores. E seduza-os a ler o artigo – o que significa que eles permanecem no seu site por mais tempo.

Como verificação final, faça a si mesmo estas duas perguntas:

• Essa imagem manterá o leitor na página por mais tempo?
• Esta imagem ajuda o leitor a compreender melhor a minha mensagem?

O esforço extra que você coloca para encontrar e adicionar imagens ao seu blog pode render grandes recompensas. Em vez de ser ignorado, seu post pode ser compartilhado com milhares de leitores e ganhar vida própria.

Afinal, nosso objetivo é fazer com que nosso blog seja lido, compartilhado e amado. Certo?

Gostou deste artigo? Aqui estão mais 3 sobre imagens, vídeos e como tornar seu blog viral:

O guia definitivo para adicionar vídeos do YouTube ao seu blog.
Imagens gratuitas para o seu blog: 7 fontes incríveis
4 maneiras de tornar as imagens do seu blog pop

Notas de rodapé:

1. 1. Em um artigo publicado no American Journal of Ophthalmology, o neuroanatomista RS Fixot estimou que 50% do nosso tecido neural está direta ou indiretamente relacionado à visão e dois terços da atividade elétrica do nosso cérebro é usada para processamento visual.
2. 2. Em um estudo da eMarketer, as fotos representaram 75% do conteúdo postado pelas páginas do Facebook em todo o mundo e geraram 87% de taxa de interação dos fãs (em comparação com menos de 10% de qualquer outro tipo de postagem).
3. 3. Um estudo do Instituto de Tecnologia da Geórgia e do Yahoo Labs analisou 1,1 milhão de postagens no Instagram e descobriu que fotos com rostos humanos têm 38% mais chances de receber curtidas do que fotos sem rostos. Eles também são 32% mais propensos a atrair comentários.

Foto do LinkedIn Sales Navigator no Unsplash