Como melhorar e otimizar imagens para WordPress

Já faz muito tempo que as imagens não eram muito grandes para carregar na Internet. Hoje, os sites não podem existir sem eles. Embora a velocidade da Internet tenha aumentado drasticamente ao longo dos anos, é vital que você cuide das fotos em seu blog.

Só porque é fácil fazer upload de imagens para o seu site, isso não significa que você deva fazer isso sem qualquer preparação. Imagens não otimizadas podem, na verdade, prejudicar seu site de várias maneiras; desde afetar a maneira como os visitantes pensam sobre você até a velocidade de seu site e as classificações de SEO. Se você ainda não pensou nisso, estamos aqui para mostrar várias maneiras de melhorar as imagens no WordPress.

Como otimizar imagens para WordPress para que você agilize seu site e melhore o SEO

Por que você deve otimizar imagens para WordPress? Se você fizer um esforço, poderá esperar o seguinte:

• Site mais rápido
• Melhor SEO
• Backups menores
• Menos uso de largura de banda
• Usuários mais felizes

Você também deve saber que existem diferentes estágios nos quais você pode otimizar as imagens. Você pode cuidar das fotos antes mesmo de enviá-las para um blog ou pode fazer isso após o upload.

Teste imagens rapidamente em seu site

Antes de começar a trabalhar na otimização, você pode verificar rapidamente a velocidade e o desempenho do seu site. Usando qualquer uma das ferramentas da lista, você saberá rapidamente em que forma estão as imagens em seu site.

Gostamos de usar GTmetrix, que até mostra as imagens exatas que estão causando o carregamento mais lento do seu site.

Otimize imagens para WordPress antes de fazer upload

Durante o blog, a maioria das pessoas não executa todas as etapas necessárias para otimizar suas imagens. Normalmente, as pessoas apenas tiram uma foto de sua câmera ou smartphone, baixam uma da Internet ou criam uma usando um software de computador.

Eles não pensam em formatos, dimensões de imagem ou nomes de arquivos. Se a imagem parecer boa, eles simplesmente presumem que ela está pronta para a Internet. Se você não verificar suas imagens, está caminhando para um desastre.

Redimensionar imagens

Não faça upload de imagens para o seu site WordPress antes de verificar a largura e a altura de cada imagem. Se você exibir imagens com no máximo 700 px, por exemplo, não há necessidade de enviar uma imagem mais ampla. Se você fizer isso, terá um arquivo maior que tornará seu site mais lento, enquanto a saída será a mesma. O WordPress criará um tamanho adicional, mas essa não é a desculpa para não preparar as imagens antes de fazer o upload.

O redimensionamento de imagens é rápido e fácil. Existem muitas ferramentas gratuitas, como o Microsoft Paint, que o ajudarão com isso. Você pode até encontrar ferramentas online gratuitas para redimensionar imagens, como Easy Resize.

As dimensões da imagem variam de tema para tema. Se você não tiver certeza de qual deve usar, dê uma olhada no seu tema WordPress e inspecione as imagens, pesquise a documentação ou peça ajuda ao suporte.

Mude a qualidade

Depois de alterar as dimensões, você deve considerar alterar a qualidade das imagens. Dependendo do software, existem diferentes maneiras de modificar a qualidade das imagens. Por exemplo, o sempre popular Photoshop permite que você salve imagens para a web. Esta opção permitirá que você salve as imagens com uma qualidade inferior, mas elas serão otimizadas para o seu site.

Além disso, se você escolher salvar uma imagem como JPEG, o Photoshop solicitará que você escolha o nível de qualidade. Nesse caso, reduzir a qualidade de 12 para apenas 8 reduzirá drasticamente o tamanho de uma imagem, enquanto a diferença na qualidade não será tão grande.

Se você ainda não usa nenhum software para alterar a qualidade de suas fotos, experimente a ferramenta Tiny PNG online gratuita. Basta fazer upload de uma foto e ver que diferença isso pode fazer.

Escolha o formato certo

Mesmo após as alterações de tamanho e qualidade, você deve considerar a alteração do formato. Para começar, apenas selecionando o formato certo, você pode tirar alguns kilobytes de uma imagem, se não mais.

A regra geral é muito simples. Se você tiver uma fotografia, transforme-a em JPEG. Se você tem um logotipo, uma imagem vetorial ou um gráfico muito simples gerado por computador, escolha o PNG. Se você tiver uma imagem muito pequena sem gradientes ou quiser mostrar uma animação simples como a mostrada acima, você pode usar GIF. Geralmente, as imagens PNG são bem maiores do que as JPEG e você pode se beneficiar com a alteração do formato.

Em muitos casos, reformatar as imagens não fará diferenças significativas de qualidade, embora você possa esperar uma diferença no tamanho. Na próxima vez, antes de enviar fotos PNG, tente salvá-las como JPEG para ver a diferença. Para obter uma explicação mais detalhada, verifique a diferença entre PNG, JPEG, GIF e SVG.

Cuide dos nomes dos arquivos

Embora o nome do arquivo possa parecer sem importância, na verdade é algo do qual você deve estar muito atento. O nome do seu arquivo de imagem contém uma informação valiosa para SEO. Se você deseja que outras pessoas possam encontrar sua imagem no Google e em outros mecanismos de pesquisa, atribua a ela um nome apropriado.

Sugerimos que você nomeie as imagens sem usar espaços. Não se esqueça de incluir palavras-chave se quiser que a página e a imagem sejam classificadas. Por exemplo, se você estiver enviando uma imagem da Ferrari Califórnia, o nome do arquivo deve ser “ferrari-california.jpg”. Se você usa um plugin de SEO para WordPress, você já sabe que ele verifica suas tags alt em busca de palavras-chave. Sim, é realmente importante ter um nome de imagem adequado.

Otimize imagens para WordPress após o upload

Depois de preparar as imagens em seu computador, você pode prosseguir com o upload. Felizmente, suas imagens têm o tamanho e a qualidade certos. Você se certificou de que o formato e o nome do arquivo estão corretos. Após o upload, o WordPress solicitará informações adicionais. Não pule a meta informação; preencha os detalhes sobre suas imagens para que você possa organizá-las facilmente e se preparar para o SEO.

Título, descrição, texto alternativo e legenda

Enquanto cuida dos detalhes técnicos, você não deve se esquecer do SEO. Sempre adicione o título e a descrição à sua mídia. Isso o ajudará com o gerenciamento de mídia do WordPress e também funcionará para melhorar o SEO. Além disso, não se esqueça da alt tag que será exibida para os visitantes que não conseguem ver sua imagem corretamente. Isso não será apenas útil para seus usuários, mas também ajudará você com o SEO. Sua página terá uma classificação melhor e os usuários poderão encontrar suas novas imagens com mais facilidade.

Embora você não precise de legendas o tempo todo, certifique-se de adicionar legendas para imagens que precisam de explicações adicionais (por exemplo, capturas de tela).

Edite imagens com WordPress

Se você perceber que uma imagem ainda precisa ser editada, saiba que o WordPress permite que você faça isso mesmo depois de carregar o arquivo. Altere a rotação, corte e dimensione as fotos que você já carregou. Você pode até editar apenas uma miniatura ou todos os outros tamanhos. O editor nativo do WordPress é muito simples, mas você pode economizar de vez em quando.

Gerar novamente todas as miniaturas

A maioria das técnicas anteriores o ajudará com novos arquivos de imagem que você ainda está prestes a enviar. Mas e se você tiver centenas, senão milhares de arquivos já enviados para o seu site WordPress? Não se preocupe; você ainda pode otimizar essas imagens e alterar seus tamanhos.

Para uma solução rápida, você pode estar interessado em um plug-in gratuito Regenerate Thumbnails que tem sido usado por mais de um milhão de usuários. Se você quiser mais controle sobre as imagens, deve verificar alguns dos melhores plug-ins do WordPress para otimização de imagens, que mostraremos nas linhas a seguir deste artigo.

Use plug-ins do WordPress

Claro, existem dezenas de plug-ins do WordPress que podem ajudá-lo a otimizar imagens em seu site. Role para baixo para ver os melhores plug-ins do WordPress para otimizar imagens.

Imagens de carregamento lento quando necessário

Às vezes, a qualidade das fotos é muito mais importante do que o tamanho. Isso é verdade principalmente para fotógrafos que desejam que suas fotos sejam de alta qualidade. Eles não podem arriscar reduzir o tamanho nem a qualidade dos arquivos. Ainda assim, isso não significa que você deve esquecer a otimização. Para otimizar imagens para WordPress neste caso, você deve considerar o carregamento lento.

O carregamento lento é uma técnica que carrega imagens apenas quando os usuários precisam delas (role até elas). Por exemplo, se você carregasse vinte fotografias de alta qualidade em um artigo, elas tornariam seu site tremendamente lento. Mas se você preguiçosamente carregar as imagens, o artigo seria extremamente rápido e as fotos carregariam apenas quando necessário - no momento em que o usuário as acessasse.

Tenha imagens responsivas

Embora a maioria dos temas do WordPress sejam responsivos, isso não significa necessariamente que suas imagens também sejam responsivas. Como você não deseja que uma imagem grande seja carregada em uma tela pequena, será necessário registrar tamanhos de imagem adicionais para o seu site. Se o seu tema não estiver usando imagens responsivas, considere contratar um profissional para o trabalho - não é tão fácil quanto pode parecer.

Otimize imagens para mídias sociais

Se você quiser ter certeza de que suas imagens terão uma boa aparência nas redes sociais, terá que dar um passo a mais e otimizar as metatags e a marcação de esquema.

Se você estiver usando um plugin de SEO como o Yoast, não se esqueça de verificar as configurações. Por exemplo, Yoast permitirá que você configure algumas coisas relacionadas à mídia social. Então, navegue até SEO -> Social e insira as informações no Facebook, Twitter, Google+ e Pinterest.

Se você quiser mais, e quiser otimizar imagens para sites de mídia social adicionais, verifique WPSSO - Metatags precisas + Marcação de esquema para otimização de compartilhamento social e plugin de SEO.

Alterar a maneira como o WordPress compacta imagens JPEG

Se você estiver enviando um monte de imagens JPEG em seu site WordPress, deve ter notado que elas estão perdendo sua qualidade original. Se você já se perguntou se a culpa é do WordPress, agora você terá sua resposta - sim, é!

Depois de fazer upload de uma imagem no formato JPEG, o WordPress altera automaticamente a compactação e decide que você deseja que a imagem perca qualidade. Para ser mais específico, o WP usa compressão de 90% em seus JPGEs. Isso é ótimo se suas imagens estão lá apenas para serem usadas como miniaturas de postagem ou para serem mostradas em uma postagem, mas se você estiver enviando suas fotos, você quer que elas sejam as melhores possíveis, certo?

Felizmente, você só precisará de uma linha de código para alterar isso.

Pare a compressão de imagens JPEG:

Se você não quiser que suas imagens JPEG sejam compactadas, simplesmente copie e cole o seguinte código em seu arquivo functions.php:

 add_filter ('jpeg_quality', function ($ arg) {return 100;});

Não se esqueça de salvar as alterações e você estará pronto para carregar novas imagens.

Por outro lado, as imagens podem não ser um grande problema para você. Portanto, você pode querer que eles sejam ainda mais compactados e economize tempo no carregamento do seu site. Se você alterar o último número dessa linha de código, estará alterando a qualidade das imagens recém-carregadas.

Comprima ainda mais imagens JPEG:

Quanto menor o número, mais imagens serão compactadas. Por exemplo, para compactar ainda mais esses JPEGs, você precisará deste código:

 add_filter ('jpeg_quality', function ($ arg) {return 80;});

Não se esqueça; o nível de compressão padrão é 90.

Os plug-ins de otimização de imagem mais populares para WordPress

No início deste artigo, falamos sobre como otimizar imagens para WordPress para que você agilize seu site e melhore o SEO. Como você pode ter visto, existem alguns métodos diferentes que você pode usar. É importante cuidar das imagens antes mesmo de enviá-las para o seu blog. Mas quando as fotos já estão no site, pode se tornar impossível reotimizar cada uma das imagens separadamente e depois carregá-las novamente.

Não se preocupe; ninguém espera que você faça isso em primeiro lugar. Fique conosco nos próximos minutos, pois estamos prestes a mostrar os plug-ins de otimização de imagem mais populares para WordPress.

Para otimizar as imagens, basta selecionar o plugin da lista. Você terá que configurá-lo e escolher as coisas que o plugin fará por você. Depois disso, você poderá relaxar e delegar o trabalho ao plugin de sua escolha, enquanto pode começar a organizar seus arquivos de mídia.

Os plug-ins a seguir o ajudarão a compactar as imagens em qualquer site WordPress que você tenha. Eles farão o site carregar mais rápido e, em última análise, ajudarão você a melhorar o SEO.

Plugin WP Smush

PREÇO: grátis

Com mais de 700.000 instalações ativas, WP Smush deve ser um dos melhores plug-ins de otimização de imagem para WordPress. Ele pode otimizar imagens rapidamente usando diferentes técnicas de compressão. A grande vantagem de compactar imagens com WP Smush é que as imagens não perdem qualidade. Não acredita em nós? Teste o plugin.

Quando falamos sobre a preparação de imagens para WordPress, mencionamos que o redimensionamento é uma parte crucial do processo de otimização. Com este plugin, você não terá que se preocupar com isso, já que WP Smush permite definir dimensões máximas. Depois de fazer isso, todas as imagens maiores serão automaticamente reduzidas antes de você adicioná-las à biblioteca.

Este fantástico plugin pode funcionar com arquivos JPEG, GIF e PNG. Funciona com todos os seus diretórios, cuida automaticamente dos anexos e até funciona em vários sites. Você pode operar manualmente em cada imagem ou editar cinquenta delas em massa. Se você quer resultados ainda melhores e mais opções, dê uma olhada no WP Smush PRO.

Plug-in EWWW Image Optimizer

PREÇO: grátis

Por trás do nome engraçado, existe um dos plug-ins de otimização de imagem mais populares para WordPress. Assim como o mencionado anteriormente, o EWWW Image Optimizer pode compactar suas imagens sem afetar sua qualidade. Quando você pensa que o plugin pode acelerar o seu site em segundos, você já está prestes a fazer o download. Depois de fazer isso, você poderá otimizar imagens em massa, e galerias como GRAND FlaGallery, NextCellent e NextGEN terão até suas próprias páginas de otimização em massa.

Todas as imagens que usam a classe WP_Image_Editor no WordPress serão otimizadas automaticamente , enquanto você pode fazer a mágica manualmente em todas as outras. Gostamos que você selecione as pastas que deseja otimizar. Para obter mais detalhes sobre isso e quais plug-ins usam a classe, abra a página oficial do Otimizador de Imagens EWWW no repositório do WordPress.

Plugin de compressão de imagens JPEG e PNG

PREÇO: grátis

Se o pequeno panda segurando o logotipo do WordPress não fizer você querer saber mais sobre este plugin, não sabemos o que faremos. E se o panda lhe parece familiar, é porque é o mesmo que ajuda a compactar imagens no site do TinyPNG. Sim, parece que o animal é mais versátil do que pensávamos originalmente. Mas vamos nos concentrar no plugin.

Se você usar este plugin, o Panda otimizará automaticamente suas imagens. Cada vez que você carregar um novo, o plugin assumirá e fará seu trabalho. Ainda assim, você pode otimizar imagens individuais ou fazer isso em massa apenas acessando a biblioteca de mídia.

Compactar imagens JPEG e PNG até suporta PNGs animados, funciona perfeitamente em um multisite, é compatível com WooComerce e não terá problemas com WP Offload S3.

A grande vantagem do plugin é que ele permite que você defina os atributos máximos de largura e altura para todas as imagens. Se você tem se preocupado com o que fará com os metadados, não se preocupe; o panda manterá todas as informações intactas.

Não há limites de tamanho de arquivo, você pode definir um widget de painel e ele funciona até mesmo com o aplicativo móvel WordPress. Por tudo isso, as imagens Compress JPEG e PNG têm mais de 100.000 instalações ativas e merecem um lugar na lista dos melhores plug-ins de otimização de imagens para WordPress.

Plugin Imsanity

PREÇO: grátis

Embora a imagem da capa deste plugin possa assustá-lo, dê uma olhada em todos os recursos do Imsanity. Oh, até o nome do plugin parece insano, certo? Depois de definir o nome do plugin, você verá que ele tem muito a oferecer.

O Imsanity pode dimensionar imagens automaticamente, permite definir dimensões máximas e ainda possui uma opção de redimensionamento em massa. Isso é importante se você já tem centenas de fotos em seu blog que precisam de otimização.

Este plugin gratuito é uma ótima opção se você não quiser se preocupar muito com as configurações do plugin. Basta instalar e ativar o Imsanity, definir algumas opções e você pode esquecê-lo; ele administrará sua própria maneira de otimizar a imagem.

Adoramos a opção que permite converter imagens BMP em JPG. Apenas no caso de você ter muitos arquivos BMP que carregou por engano há algum tempo, isso será um salva-vidas.

Plug-in ShortPixel Image Optimizer

PREÇO: grátis

Com mais de 30.000 instalações ativas, ShortPixel Image ainda é um dos plug-ins de otimização de imagem mais populares para WordPress. O plugin é repleto de recursos e será um must-have para sites que têm muitas imagens para otimizar.

O ShortPixel Image Optimizer não só otimizará documentos JPG, PNG, GIF e PDF para você, mas também permitirá que você converta qualquer imagem JPEG, PNG ou GIF em WebP . O plug-in funciona bem com outros plug-ins de galeria e não se importa se o seu site usa HTTP ou HTTPS. Ele permitirá que você remova dados EXIF ​​das imagens (algo que os fotógrafos vão adorar).

O plug-in reconhece imagens que já foram otimizadas, portanto, as ignorará quando necessário. Você pode permitir ou proibir a otimização automática e fazer muito, muito mais com este plug-in fantástico. Confira a página oficial do repositório para ver todos os recursos.

Optimus - WordPress Image Optimizer

PREÇO: grátis

Assim como o plugin mencionado anteriormente, o Optimus otimizará suas imagens para WordPress, e fará isso sem afetar a qualidade de suas imagens. Você pode deixar o plug-in resolver as coisas automaticamente ou pode desativar a opção e otimizar as imagens apenas quando necessário.

O Optimus funciona em vários sites, não é estranho aos sites de e-commerce WordPress e é totalmente otimizado para WordPress Mobile Apps e Windows Live Writer. Isso irá acelerar o seu site sem que você precise tocar em uma linha de código. O plugin oferece muito mais, mas você terá que optar pela versão premium. Para ver mais, acesse a página oficial no repositório de plug-ins do WordPress.

Adicione carregamento lento para seus vídeos e imagens no WordPress

Depois que você começar a adicionar muito material de vídeo e imagem em seu site, é óbvio que ele começará a carregar mais devagar. Não importa de onde eles venham, os vídeos e as imagens grandes funcionarão como um peso pesado no seu site e farão os visitantes esperar muito mais do que o necessário para carregar todo o conteúdo. Com o WordPress, isso não deve ser um grande problema e aqui está como você pode facilmente consertar a situação.

Se você conhece PHP, há um ótimo artigo sobre como adicionar carregamento lento para imagens e o pergaminho infinito escrito por nossos colegas em Elegant Themes.

Caso contrário, nas próximas linhas iremos mencionar alguns dos plug-ins de carregamento lento mais populares que farão seu site carregar mais rápido . E você nem precisa fazer muito, a não ser instalar um plugin e configurá-lo em algumas etapas rápidas.

Carregamento lento para vídeos

PREÇO: grátis

Se você tem muitos vídeos do Youtube e Vimeo, deve considerar a instalação deste plugin. Depois de configurado, o plugin irá colocar uma imagem no seu vídeo e, com isso, o seu site irá carregar muito mais rápido. Depois que um visitante rola para um vídeo, essa imagem será exibida com um botão "reproduzir" sobre ela. Após um clique, o vídeo começará a carregar e reproduzir. Uma demonstração simples pode ser visualizada no site do desenvolvedor.

WP YouTube Lyte

PREÇO: grátis

Este plugin fará seu trabalho de maneira rápida e fácil. Depois de instalá-lo, basta adicionar um link para o seu vídeo do Youtube ou usar um shortcode para adicionar um. Você pode escolher entre adicionar um vídeo normal, lista de reprodução ou apenas áudio do vídeo selecionado. Depois disso, seus vídeos do Youtube receberão uma imagem que permitirá o carregamento lento. Basta clicar na imagem para iniciar o seu vídeo ou áudio.
Veja uma demonstração no site do desenvolvedor.

a3 Lazy Load

PREÇO: grátis

Este é dedicado ao seu site móvel. Se você tem muitas imagens e / ou vídeos que deseja mostrar aos seus visitantes em dispositivos móveis, você deve dar uma olhada em a3 Lazy Load. Ele permitirá que você adicione carregamento lento às suas imagens e vídeos, e o plug-in ainda permitirá que você escolha os efeitos de transição que aparecerão para os usuários enquanto eles rolam pelo conteúdo que está sendo carregado.

Na área de administração, você pode facilmente ligar e desligar o conteúdo que deseja carregar lentamente. Para aqueles ativados, o conteúdo será carregado apenas no momento em que um visitante rolar para aquela parte do conteúdo.
Há um demo bem mostrado que apresenta 1000 imagens - cada uma é carregada apenas quando você rola até ela. Como este plugin também carrega lentamente os vídeos, há uma demonstração em vídeo que você pode ver clicando no link acima.

BJ Lazy Load

PREÇO: grátis

Se você não precisa de suporte para vídeos e só quer que suas imagens carreguem lentamente, você deve verificar este plugin WP. Depois de instalado e configurado, ele substituirá suas imagens, miniaturas, fotos do Gravatar e até mesmo iframes por um espaço reservado. Semelhante a um plug-in mencionado anteriormente, ele carregará o conteúdo apenas quando um usuário acessá-lo.

Quer se trate de imagens ou vídeos que você deseja carregar lentamente, um dos plug-ins mencionados acima irá ajudá-lo em uma questão de segundos. Todos eles são gratuitos, então não há desculpa para não tentar pelo menos um dos plug-ins e ver quanto peso seus ombros vão aguentar. Claro, existem muitos outros plug-ins com a mesma função e você está livre para navegar e experimentar todos eles.

Exiba imagens antes e depois de uma maneira atraente

Temos certeza de que você já viu muitos exemplos de imagens antes / depois. Não sei sobre você, mas a primeira coisa que temos em mente quando vemos a frase “antes e depois” é um programa de treinamento físico onde as pessoas mostram seus corpos antes e depois de um programa de treino.

Se você pensar bem, a maioria dos sites usa uma abordagem simples para mostrar as diferenças - eles pegam as duas imagens e as colocam uma ao lado da outra ou até mesmo uma acima da outra. Se você quiser o mesmo resultado, não estaria lendo este artigo porque já sabe como fazer isso.

E se disséssemos que existe uma maneira visualmente deslumbrante de resolver esse problema antes / depois e ela estiver ao alcance de sua mão? Bem, existe e depois de uma configuração, você elogiará os desenvolvedores porque o resultado final é muito, muito legal.

Vinte e vinte

PREÇO: grátis

Twenty Twenty é o nome deste plugin incrível que você pode baixar gratuitamente no repositório de plugins do WordPress.

O plugin permite colocar uma imagem sobre a outra e brincar com um controle deslizante para que você possa ocultar / revelar a imagem. Por favor, veja a demonstração e você verá do que estamos falando.

OK, agora que você está viciado neste pequeno plugin, vamos ver como criar este efeito impressionante. Embora seja relativamente fácil recriar o efeito de demonstração, você ainda precisará conhecer o HTML básico. Vamos lá:

1. Crie uma nova postagem ou abra a existente
2. Insira duas imagens na postagem. Se você estiver trabalhando em um Editor Visual, deverá ver uma imagem acima da outra. Se você estiver trabalhando em um Editor de Texto, deverá ver um código semelhante a este:

 <a href="image1.jpg"> <img src =
"http://www.loactionoftheimage.com" width = "700" 
altura = "200" /> </a>

<a href="image2.jpg"> <img src =
"http://www.loactionoftheimage.com" width = "700" 
altura = "200" /> </a>

3. Insira a tag [vinte e vinte] antes da primeira imagem
4. Após o segundo, insira a tag [/ vigésimo]

Você deve acabar com algo assim em seu Editor de Texto:

5. Certifique-se de que suas fotos sejam do mesmo tamanho para obter os melhores resultados
6. Visualize ou publique sua postagem e curta suas fotos de antes e depois de visualmente deslumbrantes

Como criar imagens interativas - desenhar, adicionar descrições e links

Hoje, é difícil administrar um site sem multimídia. Imagens, vídeos e músicas fazem parte de praticamente todos os sites. Um usuário médio da Internet depende muito de estímulos visuais, então você deve cuidar das partes visuais e interativas do seu site. Artigos com imagens recebem 94% mais visualizações do que aqueles sem imagens. Além disso, já é um fato conhecido que a multimídia em sites pode aumentar o ROI do marketing de conteúdo.

Esperamos que não haja necessidade de persuadi-lo a cuidar das imagens em seu site. Mesmo que você não use imagens em artigos (o que deveria), você usa imagens em destaque, certo? Existem muitos plug-ins de galeria que podem ajudá-lo a gerenciar imagens em seu site WordPress, você pode ter temas relacionados à fotografia, conectar o Instagram ao seu site WordPress e fazer muito mais. Mas e se você quisesse criar um conteúdo mais interativo?

Para começar, você pode estar interessado em adicionar um efeito de imagem antes e depois que seus usuários vão adorar. Não se esqueça da Realidade Virtual no WordPress, que está se tornando mais popular depois que a Automattic introduziu a RV no WordPress.com. Ainda assim, há algo faltando. É possível fazer imagens interativas com partes clicáveis? Sim, isso é possível e estamos prestes a mostrar como isso é divertido e fácil.

Chamar atenção

PREÇO: grátis

A primeira coisa que você vai gostar sobre este plugin é que ele é totalmente gratuito! Assim como com qualquer outro plugin do repositório do WordPress, você pode baixar, instalar e ativá-lo em questão de minutos. A versão gratuita permitirá que você trabalhe com uma imagem interativa. Se você quiser mais, terá que optar pela versão PRO, mas falaremos sobre isso mais tarde.

O plug-in é responsivo e você não precisa se preocupar com as imagens interativas sendo exibidas corretamente em qualquer dispositivo. Não apenas que a imagem será dimensionada de acordo com o tamanho da tela, mas também funcionará na maioria dos navegadores modernos e mais antigos (desktop e celular). O Draw Attention usa elementos de tela quando exibidos em novos navegadores, embora retorne aos mapas de imagem se você carregá-lo em um mais antigo.

Recursos

Antes de obter um exemplo que mostrará o quão poderoso é este plug-in simples, vamos ver o que esperar do Draw Attention:

• Desenhar - Depois de carregar uma imagem, você terá a chance de desenhar formas nela. Selecione qualquer parte da sua imagem que se torne selecionável / clicável
• Cores - personalize as cores para que você possa ajustar os pontos de acesso ao design do seu site
• Destaque ao passar o mouse - Mostra outra parte da imagem se um usuário passar o mouse sobre a parte selecionada
• Mostrar mais informações - Mostra mais informações sobre a parte selecionada da imagem
• Ir para URL - redireciona os usuários para qualquer URL se eles clicarem na seleção

Exemplo - mapa interativo do Havaí

Usaremos o exemplo do site de demonstração para mostrar o que exatamente você pode fazer com o Draw Attention. Então, vamos ver a aparência de um mapa interativo do Havaí quando criado com o plugin.

A primeira coisa que você precisa fazer é encontrar uma imagem das ilhas do Havaí. Depois de navegar para Draw Attention -> Edit Image, você deve enviar a imagem para a área na barra lateral direita. Assim que a imagem for carregada, a diversão pode começar.

Aqui você pode escolher as cores dos destaques (cor, borda, opacidade, etc.), definir o estilo da “caixa de mais informações” (imagem, título, cor do texto, etc.). Se você não quiser selecionar todas as cores da imagem manualmente, pode escolher rapidamente um esquema de cores na barra lateral direita.

A parte mais mágica acontece na tela de configurações das Áreas de Hotspot . Aqui você obterá sua imagem carregada em tamanho real. Tudo que você precisa fazer agora é começar a desenhar e criar um novo ponto de acesso. Você pode adicionar quantos pontos quiser, o que significa que você pode criar seleções abrangentes como desejar. Você pode criar tantos pontos de acesso, e cada um pode ter suas próprias configurações.

Portanto, neste exemplo, você deve selecionar uma das ilhas. Escolha um título para a ilha, adicione uma descrição e a imagem extra que será exibida quando o usuário passar o mouse sobre o ponto de acesso (parte direita da imagem GIF mostrada acima).

Você deve repetir o processo para cada uma das ilhas que deseja que sejam interativas. Depois de ter seus pontos de acesso prontos, basta copiar o código de acesso do lado direito. Cole o shortcode em uma postagem, página, widget ou onde você quiser mostrar seu novo mapa interativo e pronto! Se você quiser redirecionar os usuários para qualquer outra página depois de clicarem nas seleções, basta selecionar o URL em vez da descrição. Fácil assim!

Versão PRO

Enquanto a versão gratuita será perfeita se você precisar de apenas uma imagem, a versão PRO permitirá que você tenha quantas imagens interativas desejar em seu site. Embora essa seja a coisa mais importante a se considerar, a versão PRO oferecerá a você ainda mais do que várias imagens.

O recurso Opções de layout permitirá que você mostre mais informações sobre partes selecionadas da imagem. Por exemplo, você poderá mostrar informações em uma caixa de luz ou em uma barra de ferramentas simples que aparecerá depois que um usuário passar o mouse sobre a parte selecionada da imagem.

Também há vinte paletes de cores predefinidas, para que você não precise personalizar cada uma das cores manualmente. A versão PRO vai custar US $ 74 para uma licença de site único, mas se você precisar de mais de uma imagem interativa, isso será um acéfalo.

Como regenerar tamanhos de imagem adicionais

É relativamente fácil registrar novos tamanhos de imagem em seu tema WordPress. Depois de informar a seu sistema o tamanho que suas imagens devem ter, nomeá-las e decidir como cortá-las, você pode distribuir imagens em qualquer lugar que desejar. Mas e as imagens antigas?

Se você usou uma das técnicas que mostramos, você preparou o gramado para novas imagens. Quer você use novos tamanhos de imagem registrados para miniaturas de postagem ou permita que os autores os usem em postagens, as novas regras se aplicam apenas às imagens que são carregadas após você ter feito a alteração no arquivo functions.php. Para alterar as imagens mais antigas, sugerimos usar o plugin Regenerate Thumbnails.

Gerar miniaturas novamente:

PREÇO: grátis

1. Vá para Plugins-> Adicionar Novo
2. Pesquise por “Gerar novamente miniaturas”
3. Instale e ative o plugin
4. Navegue até Ferramentas-> Regen.Thumbnails

Se você quiser redimensionar todas as suas imagens, basta clicar no botão “Gerar novamente todas as miniaturas” e esperar que o plug-in faça o trabalho pesado.

Se você quiser ver as imagens que serão redimensionadas, ou se quiser redimensionar apenas algumas das imagens, vá para a Biblioteca de mídia, onde encontrará uma nova opção em “Ações em massa” e uma ao lado de cada imagem no galeria.

O bom do plugin é que ele não exclui as imagens originais. Ele apenas criará novos tamanhos de imagem que você pode usar em seu tema, enquanto os originais serão deixados para você usar mais tarde ou excluir manualmente se decidir que não precisa deles.

É isso. Aproveite suas novas miniaturas ou verifique o plugin Simple Image Sizes, que pode fazer a mesma coisa.

Remova os atributos de largura e altura da imagem com jQuery

Ao adicionar imagens a uma postagem do WordPress, o sistema adiciona automaticamente seus atributos de altura e largura à imagem. That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>

3. Salvar alterações

E pronto! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. Abra seu arquivo functions.php
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. Salvar alterações
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. Abra functions.php
2. Copie e cole o seguinte código:

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. Salvar alterações

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

Example:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

Conclusão

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.