Czy chcesz przesłać obrazy do swojej witryny WordPress, ale nie masz pewności, jakie powinny być rozmiary lub typy plików? Czy nie znasz procesu zmiany rozmiaru i kompresji obrazów w Internecie? W tym artykule wyjaśnię, dlaczego używanie odpowiedniego rozmiaru obrazu jest ważne dla Twojej witryny, a także pokażę, jak zmienić rozmiar i kompresować obrazy za pomocą bezpłatnego edytora zdjęć GIMP.

Dlaczego zmiana rozmiaru obrazów Twojej witryny jest ważna

Zacznijmy od tego, dlaczego zmiana rozmiaru obrazów w Twojej witrynie jest tak ważna.

Zgodnie z WordPress.org, ogólny „fizyczny rozmiar” obrazu odgrywa ogromną rolę w wydajności strony internetowej. „Rozmiar pliku [obrazu] określa czas potrzebny do załadowania strony; im większy rozmiar pliku… tym dłużej [strona] będzie się ładować.” Innymi słowy, przesłanie dużego pliku do Twojej witryny spowolni działanie dowolnej strony, do której dodasz obraz, zwykle w postaci wolniejszych prędkości ładowania strony.

„Rozmiar pliku [obrazu] określa czas potrzebny do załadowania strony; im większy rozmiar pliku… tym dłużej [strona] będzie się ładować.”

-WordPress.org

Szybkość wczytywania strony, określana również po prostu jako „Page speed”, to „jak szybko wczytuje się zawartość Twojej strony”, zgodnie z Strona SEO Moz. Posiadanie wolniejszych stron może skutkować wyższymi „współczynniki odrzuceń”, co jest wymyślnym określeniem dla sesji jednostronicowych, podczas których użytkownik opuszcza witrynę po obejrzeniu jednej strony. Wolniejsze strony mogą również skrócić czas spędzany przez użytkowników na stronach Twojej witryny, ponieważ ludzie mogą się niecierpliwić, czekając na wczytanie zawartości strony i opuszczenie witryny.

Te dane są ważne, ponieważ zazwyczaj chcesz, aby użytkownicy spędzali więcej czasu w Twojej witrynie i przeglądali więcej stron w Twojej witrynie.

Są one również ważne, ponieważ odgrywają rolę w rankingu witryny na stronach wyników wyszukiwania (SERP). SERPs to po prostu strony wyników wyświetlane po wpisaniu słowa lub frazy w Google i naciśnięciu klawisza Enter. Ponieważ większe obrazy wskazują na złe praktyki projektowania stron internetowych i negatywnie wpływają na wrażenia użytkownika podczas korzystania z Twojej witryny, wyszukiwarki takie jak Google karać Twoja witryna i umieść swoją witrynę w rankingu pod innymi witrynami, które działają lepiej.

Im niższa pozycja Twojej witryny w Google, na przykład, tym mniejszy ruch uzyska Twoja witryna i tym większy ruch trafi do Twoich konkurentów, którzy znajdują się wyżej w wynikach wyszukiwania.

Zmniejszając rozmiar plików obrazów w witrynie, możesz poprawić swój Page speed a tym samym poprawić inne wskaźniki, takie jak współczynnik odrzuceń i czas na stroniee, aby ostatecznie poprawić swoje rankingi w wyszukiwarkach.

Zwróć uwagę, że istnieje wiele innych ważnych zmiennych, które wpływają na rankingi wyszukiwania, więc naprawianie zdjęć jest tylko częścią solidnego SEO (Optymalizacja pod kątem wyszukiwarek). Jednak z pewnością bardzo ważne jest, aby Twoja witryna miała wyższą pozycję w miejscach takich jak Google, aby zwiększyć ruch w witrynie.

Jak zmienić rozmiar obrazów dla WordPressa w GIMP

Jak więc prawidłowo zmienić rozmiar obrazów dla WordPressa?

Możesz zmniejszyć rozmiar pliku obrazu, po prostu zmniejszając ogólny rozmiar obrazu za pomocą skalowanie i uprawa zanim prześlesz go do swojej witryny. Dodatkowo możesz zastosować to, co nazywa się „kompresja” do obrazu, aby jeszcze bardziej zmniejszyć jego rozmiar.

GIMP, darmowy edytor zdjęć o otwartym kodzie źródłowym, może wykonać wszystkie te zadania, jednocześnie eksportując do zalecanych formatów plików „następnej generacji”, aby jeszcze bardziej zmniejszyć rozmiar plików obrazów i poprawić wydajność witryny.

Skaluj swój obraz

Aby rozpocząć ten proces, otwórz obraz, który chcesz przesłać do swojej witryny do GIMP. Możesz to zrobić, przeciągając i upuszczając obraz z komputera do okna obrazu GIMP lub możesz po prostu przejść do Plik> Otwórz w GIMP-ie.

Jeśli używasz metody Plik> Otwórz, przejdź do lokalizacji obrazu na komputerze z wyświetlonego okna dialogowego „Otwórz obraz” i kliknij dwukrotnie plik obrazu po jego zlokalizowaniu, aby otworzyć go w GIMP (lub kliknij przycisk „Otwórz” w prawym dolnym rogu okna dialogowego).

Na samej górze okna GIMP znajduje się funkcja o nazwie „Pasek tytułu” (czerwona strzałka na powyższym obrazku). Tutaj zobaczysz aktualne wymiary obrazu (powiększone zielone pole na zdjęciu). Mój obraz to 1920×1280 – z pierwszą liczbą, 1920, reprezentującą szerokość mojego obrazu (w pikselach), a drugą liczbą, 1280, reprezentującą wysokość mojego obrazu. Ostateczne wymiary obrazu, których chcesz użyć dla swojego obrazu, będą zależeć od tego, gdzie w WordPressie zamierzasz użyć obrazu, a także od używanego motywu.

W tym samouczku zmienię rozmiar mojego obrazu do standardowego rozmiaru 1200×630 pikseli, który jest zalecany dla obrazów postów na blogu.

Mając to na uwadze, pierwszą rzeczą, którą chcę zrobić, jest przycięcie obrazu tak, aby proporcje mojego oryginalnego obrazu odpowiadały proporcjom zalecanego rozmiaru. Aby to zrobić, chwycę narzędzie do przycinania, naciskając shift + c na klawiaturze lub klikając ikonę narzędzia do przycinania w przyborniku GIMP (czerwona strzałka na powyższym obrazku).

Następnie w opcjach tego narzędzia zaznaczę pole obok „Naprawiono” (zielona strzałka) i kliknę menu rozwijane, aby wybrać „Współczynnik proporcji” (niebieska strzałka).

Wpiszę „1200:630”, aby ustawić współczynnik proporcji w polu tekstowym poniżej listy rozwijanej (żółta strzałka). Odpowiada to współczynnikowi proporcji zalecanego rozmiaru obrazu, jaki ma mieć mój ostateczny obraz.

Używając narzędzia do przycinania, kliknę teraz i przeciągnę myszą po obrazie, aby narysować obszar przycinania. Po zwolnieniu myszy wszystko poza obszarem przycinania zostanie przyciemnione (czerwona strzałka na powyższym obrazku – zakładając, że „Podświetlenie” jest zaznaczone w opcjach narzędzia, co zwykle jest domyślnie).

Domyślnie mój obszar przycinania ma prowadnice ustawione jako „Linie środkowe” (żółta strzałka na powyższym obrazku). Mogę zmienić to ustawienie, korzystając z listy rozwijanej prowadnic u dołu opcji narzędzia. Na przykład zmienię moje przewodniki na „Reguła trójpodziału” (zielona strzałka). Różne opcje przewodnika są tutaj oparte na zasadach fotografii, co ułatwia kadrowanie kompozycji przy użyciu tych zasad.

Możesz najechać myszą na dowolne boki lub rogi obszaru przycinania (tj. podświetlony obszar oznaczony czerwoną strzałką na powyższym obrazku), a następnie kliknąć i przeciągnąć, aby zmienić rozmiar granicy obszaru przycinania. Pamiętaj, że zawsze możesz zobaczyć rozmiar obszaru przycinania w polach „Rozmiar” znajdujących się w opcjach narzędzia (zaznaczonych na zielono na powyższym obrazku). Całkowity rozmiar obszaru przycinania powinien być większy niż ostateczny rozmiar obrazu 1200×630.

Możesz także kliknąć i przeciągnąć myszą na środek obszaru przycinania (czerwona strzałka), aby zmienić położenie przycięcia na obrazie.

Gdy będziesz gotowy do przycięcia obrazu, kliknij raz w obszarze przycinania, a obraz zostanie przycięty.

Pamiętaj, że jeśli opcja „Usuń przycięte piksele” w opcjach narzędzia nie jest zaznaczona (zielona strzałka na powyższym obrazku), granica oryginalnego obrazu nadal będzie wyświetlana wokół obrazu za pomocą żółtej przerywanej linii (czerwona strzałka). Możesz przywrócić oryginalny obraz, cofając w ten sposób przycięcie, przechodząc do Obraz> Dopasuj płótno do warstw. Zostanie wyeksportowany tylko obszar obrazu znajdujący się wewnątrz obszaru płótna.

Nasz obraz jest teraz przycięty do żądanego współczynnika proporcji, ale jeśli jeszcze raz spojrzysz na nasze wymiary obrazu na „pasku tytułu”, zobaczysz, że obraz ma wymiary 1532 × 804 (zaznaczony na zielono i powiększony na powyższym zdjęciu – Twoje wymiary będą prawdopodobnie nieco inne w zależności od tego, jak duży narysowałeś obszar przycięcia na obrazie). Musimy teraz przeskalować nasz obraz, aby pasował do żądanych wymiarów.

Aby to zrobić, przejdź do Obraz>Skaluj obraz (czerwona strzałka).

W wyświetlonym oknie „Skaluj obraz” w obszarze „Rozmiar obrazu” upewnij się, że ikona łańcucha obok pól „szerokość” i „wysokość” jest połączona (czerwona strzałka na powyższym zdjęciu). Następnie zmień „Szerokość” obrazu na 1200 (zielona strzałka). Naciśnij klawisz tabulatora. Wysokość obrazu zostanie automatycznie zaktualizowana do „630”. W sekcji „Jakość” upewnij się, że menu „Interpolacja” (niebieska strzałka) jest ustawione na „NoHalo” lub „LoHalo”, aby uzyskać najlepszą jakość obrazu po skalowaniu. (Aby uzyskać więcej informacji na temat interpolacji, sprawdź mój tutorial na ten temat).

Naciśnij przycisk „Skaluj”, aby przeskalować obraz (żółta strzałka).

Po zakończeniu skalowania sprawdź wymiary obrazu na pasku tytułu. Powinieneś teraz zobaczyć obraz o rozmiarze 1200×630 – dokładnie taki rozmiar, jaki chcemy! Więc co teraz robimy?

Skompresuj swój obraz, eksportując do WebP

Kadrowanie i skalowanie obrazu zmniejszyło rozmiar pliku, zmniejszając wysokość obrazu z 1920 do 1200 pikseli, a szerokość z 1280 do 630 pikseli, ale możemy jeszcze bardziej zmniejszyć rozmiar obrazu, stosując kompresję podczas eksportowania obrazu.  

Dlatego teraz musimy wyeksportować obraz do formatu pliku, który zastosuje kompresję do obrazu bez zauważalnego obniżenia jakości obrazu. Chociaż pliki JPEG są zawsze dobrą opcją, dostępna jest teraz jeszcze lepsza opcja: WebP.

Format WebP stosuje większą kompresję niż JPEG, jednocześnie wpływając na jakość obrazu w mniejszym stopniu niż JPEG. Innymi słowy, uzyskasz lepiej wyglądający obraz przy mniejszym rozmiarze pliku. Ponadto formaty WebP są obsługiwane przez wszystkie 5 najlepszych przeglądarek internetowych.

Aby wyeksportować do WebP, przejdź do Plik>Eksportuj jako (czerwona strzałka).

Kliknij dowolny folder w sekcji „Miejsca” (zaznaczony na zielono), aby wybrać obraz na komputerze, w którym chcesz go zapisać. Możesz po prostu dwukrotnie kliknąć folder, aby go wprowadzić, i zobaczyć, w jakim folderze się znajdujesz obok tytułu „Zapisz w folderze” (czerwona strzałka). Następnie zmień nazwę obrazu na dowolną, jaką chcesz – po prostu upewnij się, że kończysz nazwę obrazu rozszerzeniem „.webp” (niebieska strzałka), aby wyeksportować obraz w formacie WebP. Kiedy będziesz gotowy, kliknij „Eksportuj” w prawym dolnym rogu okna (żółta strzałka).

Następnie pojawi się okno dialogowe „Eksportuj obraz jako WebP”. Upewnij się, że opcja „Lossless” nie jest zaznaczona (czerwona strzałka). Zazwyczaj ustawiam „Jakość obrazu” na 80 (niebieska strzałka – to jest procent, więc im niższy procent, tym niższa będzie jakość obrazu, ale mniejszy będzie rozmiar pliku obrazu). Jeśli twój obraz nie zawiera przezroczystości (tj. logo bez tła), nie musisz się martwić suwakiem „Jakość alfa” (w rzeczywistości w eksperymencie, który przeprowadziłem, jakość alfa spadła ze 100 do 90 właściwie nieznacznie zwiększono rozmiar pliku obrazu z przezroczystym tłem z 8.50 kb do 8.52 kb). Lista rozwijana "Typ źródła", którą możesz ustawić na "Domyślny".

To, czy chcesz zaznaczyć lub odznaczyć dowolną z opcji metadanych, w tym dane Exif, dane ITPC i dane XMP, zależy od Ciebie. Dane Exif i XMP to metadane zwykle przypisywane przez aparat, które opisują informacje o zdjęciu, takie jak model aparatu lub typ używanego obiektywu. Z drugiej strony ITPC jest używany przez członków prasy i przypisuje informacje do Twojego wizerunku, takie jak własność, prawa i licencje. Jeśli nie wiesz, co zrobić, pozostaw te opcje zaznaczone.

Podobnie, możesz pozostawić niezaznaczoną opcję "Zapisz profil kolorów", ponieważ większość przeglądarek automatycznie użyje przestrzeni kolorów sRGB do wyświetlania obrazu, z czego korzysta GIMP. Jeśli używasz innego profilu kolorów, pozostaw to zaznaczone. Ponadto, jeśli martwisz się, że obraz nie wyświetla się poprawnie w niektórych przeglądarkach, pozostawienie go zaznaczonego dodaje tylko kilka KB do ogólnego rozmiaru obrazu.

Wreszcie opcja „Zapisz miniaturę” może pozostać niezaznaczona, co dodatkowo zaoszczędzi nam kilka kilobajtów.

Kliknij „Eksportuj” (żółta strzałka na powyższym obrazku), aby wyeksportować obraz do formatu WebP. Porównując wyeksportowany plik WebP z plikiem JPEG, który ma ten sam rozmiar, a także ma jakość ustawioną na „80”, obraz WebP ma około 30 kb, czyli około 25%, mniejszy rozmiar niż JPEG.

Możesz teraz zalogować się do swojej witryny WordPress i przejść do strony lub posta, do którego chcesz przesłać obraz, lub po prostu przejść do sekcji „Media” za pomocą głównej nawigacji i przeciągnąć i upuścić obraz do Biblioteki multimediów. W moim przypadku przejdę do „Opublikuj” za pomocą głównej nawigacji (czerwona strzałka na powyższym obrazku) i kliknę „Wpis na blogu 1” (niebieska strzałka), aby edytować ten post na blogu.

Następnie otworzę pasek boczny ustawień posta (czerwona strzałka), przewinę w dół do sekcji „Polecany obraz” i rozwinę tę sekcję (niebieska strzałka). Następnie kliknę obraz, aby zastąpić go moim nowym obrazem.

Przejdę do zakładki „Prześlij pliki” (czerwona strzałka) i mogę przeciągnąć i upuścić mój obraz z komputera do WordPressa (niebieskie strzałki).

Na koniec kliknę „Ustaw wyróżniony obraz”, aby zastosować tę zmianę (czerwona strzałka).

Kliknij „Aktualizuj” (czerwona strzałka), aby zaktualizować swoją stronę o nowy polecany obraz.

Jeśli kliknę „Wyświetl post” (niebieska strzałka)…

…zobaczysz teraz nowy polecany obraz wyświetlany u góry mojego bloga.

To wszystko w tym samouczku! Jeśli chcesz dowiedzieć się więcej o projektowaniu strony na WordPressie, polecam zajrzeć na mój Kurs WordPress 6.0 dla osób niekodujących! Lub, jeśli chcesz dowiedzieć się więcej o GIMP, sprawdź mój GIMP 2.10 Masterclass na Udemy!   

Zapisz się do newslettera DMD

Zapisz się do newslettera DMD

Zarejestruj się, aby otrzymywać nowe samouczki, aktualizacje kursów i najnowsze wiadomości na temat Twojego ulubionego oprogramowania typu open source!

Pomyślnie subskrybowany!

Przypiąć go na Pinterest

Udostępnij to