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.
Oto wszystko, co musisz wiedzieć o optymalizacji, zmianie rozmiaru i obsłudze skalowanych obrazów:
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.
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.
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.
- 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.
- 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.
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łnowymiarowym ekranie, wtedy korpus tego posta 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.
Srcset i atrybuty rozmiaru
Czy atrybuty srcset i size nie powinny zajmować się zmianą rozmiaru obrazu?
Tak i nie. Chcesz optymalizacji szczytowej? Jeśli tak, srcset i rozmiar pomogą Ci zbliżyć się do idealnego rozmiaru obrazu, ale nie zawsze podadzą dokładny rozmiar, którego potrzebujesz i nie zmniejszą nadmiaru przy największym rozmiarze.
Atrybut srcset 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-100×100.png 100W, selfie-200×200.png 200W, selfie-400×400.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ść.
Obsługa skalowanych obrazów 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.
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 pasował do perfectly, 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.
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ą.
Podobnie jest w Firefoksie. Po sprawdzeniu elementu zauważysz, że obok obrazu znajdują się wymiary.
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 przyciąć obraz, przejdź do menu Media > biblioteka i kliknij obraz, który chcesz przyciąć. Następnie kliknij przycisk Edytuj obraz, aby otworzyć interfejs edycji.
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 skalować obraz, wpisując żądaną szerokość i wysokość, a następnie klikając przycisk skaluj lub jeśli wolisz przyciąć obraz, możesz to zrobić, klikając i przeciągając kursor myszy 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 wprowadzić niezbędne korekty szerokości i wysokości lub wprowadzić dokładne wymiary w polu wyboru po prawej stronie.
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ą myszki, click ikona kadrowania nad obrazem.
Następnie wybierz wstępnie zdefiniowany rozmiar obrazu, w którym chcesz wprowadzić zmiany w Ustawieniach 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 przycisk Zapisz pod obrazem.
Możesz także ręcznie zmienić rozmiar zdjęć podczas edytowania postu lub strony, klikając przycisk Dodaj Multimedia nad edytorem.
Następnie kliknij kartę Biblioteka multimediów i wybierz jeden z wymienionych obrazów. Następnie kliknij łącze Edytuj obraz po prawej stronie, aby uzyskać dostęp do tego samego interfejsu edycji, o którym mowa powyżej.
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ą ustawień multimediów panelu administratora.
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 Ustawieniach multimedió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.
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.
W Paint przejdź do resize 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!
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.
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 Ustawieniach Smush Plugin Bulk Smush, udaj się 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.
Smush daje również możliwość zachowania kopii oryginalnego obrazu.
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 kontem hostingowym, aby poprawić twydajność 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!
Smush Pro CDN może nawet pomóc, jeśli masz problemy z sugestią “obrazów o prawidłowym rozmiarze” Google PageSpeed.
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 prawidłowego rozmiaru 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.
Tagi:
