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.

Wideo: Jak zmienić rozmiar obrazów dla WordPress w 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] dyktuje 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 do witryny pliku o dużym rozmiarze spowolni działanie dowolnej strony, do której dodasz treść, co zwykle objawia się wolniejszymi prędkościami ładowania strony w danych analitycznych witryny.

„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ń”, który jest fantazyjnym wskaźnikiem reprezentującym sesje, podczas których użytkownik opuszcza witrynę po obejrzeniu pojedynczej strony.

Wolniejsze strony mogą również skrócić czas spędzany przez odwiedzających na stronach Twojej witryny, ponieważ użytkownicy mogą się niecierpliwić, czekając na załadowanie zawartości strony i szybsze 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ą również ważne, ponieważ odgrywają rolę w rankingu witryny na stronach wyników wyszukiwania lub „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 witryny, wyszukiwarki takie jak Google mogą karać Twoja witryna za te większe obrazy 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ą jest to bardzo ważne, aby Twoja witryna miała wyższą pozycję w miejscach takich jak Google, aby zwiększyć ruch w Twojej witrynie.

WordPress uproszczony: kurs tworzenia skutecznych stron internetowych autorstwa Davies Media Design

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ą skalowaniem 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.

Krok 1: Otwórz swój obraz

Otwórz obraz w GIMP-ie poprzez Plik>Otwórz

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.

Wybierz obraz ze swojego komputera, który chcesz otworzyć 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).

Krok 2: Znajdź wymiary obrazu

Wymiary pliku obrazu są wyświetlane na górnym pasku okna GIMP

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.

Krok 3: Zmień współczynnik proporcji obrazu za pomocą narzędzia Przytnij

Użyj narzędzia do przycinania i opcji narzędzi GIMP, aby zmienić proporcje obrazu

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.

Kliknij i przeciągnij narzędzie przycinania po obrazie, a następnie zmień konfigurację prowadnic z listy rozwijanej

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.

Zmień wartości Rozmiar, aby dostosować rozmiar przycięcia

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.

Zmień położenie kadru na obrazie w GIMP-ie

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.

Żółta ramka wyznacza pierwotną granicę warstwy, jeśli opcja „Usuń przycięte piksele” nie jest zaznaczona

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.

Krok 4: skaluj swój obraz

Nowe wymiary Twojego obrazu zostaną wyświetlone w górnej części okna GIMP-a

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).

Przejdź do Obraz>Skaluj obraz i dostosuj wartości szerokości i wysokości w GIMP

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?

Krok 5: Skompresuj obraz poprzez eksport

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.

Wyeksportuj przycięty obraz z GIMP-a, przechodząc do Plik>Eksportuj jako

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

Użyj rozszerzenia WEBP, aby zmniejszyć rozmiar pliku obrazu, a następnie kliknij Eksportuj

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).

Ustaw jakość obrazu na 80 i naciśnij Eksportuj

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.

Krok 6: Prześlij swój obraz do WordPress

Przejdź do sekcji Posty w WordPressie i kliknij swój post na blogu

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.

Kliknij ikonę koła zębatego, aby uzyskać dostęp do paska bocznego ustawień postu i kliknij opcję Polecany obraz

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.

Prześlij przycięty obraz z GIMP-a do WordPress

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).

Po przesłaniu obrazu GIMP kliknij Ustaw wyróżniony obraz

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

Kliknij Aktualizuj, aby zapisać zmiany w WordPress

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

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

Twój skompresowany obraz utworzony w GIMP będzie teraz wyświetlany na Twojej stronie WordPress

…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 na Udemy! Lub, jeśli chcesz dowiedzieć się więcej o GIMP, sprawdź mój GIMP 2.10 Masterclass na Udemy!   

Biuletyn e-mailowy dotyczący bezpłatnych aplikacji kreatywnych Davies Media Design

Zapisz się do newslettera DMD

Zarejestruj się, aby otrzymywać nowe samouczki, aktualizacje kursów i najnowsze wiadomości na temat swoich ulubionych bezpłatnych aplikacji kreatywnych!

Pomyślnie subskrybowany!