Optymalizuj swoje obrazy za pomocą wstępnie zdefiniowanych rozmiarów obrazu [Wskazówka WordPress]

Optymalizacja obrazów na stronie internetowej to trudne zadanie. Możesz użyć mniejszej liczby obrazów, skompresowanych obrazów, ikonek lub svg; i tak dalej. Jedno miejsce, w którym wiele stron WordPressa zostaje potkniętych, polega na definiowaniu rozmiarów obrazów, co jest kluczowy aspekt optymalizacji witryn o dużej zawartości.

Rozmiary obrazów są niezbędne, ponieważ obrazy są tworzone automatycznie zgodnie z rozmiarami podanymi podczas przesyłania obrazów. Gwarantuje to, że nawet jeśli masz oryginalny obraz o szerokości 3000 pikseli, nigdy nie jest on używany, jeśli wystarczy obraz o rozdzielczości 600 pikseli. W idealnej sytuacji przestrzeń o szerokości 600 pikseli powinna wykorzystywać obraz o szerokości 600 pikseli, a nie większy.

W tym artykule poprowadzę Cię przez jakie są rozmiary obrazu i jak je zdefiniować.

Jak WordPress obsługuje obrazy

Jeśli kiedykolwiek wstawiłeś obraz do artykułu WordPressa, powinieneś znaleźć selektor rozmiaru obrazu. Pozwala to wstawiać małe, średnie i duże wersje obrazów. Rzeczywiste rozmiary tych można modyfikować w ustawieniach WordPress.

Za każdym razem, gdy przesyłasz obraz przez WordPress, generuje on wersje tych obrazów i zapisuje je oddzielnie. Na przykład, jeśli prześlesz obraz 1200 × 800, WordPress może utworzyć wersje 100 × 100, 600 × 400 i 900 × 600. Po wstawieniu obrazu i wybraniu „medium” zostanie użyta rzeczywista wersja średnia, a nie wersja skurczona oryginału.

Jest to niezwykle korzystne, ponieważ oszczędza przepustowość serwera i czas przetwarzania na komputerze klienckim. Myślę, że nic dziwnego, że pobieranie obrazu 600 × 400 jest szybsze niż pobieranie obrazu 1200 × 800.

Jeśli używany jest większy obraz, który musi zostać zmniejszony, przeglądarka musi zająć się obliczeniami aby tak się stało. Chociaż nie zajmie to wiele godzin, może być zauważalne na stronach z dużą ilością obrazów.

Właściwy obraz we właściwym miejscu

Ostatecznym celem powinno być zawsze używaj odpowiednich rozmiarów obrazu. Jeśli potrzebujesz obrazu 440 × 380, pobierz z serwera obraz o tym samym rozmiarze. Są dwa główne miejsca, w których będziesz korzystał z przesyłanych obrazów: polecane obrazy i obrazy w postach - radzę najpierw skupić się na polecanych zdjęciach.

We wszystkich artykułach, z wyjątkiem najbardziej wizualnie ukierunkowanych, nie ma znaczenia, czy obraz w postie ma szerokość 220 lub 245 pikseli. Niezależnie od tego, która wersja jest dostępna, będzie równie przydatna. Polecane zdjęcia są jednak zwykle wyświetlane w zwykłych rozmiarach. Do list artykułów możesz użyć miniatury 178 × 178, aw nagłówkach artykułów możesz użyć obrazu o szerokości 1200 × 600.

Oprócz tego możesz również chcieć zachować oddzielną miniaturę / średni / duży rozmiar zgodnie z ustawieniami w ustawieniach zapewniają łatwy dostęp do określonych wymiarów podczas dodawania obrazów do postów.

A wszystko sprowadza się do tego: czy nie byłoby wspaniale, gdybyśmy mieli dwa dodatkowe rozmiary obrazów, które moglibyśmy wykorzystać w przypadku polecanych obrazów? Te rozmiary obrazów byłyby tworzone obok reszty po załadowaniu obrazu. Dobrą wiadomością jest to, że WordPress ma dość prostą funkcję.

Tworzenie rozmiarów obrazu

Używając funkcja add_image_size () możesz zdefiniować wszystkie rozmiary obrazów, których potrzebuje Twoja witryna. Stwórzmy dwa przykłady wymienione powyżej. Umieść poniższy kod w pliku functions.php swojego motywu lub w pliku wtyczki.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Jak widać, ta funkcja przyjmuje cztery parametry. Pierwszy parametr pozwala ustawić nazwę dla rozmiaru. Drugi parametr to maksymalna szerokość, trzecia, maksymalna wysokość. Czwarty parametr ustawia twarde kadrowanie. Jeśli ustawione na true, obraz zostanie utworzony w określonym rozmiarze.

Po dodaniu do twojego motywu lub wtyczki dwie nowe wersje każdego przesyłanego pliku zostaną utworzone przez WordPress.

Korzystanie z rozmiarów obrazu

Te rozmiary obrazów mogą być wykorzystywane w wielu funkcjach, które dotyczą pobierania mediów. Spójrzmy najpierw na polecane zdjęcia. the_post_thumbnail () jest powszechnie używany do wyświetlania wyróżnionego obrazu postu. Poniższy kod można umieścić w pętli WordPress:

 the_post_thumbnail ('featured_thumbnail'); 

Pierwszy parametr tej funkcji pozwala określić rozmiar używanego obrazu. Ponieważ określiłem „featured_thumbnail”, zostanie użyta wersja 178 × 178 tego pliku.

Istnieje wiele innych funkcji, takich jak wp_get_attachment_image ()i wp_get_attachment_image_src () które również używają parametru rozmiaru obrazu. Zawsze, gdy używasz takiej funkcji, zawsze powinieneś określić odpowiedni rozmiar obrazu.

Regeneracja miniatur

Jeśli masz już witrynę, nie będziesz w stanie zoptymalizować swoich artykułów retrospektywnie, po prostu określając rozmiar obrazu. Rozmiary obrazów są brane pod uwagę tylko przy przesyłaniu nowego obrazu, więc nie są stosowane do obrazów już w systemie.

Nie obawiaj się, wtyczka Regenerate Thumbnails sprawi, że wszystko będzie lepiej! Ta wtyczka może odtwarzać miniatury wszystkich obrazów, uwzględniając wszystkie zdefiniowane rozmiary obrazów. Może też wyceluj na określony obraz, co jest przydatne, jeśli masz tylko kilka lub robisz testy.

Po zregenerowaniu miniaturek powinieneś zobaczyć zoptymalizowane wersje załadowane w Twojej witrynie. Możesz to sprawdzić, wyświetlając źródło obrazu. Jeśli przesłałeś 'example.jpeg' i widzisz 'example.jpeg' jako źródło prezentowanego obrazu, coś jest nie tak. Jeśli zobaczysz “przykład 178 × 178.jpeg” wtedy wszystko jest dobrze; wyświetlany jest zoptymalizowany obraz.

Elastyczne obrazy

Jedną z trudności w utrzymaniu zoptymalizowanej witryny jest szybkość reakcji. Gdy zobaczę artykuł na iPadzie, obraz w dużym rozmiarze w formacie post-down zostanie przeskalowany, ponieważ maksymalna szerokość wyniesie około 786 pikseli..

Najłatwiejszym rozwiązaniem jest użycie wtyczki takiej jak Hammy. Hammy działa w oparciu o szerokość treści twojego motywu (w przeciwieństwie do szerokości okna przeglądarki) i może na tej podstawie obsługiwać zoptymalizowane obrazy. Jest to szczególnie przydatne dla użytkowników mobilnych, gdzie moc przetwarzania i przepustowość mogą stanowić problem.

Dalsza optymalizacja obrazu

Jak wspomniałem we wstępie, istnieją niezliczone sposoby optymalizacji obrazów. Od sprite'ów po kompresję obrazu można zastosować wiele technik w celu zmniejszenia czasów ładowania, które towarzyszą obrazom. Ashutosh KS napisał świetny artykuł prezentujący 9 wtyczek WordPressa, aby poprawić wydajność obrazu, proponuję, aby go przeczytać!

Proponuję również spojrzeć na Hassle Free Responsive Images, która pokazuje, jak dodać obsługę elementu obrazu, coś, czego chcesz użyć, jeśli chcesz napisać własny kod.