Jak optymalizować zdjęcia, aby nie obciążać strony WWW na WordPress w 3 minuty?

Jak optymalizować zdjęcia na WordPressa? 2 sposoby

Masz do wyboru dwie opcje optymalizacji zdjęć:

1. Optymalizacja zdjęć, które już są wgrane do Twojego WordPressa — za pomocą wtyczki.
2. Optymalizacja zdjęć, które zamierzasz dopiero dodać do biblioteki mediów.

Jeśli zdjęć, które masz w swojej bibliotece mediów jest sporo możesz skorzystać z wtyczki o nazwie Smush – Optimize, Compress and Lazy Load Images. Pamiętaj, że przed instalacją nowej wtyczki zawsze warto wykonać kopię zapasową swojej strony WWW. Ponadto, pamiętaj o regularnym monitorowaniu strony po zastosowaniu optymalizacji, aby upewnić się, że wszystko działa poprawnie, a zdjęcia, które zoptymalizujesz będą wyglądały dobrze lub nie znikną.

Ten tutorial nie będzie jednak dotyczył optymalizacji zdjęć z pomocą wtyczki, a tego jak zrobić to ręcznie. Uważam ten sposób za efektywniejszy, bo zdjęcia które odpowiednio przygotujesz nie będą już wymagały instalacji dodatkowej wtyczki.

Jakie powinny być zdjęcia dodawane do biblioteki mediów WordPressa?

Trzeba zwrócić uwagę na:

• Wielkość pliku — zdjęcia nie powinny być większe niż 300 kB.
• Format pliku — do zdjęć najlepiej używać nowoczesnego formatu webp. Format ten pozwala na zmniejszenie rozmiaru zdjęcia, bez strat w jego jakości, co pozytywnie wpływa na szybkość ładowania strony, która z kolei ma pozytywny wpływ na SEO.
• Nazwę plików — nie należy umieszczać zdjęć o nazwie IMG25146546, czyli nazwie, jaka nadawana jest zdjęciu np. na telefonie lub w aparacie. Należy zmienić nazwę pliku zgodną z zawartością zdjęcia przed wysłaniem do biblioteki mediów. W obrębie WordPressa nie da się tego zrobić.
• Tytuł – najczęściej taki sam jak nazwa pliku.
• Tekst alternatywny – krótki opis, który czyta robot od Google, jednocześnie najważniejszy element SEO dla grafik.
• Etykieta – tekst, który wyświetla się pod zdjęciem po najechaniu na nie myszą.

Nazwa pliku, tekst alternatywny, opis i etykieta mogą mieć identyczną treść. Najważniejsze jest jednak to, by nie upychać na siłę słów kluczowych oraz by opis ten był zgodny z tym co na danym zdjęciu się znajduje. Jest to praktyka przyjazna dla użytkownika, pochwalana przez Google, a więc działająca pozytywnie na SEO.

Narzędzia — czyli co musisz mieć, aby poprawnie optymalizować zdjęcia na WordPressa?

Potrzebny Ci będzie darmowy program, który nazywa się IrfanView. Jest on bezpłatny. Na początek jednak zobacz jaka jest różnica pomiędzy zdjęciem w pierwotnej formie, a tym zoptymalizowanym. Zobacz na właściwości pliku:

Przed:

Po:

Różnica jest ogromna. Nie tylko w samej wielkości pliku – rzuć okiem na rozszerzenie. To format, z którym mogłaś się do tej pory nie spotkać – WEBP. Format WebP to nowoczesny format plików graficznych stworzony przez Google, charakteryzujący się wysoką jakością przy jednoczesnym znacznie mniejszym rozmiarem plików niż tradycyjne formaty, takie jak JPEG czy PNG. Dzięki skutecznej kompresji i obsłudze zaawansowanych funkcji, WebP stanowi doskonałe rozwiązanie dla optymalizacji obrazów na stronach internetowych, przyczyniając się do szybszego ładowania stron i lepszej wydajności.

Jak zoptymalizować zdjęcia? Instrukcja krok po kroku

I. Otwierasz program IrfanView. Klikasz menu “plik”, a następnie “Batch Conversion/Rename”. To jest miejsce, w którym będzie się działa magia.

II. Otwiera się okno. W przestrzeni po lewej (1) wybierasz opcję “Batch conversion – Rename result files” oraz format WEBP z rozwijanej listy. W prostokącie po prawej (2) zdjęcie, które chcesz zmienić (można więcej niż jedno). Klikasz przycisk „Add” by zaakceptować zdjęcia, które mają zostać poddane konwersji (3). Ustawiasz nazwę nowego pliku (4). Jeśli zdjęć jest więcej dopisz na końcu “####” by kolejne zdjęcia były numerowane. Klikasz przycisk “Browse” (5), by wybrać miejsce, w którym zostanie zapisane zdjęcie/zdjęcia po konwersji.

III. Następnie ustawiasz opcje konwersji. Klikasz przycisk “Options” (6). Otwiera się takie okienko. Należy wybrać quality — czyli jakość nowego zdjęcia. Wartość ta jest podana w procentach. Zależnie od wielkości oryginalnego zdjęcia można ustawić własną wartość. Zazwyczaj pomiędzy 65 – 90. Klikasz ok.

IV. Kiedy wszystko jest ustawione klikasz przycisk “Start batch” (7).

V. Po zakończonej konwersji pokaże się takie okno jak poniżej. Należy kliknąć przycisk “Exit batch”.

Następnie należy zmniejszyć rozdzielczość zdjęcia, tak by jego szerokość miała maksymalnie 1920 pikseli (Full HD). O ile oczywiście Twoje zdjęcie jest większe. Taka jakość jest wystarczająca do stron internetowych.

VI. Otwierasz zdjęcie poprzez program Irfan View. Klikasz kombinację klawiszy CTRL + R albo menu “Image” a nastęnie opcję “Resize/Resample”. W oknie, które się otworzy w miejscu “Set new size”, następnie “width” czyli szerokość należy wpisać nowy rozmiar np. 1920. Drugi wymiar uzupełni się automatycznie. Poniżej w miejscu “Units” ma zostać zaznaczone “pixels”.

Można też wybrać z sekcji obok nowy rozmiar i potestować różne rozwiązania.

Następnie klikasz przycisk ok, a to okienko się zamknie. By zapisać efekty zmiany rozmiaru należy na klawiaturze wcisnąć kombinację klawiszy CTRL + S. W oknie, które się otworzy (zobacz poniżej), można ustawić jeszcze raz jakość zapisywania (wartość należy testować, w przypadku tego zdjęcia było to 75). Następnie kliknąć “Zapisz”.

I to tyle! Twoje zdjęcia są zoptymalizowane. Możesz je teraz dodać do swojego WordPressa — do biblioteki mediów i używać na Twojej stronie WWW.

Jeśli jednak wiesz, że nie chcesz się bawić optymalizacją swoich zdjęć i wolisz oddać to zadanie innym — jesteś w dobrym miejscu. Z chęcią Ci pomogę – wystarczy, że do mnie napiszesz! Od niedawna mam w swojej ofercie również godziny rozwojowe, które możesz sprawdzić tutaj: