Configurações de Mídia do WordPress

Acesse essa aula GRATUITAMENTE Já possui uma conta?
Nesta aula veremos como configurar os arquivos de mídia (imagens) que serão enviados ao Wordpress. Poderemos configurar tamanhos específicos de imagens, delimitando seu tamanho máximo.

As configurações de mídia do WordPress ajudam a definir como será feita a gestão de mídias. Embora não sirva apenas para imagens, as configurações de mídias afetam principalmente a forma como o WordPress organiza e trabalha com elas.

Opções de Configuração de Mídia

Configurações de Mídia do WordPress
Configurações de Mídia do WordPress

Nesta tela você encontra dois tipos de configuração: tamanhos das imagens e enviando arquivos.

Tamanho das imagens

Toda vez que você faz um upload de imagem para o WordPress, ele tentará salvar outros 3 tamanhos da sua imagem:

  • Miniatura: por padrão é 150 x 150 px
  • Médio: por padrão é 300 x 300 px
  • Grande: por padrão é 1024 x 1024 px

Imagine que você está fazendo o upload de uma imagem que possui 1500 x 1500px. Durante o upload, o WP criará as imagens nos outros tamanhos. Dessa forma, após o upload você terá a sua disposição 4 arquivos diferentes:

  • Miniatura: 150 x 150 px
  • Médio: 300 x 300 px
  • Grande: 1024 x 1024 px
  • Original: 1500 x 1500 px

Caso sua foto original tivesse 800 x 800 px, o WordPress criaria somente 2 novos formatos: miniatura e médio. Isso porque o WordPress não é capaz de aumentar a dimensão de uma foto, apenas reduzir.

Note que no tamanho Miniatura existe uma opção Recortar a miniatura nas dimensões exatas. O que isso quer dizer?

Quer dizer que existem dois tipos de recorte no WP: o soft crop e o hard crop. Para exemplificar isso vamos utilizar a imagem a seguir.

Original: 1080 x 1920 px

Essa imagem possui a dimensão original de 1080 x 1920 px. É uma imagem vertical.

Soft Crop

No soft crop, nenhuma parte da imagem é cortada. Dessa maneira, a imagem é redimensionada para a nova medida, sempre respeitando a sua proporção original. Todas as medidas usam soft crop, com exceção da miniatura.

Logo após o upload da imagem acima, ela geraria no WordPress mais duas novas medidas: grande e média.

Grande: 576 x 1024 px
Médio: 169 x 300 px

Perceba que as imagens mantém sua proporção (vertical) original, já que no soft crop, não há recorte. Nesse caso, o WordPress utiliza a maior medida (nesse casso a altura) como base e redimensiona a partir dela.

Hard Crop

Já o tamanho miniatura da medida acima, utiliza o hard crop. Em outras palavras, haverá recorte da imagem. Neste tipo de recorte a imagem é forçada a adotar a nova dimensão de 150 x 150 px, independentemente da sua proporção original.

Sendo assim, ela pode ter alguns pedaços recortados, e por padrão ele vai manter a parte central da imagem e remover o restante.

O tamanho miniatura ficaria assim:

Miniatura: 150 x 150 px

Portanto, se não quiser aplicar o hard crop em suas miniaturas, basta desativar a opção Recortar a miniatura nas dimensões exatas.

No entanto, é muito útil poder sempre contar com uma imagem no tamanho quadrado.

OBS: caso seja um desenvolvedor, você pode ajustar a forma como o hard crop é feito.

Enviando Arquivos

Outra configuração importante é a forma como o WordPress vai organizar sua mídia. Por padrão ele vem configurado par Organizar arquivos enviados em pastas baseadas em mês e ano.

E o que isso quer dizer?

Todos os uploads de arquivos são enviados para a pasta wp-content/uploads dentro dos arquivos do WP. Quando a organização baseada em mês e ano está ativada, o WordPress organizará seus arquivos em pastas baseadas em seu ano e mês de upload.

Por exemplo, suponha que hoje seja dia 31/01/2030 e você acabou de fazer o upload do arquivo: wordpress.jpg. Ele será armazenado em seu servidor dentro da seguinte pasta:

wp-content
↳ uploads
 ↳ 2030
  ↳ 01
   ↳ wordpress.jpg

Nesse cenário, o endereço do arquivo de imagem seria algo como:

https://exemplo.com.br/wp-content/uploads/2030/01/wordpress.jpg

E todas as URLs geradas seriam:

https://exemplo.com.br/wp-content/uploads/2030/01/wordpress.jpg
https://exemplo.com.br/wp-content/uploads/2030/01/wordpress-150x150.jpg
https://exemplo.com.br/wp-content/uploads/2030/01/wordpress-169x300.jpg
https://exemplo.com.br/wp-content/uploads/2030/01/wordpress-576x1024.jpg

Conclusão

Utilize as configurações de mídia do WordPress para otimizar o uso de imagens. Dessa forma, você evita utilizar imagens grandes e pesadas quando vai exibí-las em um tamanho menor.

Além disso, utilize a organização em pastas baseadas em ano e mês para facilitar a gestão de mídias.

Lembre-se de revisar todas as configurações do WordPress: Configurações GeraisLeituraDiscussãoMídiaLinks Permanentes e Privacidade.

Professor

Ludy Amano

Fundador da Mirago, atuou como consultor de marketing digital por muitos anos. Formado em comunicação social pela ESPM, já ministrou aulas em instituições como BSP, Trevisan Escola de Negócios e Escola São Paulo. Atualmente se dedica a inovação na educação do mercado digital.
O curso

Curso WordPress Básico – Gratuito e Online

Crie seu site com o poderoso WordPress. Aprenda a instalar, configurar e administrar seu site com todos os recursos nativos do WP. Curso 100% gratuito e online!
Dúvidas
Avatar
Thiago Nunes3 anos atrás

Sobre o Hard Crop

Olá, Ludy. Parabéns pelo curso!

Assisti a aula, porém, continuo sem entender a utilidade do hard crop; enviei uma imagem com 306x165, e após isso criei dois tamanhos personalizados: 256x148(Soft Crop) e 256x148(Hard Crop), no entanto, como pode ver nesse print tirado do post: [http://prnt.sc/eromp3] ambas opções permanecem iguais. Criei um arquivo no Photoshop contendo 256x148 e arrastei a imagem original sem redimensionar nada, e o resultado você pode ver no exemplo 4 da imagem acima. Então, minha dúvida é a seguinte: a imagem 2 após "cropada" não deveria ficar igual a imagem gerada pelo Photoshop? Ou eu entendi errado a lógica da ferramenta?

Segue abaixo os códigos inseridos no functions:

//Imagem 2 (Soft Crop)
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'new-size8', 256, 148 );
}
add_filter('image_size_names_choose', 'my_image_sizes8');
function my_image_sizes8($sizes) {
$addsizes = array(
"new-size8" => __( "New Size8")
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}

//Imagem 3 (Hard Crop)
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'new-size9', 256, 148, true, array( 'center', 'center' ) ); //(cropped)
}
add_filter('image_size_names_choose', 'my_image_sizes9');
function my_image_sizes9($sizes) {
$addsizes = array(
"new-size9" => __( "New Size9")
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}

Agradeço desde já se puder esclarecer!

Envie sua dúvida

Exclusivo para Assinantes

Comece Gratuitamente

Crie sua conta Grátis e tenha acesso aos cursos ao vivo e muito mais.

Seja um Assinante

Tenha acesso ilimitado aos cursos, materiais, certificados e muito mais.

Já possui conta? Faça o login.