Wyświetlanie skalowanych obrazów jest jednym z najczęściej pomijanych sposobów zapewnienia lepszej wydajności witryny. Czy Twoje obrazy trzymają Twój Strona WordPress z powrotem?

Obrazy zajmują dużo miejsca w rozmiarze pliku, zwłaszcza jeśli są nadęte i zbyt duże. Dlatego obrazy powinny być numerem jeden na liście rzeczy do optymalizacji, jeśli próbujesz poprawić szybkość strony, konwersje lub sprzedaż.

W tym poście skupimy się na tym, jak obsługiwać skalowane obrazy za pomocą WordPress. Dowiesz się, jak prawidłowo rozmiar obrazów w WordPress na kilka różnych sposobów i jak znacznie poprawić przepływ pracy optymalizacji obrazu Dzięki Smush Pro.

Czym są skalowane obrazy?

Obrazy w sieci muszą spadać w strefie Złotowłosej. Nie za duży, nie za mały. Muszą być po prostu racja. Jeśli są zbyt małe i są powiększone, będą rozmyte.

Blurry Image Scaled Up
Ten obraz jest zbyt mały i został przeskalowany za pomocą atrybutu HTML width

Z drugiej strony, jeśli obraz jest zbyt duży, przeglądarka zmniejszy go do odpowiedniego rozmiaru. Nie ma to wpływu na wygląd obrazu, ale spowoduje zwiększenie rozmiaru pliku strony.

Kompletny przewodnik po masteringu optymalizacji obrazu

Ponieważ nie widać zmiany w jakości, dodatkowa waga plików graficznych staje się łatwa do przeoczenia. A ponieważ większość ludzi nie wie, że istnieje problem, nie naprawia go. Polegają na tym, że przeglądarka ma odpowiedni rozmiar, bo po to jest ta przeglądarka, prawda?

Źle.

Screenshot of Google Pagespeed Insights
Gdy pojawi się” prawidłowo rozmiar obrazów ” możliwość w Google PageSpeed Insights, będziesz wiedzieć, że nadszedł czas, aby skalować niektóre obrazy.

Według Google …

Najlepiej, aby strona nigdy nie wyświetlała obrazów większych niż wersja renderowana na ekranie użytkownika. Wszystko większe … po prostu powoduje zmarnowane bajty i spowalnia czas ładowania strony.

(Źródło: developers.google.com)

Dostarczenie zbyt dużego obrazu rani cię na kilka sposobów.

  1. Po pierwsze, rozprasza przeglądarkę, zmuszając ją do wykonywania dodatkowych żądań serwera. Zamiast dostarczać stronę internetową tak szybko, jak to możliwe, musi zatrzymać i zmienić rozmiar obrazu. To wymaga czasu, moi przyjaciele, zwłaszcza jeśli Twoje strony internetowe są ciężkie.
  2. Po drugie, jeśli przesyłasz pełnowymiarowe selfie prosto z telefonu, ale wyświetlasz je jako mały Gravatar, tracisz czas i dane pobierając nadmiernie duży obraz.
Hummingbird optimize images
Przykładowa sugestia w Koliber, aby skompresować i zmienić rozmiar obrazu.

Wprowadź skalowane obrazy. Skalowany obraz to obraz, który został dopasowany do dokładny wymiary, do których go używasz. W przeciwieństwie do kadrowania, które może ostatecznie zmienić proporcje obrazu, skalowanie zachowuje wymiary.

Jeśli czytasz ten post na pełnym ekranie, treść tego postu ma szerokość 600px. Ponieważ w WPMU DEV chodzi o optymalizację, kiedy tworzę obrazy do postów na blogu, robię je dokładnie o szerokości 600px. Jest to dokładny rozmiar, którego potrzebuję, aby przeglądarka nie musiała wykonywać żadnej dodatkowej pracy i nie musisz używać więcej danych.

The Ultimate Mega Guide to Speeding Up WordPress

Optymalizatory prędkości witryny, takie jak Hummingbird, Gtmetrix i Google PageSpeed Insights, zalecają skalowanie obrazów w celu poprawy wydajności.

Screenshot of GTmetrix Serve Scaled Images Message
GTmetrix powie “serwuj skalowane obrazy” jeśli Twoje obrazy są zbyt duże i spowalniają Twoją stronę, serwuj

Czy atrybuty srcset i size nie powinny zajmować się zmianą rozmiaru obrazu?

Tak i nie. Chcesz optymalizacji szczytowej? Jeśli tak, srcset oraz rozmiar pomoże Ci zbliżyć się do idealnego rozmiaru obrazu, ale nie zawsze da ci dokładny rozmiar, którego potrzebujesz i nie zmniejszy nadmiaru przy największym rozmiarze.

Na srcset atrybut działa, podając adres URL obrazu, a następnie podając przeglądarce listę obrazów do wyboru w różnych rozmiarach. Ten zestaw źródeł dla tego selfie telefonu komórkowego, o którym wspomniałem wcześniej, wyglądałby mniej więcej tak:

srcset= " selfie-100x100.png 100W, selfie-200x200.png 200W, selfie-400x400.png 400w"

Powyżej WordPress mówi przeglądarce, wiesz więcej o użytkowniku niż ja, oto obraz, który chcesz w 3 różnych rozmiarach, wybierz ten, który będzie działał najlepiej.

Gdy przeglądarka musi wyświetlić Gravatar 75px x 75px obok komentarza, wybierze pierwszą opcję w zestawie i nieznacznie zmieni jej rozmiar. Jeśli użytkownik ma urządzenie retina, wybierze drugą opcję.

Zmniejsza to ilość odpadów, ale skalowanie pozwoli ci uzyskać dodatkową wydajność.

Jak obsługiwać skalowane obrazy w WordPress

Aby rozpocząć, musisz znać wymiary obrazów, które będą używane w Twojej witrynie. Mówię o obrazach banerów, obrazach bohaterów, obrazach postów na blogu, Gravatarze itp.

Obejrzyj nasz szybki samouczek, Jak wykryć nieprawidłowo wielkości obrazów w WordPress.

Chcemy wiedzieć, jaki jest największy rozmiar każdego obrazu, który kiedykolwiek będzie wyświetlany, ponieważ wiemy, że wszystko powyżej tego progu jest bezużyteczne.

Na przykład, załóżmy, że chcę użyć zdjęcia oceanu na stronie głównej mojej witryny. Obraz w stanie niezmienionym wynosi 4534px x 3023px.

Screenshot of large ocean photo in media library
Nie zrobiłem nic, aby zmienić rozmiar zdjęcia … jeszcze

W przypadku obrazu w treści posta na blogu prawdopodobnie będziesz musiał podawać obraz o szerokości od 600px do 960px, a w przypadku obrazów z bohaterami, które obejmują szerokość ekranu komputera stacjonarnego, patrzysz na coś w zakresie szerokości 1600px.

Należy również pamiętać, że musisz podwoić te rozmiary, aby pomieścić ekrany siatkówki. Największy rozmiar obrazu 1600px musi być 3200px.

Aby znaleźć rozmiar, który musi być obraz, aby idealnie pasował, poszukamy obrazu na stronie i otworzymy narzędzia programistyczne przeglądarki.

Jeśli używasz Chrome, kliknij prawym przyciskiem myszy obraz i przejdź do Inspekcja. W Firefoksie wybierz Sprawdź Element.

Screenshot of how to open Chrome Developer Tools
Możesz również użyć Ctrl + Shift + I

W Chrome, po najechaniu kursorem na adres URL obrazu, zobaczysz Rozmiar, przy którym obraz jest wyświetlany, z oryginalnym” naturalnym ” rozmiarem obrazu w nawiasach. Ten duży plik obrazu jest tym, co odwiedzający pobierają.

Screenshot of chrome developer tools with image size
Obraz jest ponad 3000 pikseli za duży, co za strata.

Podobnie jest w Firefoksie. Po sprawdzeniu elementu zauważysz, że obok obrazu znajdują się wymiary.

Screenshot of firefox developer tools
To mówi nam Rozmiar obrazu, którego potrzebujemy

Teraz, gdy wiemy, jaki rozmiar potrzebujemy obrazu, możemy odpowiednio zmienić rozmiar obrazów w WordPress na kilka różnych sposobów.

Kadrowanie obrazów w bibliotece multimediów

Aby ręcznie kadrować obraz, przejdź do Media > Biblioteka i kliknij na obraz, który chcesz przyciąć. Następnie kliknij Edytuj Obraz przycisk, aby otworzyć interfejs edycji.

Attachment details for an image
Zobacz szczegóły załącznika obrazu, a następnie kliknij Edytuj Obraz guzik.

Skaluj lub kadruj obraz w razie potrzeby, korzystając z odpowiednich opcji po prawej stronie. Należy pamiętać, że jeśli przeskalujesz obraz, aby dopasować go do potrzebnej szerokości, wysokość może być krótsza lub dłuższa niż rozmiar zdefiniowany w motywie, w zależności od wymiarów oryginalnego obrazu.

Jeśli zdecydujesz się na skalowanie obrazu, pozostanie on w odpowiedniej proporcji w stosunku do oryginalnego obrazu. Z drugiej strony, jeśli zdecydujesz się uprawa Twój obraz niekoniecznie musi być edytowany proporcjonalnie w zależności od wybranych wymiarów.

Możesz przeskalować obraz, wpisując żądaną szerokość i wysokość, a następnie klikając Skala przycisk lub jeśli wolisz przyciąć obraz, możesz to zrobić, klikając i przeciągając myszką nad obrazem i wybierając obszar, który ma być widoczny. Następnie zwolnij przycisk myszy, aby wyświetlić swój wybór.

9 ukryte funkcje w bibliotece multimediów WordPress znają tylko zaawansowani użytkownicy

Możesz kliknąć i przeciągnąć kwadraty na krawędziach i bokach, aby dokonać niezbędnych korekt szerokości i wysokości lub możesz wprowadzić dokładne wymiary, które chcesz Wybór pole po prawej.

Możesz również wprowadzić żądany Współczynnik Proporcji obrazu:

Proporcje to relacja między szerokością a wysokością. Proporcje można zachować, przytrzymując klawisz shift podczas zmiany rozmiaru zaznaczenia. Użyj pola wprowadzania, aby określić proporcje, np. 1: 1 (kwadrat), 4:3, 16:9, itd.

Możesz także kliknąć i przeciągnąć wybrany obszar, aby przenieść go do dokładnie tego obszaru, który ma być widoczny.

Jeśli kadrujesz obraz, wybierając jego obszar za pomocą myszy, kliknij ikonę kadrowania nad obrazem.

An example image being cropped.
Skaluj lub kadruj obraz, aby pasował do rozmiaru określonego przez motyw.

Następnie wybierz wstępnie zdefiniowany rozmiar obrazu, w którym chcesz zastosować zmiany Ustawienia Miniatur. Ta opcja może być pomocna, jeśli chcesz edytować obraz z zachowaniem miniatury.

Na przykład możesz chcieć mieć kwadratową miniaturę, która wyświetla tylko sekcję obrazu.

Po zakończeniu wprowadzania zmian kliknij Zapisz przycisk pod obrazem.

The attachment details screen. The Save button and Thumbnail Settings are highlighted.
Wybierz rozmiary obrazów, w których chcesz zastosować zmianę rozmiaru, a następnie kliknij Zapisz.

Możesz także ręcznie zmienić rozmiar zdjęć podczas edytowania postu lub strony, klikając na Dodaj Media przycisk nad edytorem.

Następnie kliknij Biblioteka Multimediów Zakładka i wybierz jeden z wymienionych obrazów. Następnie kliknij Edytuj Obraz link do prawa dostępu do tego samego interfejsu edycji, o którym mowa powyżej.

The Insert Media screen of a post
Możesz także ręcznie zmieniać rozmiar obrazu podczas edycji postu lub strony.

Jak WordPress zmienia rozmiar obrazów za pomocą ustawień multimedialnych?

Jeśli obrazy, które musisz ręcznie zmienić rozmiar, są domyślnymi rozmiarami tworzonymi przez WordPress, możesz spróbować je edytować za pomocą panelu administracyjnego Ustawienia Mediów.

Domyślne rozmiary obrazów WordPress to miniatury, średnie, duże i pełnowymiarowe, jednak Pełny rozmiar odnosi się do oryginalnych wymiarów przesłanych obrazów i nie można go zmienić w Ustawienia Mediów. Aby edytować oryginalny obraz, zapoznaj się z powyższymi szczegółami.

Aby ręcznie zmienić rozmiar domyślnych rozmiarów obrazu, przejdź do Ustawienia > Media i wprowadź maksymalną szerokość i maksymalną wysokość, których potrzebujesz dla odpowiedniego rozmiaru obrazu, który chcesz zmienić, w odpowiednich polach.

Jeśli chcesz zmienić rozmiar miniatury, możesz również pozostawić zaznaczone pole wyboru, aby przyciąć miniaturę do dokładnie określonych wymiarów. Zwykle miniatury są automatycznie edytowane proporcjonalnie.

Po zakończeniu kliknij Zapisz Zmiany na dole strony.

The Media Settings
Możesz edytować domyślne rozmiary obrazów WordPress za pomocą Ustawienia Mediów.

Pamiętaj, że te rozmiary mogą być używane w wielu miejscach w Twoim motywie, więc możesz skończyć edytując obrazy, których nie chcesz zmieniać. Możesz również dodać niestandardowe rozmiary do WordPress.

Po zapisaniu zmian zainstaluj i aktywuj wtyczkę Regenerate Thumbnails, aby zmienić rozmiar wcześniej przesłanych obrazów, aby dostosować je do nowych, ustawionych wymiarów.

Edycja pliku W Paint

Otwórz swój obraz w programie Paint, Adobe Photoshop lub wybranym edytorze obrazów. Użyjemy wymiarów, które wymyśliliśmy w narzędziach programistycznych.

Screenshot of resizing image in Paint
Jak zmienić rozmiar obrazu w programie Paint

W Paint przejdź do Zmień rozmiar w spis treści tab. Otworzy się okno, które pozwoli Ci wprowadzić nowe wymiary. Wybierz piksele przycisk opcji, a następnie Edytuj wymiary poziome. Wymiary pionowe zostaną automatycznie zmienione, jeśli Zachowaj proporcje pole wyboru jest zaznaczone. Tego właśnie chcemy. Jeśli pole nie jest zaznaczone, musisz sam obliczyć.

Po zakończeniu dostosowywania wymiarów kliknij ok. Następnie możesz zapisać plik w Paint, przesłać ponownie do WordPress i zastąpić obraz nowym plikiem.

Optymalizacja obrazów za pomocą Smush

Smush i Smush Pro może zaoszczędzić dużo czasu, gdy zaczniesz optymalizować swoje obrazy.

Wykrywanie Niewłaściwego Rozmiaru

Zarówno Smush, jak i Smush Pro mają opcję wykrywania niewłaściwego rozmiaru w ustawieniach wtyczki. Jeśli jesteś taki jak ja i od czasu do czasu zapominasz o zmianie rozmiaru zdjęć, Ta funkcja pomoże Ci zobaczyć, które obrazy spowalniają Twoją witrynę.

Podczas odwiedzania witryny obrazy, które są zbyt duże lub zbyt małe, będą miały żółty kontur.

Po otwarciu zakładki informacje (patrz żółta ikona “i”?) Smush poinformuje cię, co jest nie tak z rozmiarem obrazu. Dzięki Smush!

Screenshot of Smush Wrong Size Notification on site front end
Tylko administratorzy będą widzieć podświetlony obraz i Komunikat o błędzie

Aby włączyć tę funkcję w Smush i Smush Pro, Przejdź do menu Wtyczki i w Narzędzia sekcja, włącz Wykrywanie i wyświetlanie obrazów o nieprawidłowym rozmiarze. Następnie zapisz, aby zaktualizować ustawienia i zobaczyć obrazy o nieprawidłowym rozmiarze w przedniej części witryny.

Smush Settings Detect Wrong Size Images
Ta funkcja jest dostępna w darmowej wersji Smush

Automatyczna Zmiana Rozmiaru Obrazu

Chcesz chronić siebie i innych przed przesyłaniem super ogromnych obrazów, abyś nie zjadł tak dużo miejsca na hosting? Smush i Smush Pro mogą pomóc.

W pluginie Smush Bulk Smush Ustawienia, przejdź do Zmiana Rozmiaru Obrazu sekcja i włącz Zmień rozmiar moich obrazów w pełnym rozmiarze. Zanim obraz zostanie przesłany do biblioteki multimediów, Smush zmieni jego rozmiar tak, aby pasował do określonej szerokości i wysokości.

Screenshot of Smush settings
Zauważ, jak Smush mówi, jaki powinien być największy rozmiar obrazu w Twojej witrynie, a następnie podwaja go dla urządzeń Retina.

Smush daje również możliwość zachowania kopii oryginalnego obrazu.

Screenshot of Smush Settings to Save Original Image
Denerwujesz się popsuciem zdjęć? Zachowaj oryginał

Ta funkcja zasadniczo odcina nadmiar z największego obrazu.

Jeden z głowy, zostały setki.

Ale co, jeśli chcesz, aby wszystkie przesłane obrazy miały idealny rozmiar bez konieczności przechodzenia przez powyższe kroki i ręcznego skalowania każdego obrazu?

Łatwo, Zostań członkiem WPMU DEV i uzyskaj dostęp do błyskawicznie szybkiego CDN Smush Pro (lub po prostu zdobądź Smush Pro samodzielnie).

Podczas gdy twój host może zawierać CDN z Twoim kontem hostingowym, aby poprawić wydajność Twojej witryny, CDN Smush Pro został zaprojektowany specjalnie z myślą o optymalizacji obrazu.

Smush Pro CDN nie tylko dostarczy Twoje obrazy z błyskawiczną prędkością, ale nasz CDN będzie również służył do idealnego rozmiaru obrazu dla Twoich użytkowników. Innymi słowy, skalowanie zostaw nam!

Screenshot of Smush CDN welcome screen
Musisz skonfigurować Smush Pro CDN w kilku prostych krokach

Smush Pro CDN może nawet pomóc, jeśli masz problemy z sugestią “obrazów o prawidłowym rozmiarze” Google PageSpeed.

Screenshot Smush Pro resize images CDN
Po naciśnięciu przycisku Rozpocznij, przejdziesz do ustawień konfiguracji CDN.

Wystarczy włączyć automatyczna zmiana rozmiaru OPCJA I CDN dostarczy obraz o odpowiednim rozmiarze, zachowując oryginalne obrazy nietknięte. Co ty na to?

Skalowanie Obrazu Rozwiązane

Jak widać, istnieje wiele sposobów na prawidłowo rozmiar obrazów w WordPress, ale może to być żmudny proces, jeśli masz dojrzałą witrynę z dużą ilością obrazów. 

Zamiast rzucać ręce w górę i mówiąc: “Och, to jest problem użytkownika” i pozostawiając swoje obrazy tak, jak jest, sugeruję użycie wtyczki takiej jak Smush, aby rozwiązać problem w ciągu pięciu minut zamiast pięciu dni. Możesz również wypróbować Smush Pro za darmo. Twoi użytkownicy będą Ci wdzięczni. I prawdopodobnie zobaczysz niższe koszty hostingu, ponieważ nie potrzebujesz tak dużo miejsca.

Wszyscy wygrywają.

Jeśli nie spojrzałeś na Smusha od dłuższego czasu, nadszedł czas na ponowne odwiedzenie. Dodaliśmy wiele nowych funkcji, a Smush Pro jest znacznie potężniejszy niż wcześniej. Smush Pro był już wiodącą wtyczką do optymalizacji obrazu, więc to wiele mówi. Sprawdź to, nie będziesz rozczarowany.

Jakich sztuczek używasz do zmiany rozmiaru i kompresji zdjęć? Czy próbowałeś WP Smush Pro, aby skalować swoje obrazy? Podziel się swoimi wskazówkami w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…