Jak dodać nowy rozmiar obrazków? (2 sposoby)

Odpowiednie dopasowanie rozmiarów zdjęć jest niezwykle istotne jeżeli chodzi o optymalizację czasu ładowania strony. Często okazuje się, że zmniejszenie wymiarów powoduje kilkukrotne przyspieszenie wczytywania serwisu.

Szczególnie to widać podczas testowania strony za pomocą narzędzia Google PageSpeed Insights. Wystarczy dopasować rozmiar zdjęć – czyli wczytywać na stronie zdjęcia w takim rozmiarze w jakim faktycznie występują, a nie np. za pomocą CSS’a zmniejszać je z oryginalnego rozmiaru –  i odpowiednio je skompresować (o kompresji napiszę w innym poście) i już mamy wynik poprawiony o 50-60%. Poniżej prezentuję dwie metody dopasowania rozmiarów zdjęć:

Za pomocą funkcji add_image_size();

Wystarczy, że w functions.php w naszym szablonie wrzucimy następujący kod:

<?php add_image_size( $name, $width, $height, $crop ); ?>

$name – nazwa typu obrazka, jego identyfikator.
$width i $height – kto by pomyślał, szerokość i wysokość.  Jeżeli któryś z tych parametrów ma być ściśle określony, a drugi już nie (np. stała szerokość, różna wysokość) to wystarczy dla tego drugiego ustawić wartość 9999.
$crop – czy obrazek ma być przycinany, domyślnie przyjmuje wartość „false”.

Załóżmy że potrzebujemy miniaturki na stronie głównej o wymiarach 300×200, jeżeli ktoś wrzuci obrazek w innych proporcjach to ma być on przycinany. Kod będzie wyglądał następujaco:

<?php add_image_size( 'thumb-home', 300, 200, true ); ?>

W ten sposób poinformawaliśmy WordPressa, by dla każdego uploadowanego obrazka tworzył miniaturkę w zadanym formacie (no, prawie dla każdego – jeżeli miniaturka będzie mniejsza niż 300×200, to WordPress jej nie wygeneruje).

A jak wywołać takie zdjęcie w szablonie? To zależy, ale np. jeżeli wykorzystujemy zdjęcia jako „obrazki wyróżniajace” to w ramach loopa musimy zamieścić kod:

<?php the_post_thumbnail( 'thumb-home' ); ?>