O que é uma boa alternativa para usar $ content_width para otimização de imagem?

14

O $content_width GLOBAL no WordPress afeta muitos temas e até mesmo alguns plugins limitando o tamanho das imagens e as inserções nas postagens, e é um requisito para os temas submetidos ao wordpress.org.

É definido usando:

$content_width = 584; // Twenty Twelve example

Se você inserir uma imagem grande (padrão 1024x1024) em uma postagem, ela resultará em:

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

Se, em vez disso, você remover essa configuração global e inserir o tamanho real da imagem, defina com add_image_size , o que resulta em:

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328" 

Remover o global e inserir imagens grandes, muito comuns , geralmente resulta em uma economia de mais de 2x. Em páginas com várias imagens, vejo centenas de KB salvas no carregamento da página.

Está usando add_image_size e removendo a capacidade de inserir imagens de tamanho completo não é uma opção melhor?

ps. Eu escrevi sobre aqui com dados mais precisos

    
por Wyck 14.02.2013 / 20:54

2 respostas

7

Lembre-se de que o $content_width global não é usado apenas para imagens, mas também para objetos incorporados, como vídeo. Portanto, qualquer solução não será apenas um caso de descartar o uso / suporte de $content_width em si.

Normalmente, um tema restringe as imagens da área de conteúdo de algumas maneiras:

  1. Grande Tamanho da imagem: definindo $content_width algo apropriado para o design do tema
  2. Original / Full Tamanho da imagem: definindo uma regra de CSS para #content img { max-width: XXX; height: auto; } para garantir que imagens em tamanho real inseridas não quebrem o layout
  3. Miniatura Tamanho da imagem: Chamando set_post_thumbnail_size() para definir a imagem em destaque / pós-padrão Thumbnail thumbnail Tamanho. (Observação: não recomendo pessoalmente o uso desse método. Defina tamanhos de imagem personalizados específicos para um determinado local para uma imagem em destaque e, em seguida, chame esse tamanho personalizado no local do modelo específico, via the_post_thumbnail( $size ) .)

Como você descobriu, devido à maneira como o WordPress seleciona o tamanho de imagem intermediário a ser usado para qualquer solicitação de imagem, essa solicitação pode resultar em uma imagem em escala do navegador.

Valores definidos pelo tema para imagem grande

Uma opção seria redefinir as configurações para dimensões de imagem grandes . (Prossiga com cuidado. Isso é bom para o seu próprio site, mas um tema distribuído publicamente que mexe com as configurações do usuário é ... na melhor das hipóteses.)

As grandes configurações de dimensão da imagem são armazenadas como:

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

Então, você poderia definir esses valores de acordo com seu $content_width value:

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

(Claro, você gostaria de colocar um pouco de verificação de erros / erros em torno disso, conforme apropriado).

Remover opção para inserir imagens em tamanho real

Se você simplesmente quiser impedir que os usuários insiram imagens em tamanho real (novamente: prossiga com cautela; isso pode ser território de plug-in), você pode filtrar 'image_size_names_choose' :

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

Mais uma vez: talvez você queira adicionar algumas falhas sãs aqui, pois esse filtro é usado em mais de um lugar.

Defina um tamanho de imagem personalizado para imagens com largura total de postagem

Relacionado à opção anterior, você pode definir um tamanho de imagem 'full-post-width' :

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

Em seguida, adicione-o à lista de opções disponíveis:

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );
    
por Chip Bennett 20.02.2013 / 02:24
2

Sim, eu acho que sim. Para contornar o problema $content_width dos temas enviados ao repositório, eu uso filtros de opção para forçar os tamanhos que escolhi para o design.

add_filter( 'option_large_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_large_size_h', function( $opt ) { return 0; } );
add_filter( 'option_embed_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_embed_size_h', function( $opt ) { return 0; } );
// ...etc...
    
por sanchothefat 23.02.2013 / 18:07