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

O $content_widthGLOBAL no WordPress afeta muitos temas e até alguns plugins, limitando o tamanho das imagens e incorporando nas postagens, é um requisito para os temas enviados ao wordpress.org.

É definido usando:

$content_width = 584; // Twenty Twelve example

Se você inserir uma imagem grande (padrão 1024x1024) em uma postagem, isso 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_sizeela os resultados:

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

A remoção de imagens globais e a inserção de imagens grandes, o que é muito comum , geralmente resulta em uma economia de mais de 2x, em páginas com várias imagens vejo centenas de KB salvos no carregamento da página.

Usar add_image_sizee remover a capacidade de inserir imagens em tamanho real não é uma opção melhor?

ps. Eu escrevi sobre isso aqui com dados mais precisos

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

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

1. Grande Tamanho da Imagem: Definindo $content_widthalgo apropriado para o projeto temático
2. Tamanho original / imagem completa : definindo uma regra CSS para #content img { max-width: XXX; height: auto; }garantir que as imagens em tamanho original inseridas não quebrem o layout
3. Tamanho da imagem em miniatura : ligando set_post_thumbnail_size()para definir o thumbnailtamanho padrão Imagem em destaque / Publicar miniatura . (Observação: eu não recomendo usar esse método pessoalmente. Defina tamanhos de imagem personalizados específicos para um determinado local para uma imagem em destaque e chame esse tamanho personalizado no local do modelo específico, via the_post_thumbnail( $size ).)

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

Valores definidos por tema para imagem grande

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

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

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

Portanto, você pode definir esses valores de acordo com o seu $content_widthvalor:

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

(Obviamente, você deve colocar algumas verificações à prova de falhas / erros, conforme apropriado.)

Opção Remover para inserir imagens em tamanho normal

Se você simplesmente deseja impedir que os usuários insiram imagens em tamanho real (novamente: continue com cuidado; esse pode ser o território do 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' );

Novamente: convém adicionar algumas falhas de segurança aqui, pois esse filtro é usado em mais de um local.

Definir um tamanho de imagem personalizado para imagens com largura total após a publicação

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

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' );

Acho que sim. Para solucionar o $content_widthproblema dos temas enviados ao repositório, 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...