Wordpress: Eigene Bildgrößen und Bildkomprimierung einstellen

Das Arbeiten mit Bildern in Wordpress ist eine der alltäglichsten Interaktionen. Bilder sind wichtig für Besucher und Suchmaschinen. Ebenso sind sie einer der wichtigsten Performance-Faktoren für die Seite. Hinzu kommt, dass jede Plattform (Facebook, Instagram, Twitter, etc) eine eigene Bildgröße als Vorschau gerne hätte.

Bildgrößen und Bildkompression, lassen sich zum Glück einfach in der functions.php anlegen/einstellen.

Diese Funktion steuert, wie stark Wordpress JPG-Bilder komprimiert nach dem Upload. Das Originalbild wird nicht verändert, aber jede neu angelegt Größe (Thumbnail, Medium, etc).

/* 
   Höherer Wert = Höhere Qualität
   Niedrigerer Wert = Niedrigere Dateigröße/Ladezeit
*/
add_filter( 'jpeg_quality', function( $arg ){ return 75; } );

Mit diesem Code können eigene Bildgrößen angelegt werden. Dann werden nach dem Upload eines Bildes automatisch diese Beschnitte angelegt.

/*
  Bildgrößen anlegen. Diese Bilddateien werden dann nach 
  dem Upload automatisch generiert.
*/
function image_sizes() {
	add_image_size( 'facebook_article', 1200,  630, ['center', 'center']  );
	add_image_size( 'instagram_post',   1080, 1080, ['center', 'center']  );
	add_image_size( 'twitter_image',    1024,  512, ['center', 'center']  );
	add_image_size( 'full_hd',          1920, 1080, ['center', 'center']  );
}
add_action( 'after_setup_theme', 'image_sizes' );
 
/*
  Anlegen der Namen, damit sie im Media-Popup auswählbar sind.
*/
function image_sizes_admin_names( $sizes ) {
	if( is_array( $sizes ) ) { // Kann auch String sein manchmal, dann kommt ne Warning.
		$sizes = array_merge( $sizes, array(
			'facebook_article' => __( 'Facebook Article (1200x630)' ),
			'instagram_post'   => __( 'Instagram Post (1080x1080)' ),
			'twitter_image'    => __( 'Twitter Image (1024x512)' ),
			'full_hd'          => __( 'Full HD (1920x1080)' ),
		) );
	}
	return $sizes;
}
add_filter( 'image_size_names_choose', 'image_sizes_admin_names' );