¿Cuál es una buena alternativa al uso de $ content_width para la optimización de imágenes?

El $content_widthGLOBAL en WordPress afecta muchos temas e incluso algunos complementos al limitar el tamaño de las imágenes y las incrustaciones en las publicaciones, es un requisito para los temas enviados a wordpress.org.

Se establece mediante el uso de:

$content_width = 584; // Twenty Twelve example

Si inserta una imagen grande (por defecto 1024x1024) en una publicación, resulta en:

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

Si, en cambio, elimina esta configuración global e inserta el tamaño real de la imagen, establecer con add_image_sizeella da como resultado:

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

Eliminar el archivo global e insertar imágenes grandes, lo cual es muy común , a menudo resulta en un ahorro de más de 2 veces, en páginas con múltiples imágenes veo cientos de KB guardados en la carga de la página.

¿Usar add_image_sizey eliminar la capacidad de insertar imágenes de tamaño completo no es una mejor opción?

PD. Escribí sobre esto aquí con datos más precisos

Tenga en cuenta que el $content_widthglobal no solo se usa para imágenes, sino también para objetos incrustados, como video. Por lo tanto, cualquier solución no será simplemente un caso de caída del uso / soporte de $content_widthsí mismo.

Por lo general, un tema restringirá las imágenes del área de contenido de varias maneras:

1. Tamaño de imagen grande: definir $content_widthalgo apropiado para el diseño del tema
2. Tamaño de imagen original / completa : definición de una regla CSS para #content img { max-width: XXX; height: auto; }garantizar que las imágenes de tamaño completo que se insertan no rompan el diseño
3. Tamaño de imagen en miniatura : Llamando set_post_thumbnail_size()para definir el thumbnailtamaño predeterminado de Imagen destacada / Publicar miniatura . (Nota: no recomiendo personalmente usar este método. Defina tamaños de imagen personalizados específicos para una ubicación determinada para una imagen destacada, y luego llame a ese tamaño personalizado en la ubicación específica de la plantilla, a través de the_post_thumbnail( $size )).

Como ha descubierto, debido a la forma en que WordPress selecciona con un tamaño de imagen intermedio para usar en cualquier solicitud de imagen dada, esa solicitud podría generar una imagen a escala del navegador.

Valores definidos por tema para imagen grande

Una opción sería redefinir la configuración para grandes dimensiones de imagen . (Proceda con precaución. Esto está bien para su propio sitio, pero un Tema distribuido públicamente que se mete con los ajustes de configuración del usuario es ... área gris en el mejor de los casos).

La configuración de dimensión de imagen grande se almacena como:

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

Por lo tanto, puede establecer esos valores de acuerdo con su $content_widthvalor:

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

(Por supuesto, desearía poner un poco de verificación de seguridad / error alrededor de esto, según corresponda).

Eliminar opción para insertar imágenes de tamaño completo

Si simplemente desea evitar que los usuarios inserten imágenes de tamaño completo (nuevamente: proceda con precaución; esto puede ser territorio de Complementos), puede 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' );

Una vez más: es posible que desee agregar algunas fallas de seguridad sensatas aquí, ya que este filtro se usa en más de un lugar.

Defina un tamaño de imagen personalizado para imágenes de ancho completo posterior

En relación con la opción anterior, puede definir un 'full-post-width'tamaño de imagen:

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

Luego, agréguelo a la lista de opciones disponibles:

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

Sí, eso creo. Para solucionar el $content_widthproblema de los temas enviados al repositorio, uso filtros de opciones para forzar los tamaños que he elegido para el diseño.

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