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

14

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

images optimization globals Wyck
fonte
1
Isso parece algo para trazer à lista de discussão wp-hackers .
eddiemoya

Respostas:

7

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' );
Chip Bennett
fonte
Obrigado Chip pela resposta abrangente, não pensei em definir os get_optionvalores. O resto é semelhante à essência que estou usando gist.github.com/wycks/4949242 que foi vinculada no meu link. Também parece ser uma área cinzenta sobre como fazer isso realmente escalar se o tema for alterado.
21713 Wyck
Também esqueci de mencionar a remoção $content_widthou não da configuração, ainda é aplicada por padrão aos objetos incorporados, eu acho.
Wyck 20/02
Nunca vi esse image_size_names_choosefiltro até agora! Estive substituindo todo esse campo para obter meus tamanhos personalizados até agora. Isso é novo no 3.5 Chip?
sanchothefat 23/02
Acho que já faz 3,3 anos, uso-o para criar rótulos para add_image_sizevários idiomas e depois achei que seria bom usar esse problema de tamanho de imagem. Se você não precisar de localização, basta imprimi-lo na matriz, em vez de codificá-lo.
Wyck 23/02
@sanchothefat Não tenho certeza de quando foi adicionado. Parece que Wyck diz que era 3,3? Eu sempre adoro procurar na fonte, quando preciso estender / modificar algo, e descobrir que um filtro foi adicionado a essa coisa específica. :)
Chip Bennett
2

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...
sanchothefat
fonte