JAK PRZYGOTOWAĆ I ZOPTYMALIZOWAĆ ZDJĘCIA NA STRONĘ INTERNETOWĄ

Optymalizacja zdjęć na stronę internetową jest istotnym czynnikiem wpływającym na szybkość ładowania i ogólną wydajność witryny. Redukcja rozmiaru plików graficznych może znacząco skrócić czas ładowania strony, co korzystnie wpłynie na doświadczenie użytkownika. Warto dbać o to, aby zdjęcia były odpowiednio skompresowane bez utraty jakości wizualnej.

Dla użytkowników mobilnych optymalizowane zdjęcia są szczególnie istotne, ponieważ mogą one mieć ograniczony dostęp do szybkiego internetu. Optymalizacja zdjęć może również wpłynąć na lepszą użyteczność strony, poprzez poprawę doświadczeń użytkownika i zmniejszenie wskaźników opuszczenia strony.

Rozmiar zdjęć odnosi się do dwóch głównych aspektów: wymiarów w pikselach oraz wielkości pliku wyrażonej w kilobajtach (KB), megabajtach (MB) lub innych jednostkach.

• Wymiary w pikselach: To liczba pikseli szerokości i wysokości zdjęcia. Na przykład, obraz o rozmiarze 1920x1080 pikseli ma 1920 pikseli szerokości i 1080 pikseli wysokości. Wymiary te mają wpływ na to, jak duży będzie obraz na stronie internetowej, zarówno pod względem powierzchni zajmowanej na ekranie, jak i szczegółowości.
• Wielkość pliku: Oznacza, ile miejsca zajmuje zdjęcie na dysku lub serwerze. Większy plik może oznaczać lepszą jakość obrazu, ale jednocześnie dłuższy czas ładowania na stronie internetowej. Wielkość pliku zależy nie tylko od wymiarów, ale także od formatu pliku (JPEG, PNG, WebP itp.) oraz stopnia kompresji.

Jaki jest optymalny rozmiar dla zdjęć na stronę internetową wyrażony w pikselach?

To zależy od tego, gdzie to zdjęcie się znajduje i jaką część tej strony wypełnia.

• Zdjęcie startowe na stronie głównej: Takie zdjęcie najczęściej wypełnia całą szerokość, a zatem dla monitora o wielkości HD (1920x1080 pikseli), aby zdjęcie zajmowało całą szerokość ekranu, jego optymalny rozmiar powinien wynosić 1920 pikseli szerokości. Wysokość zdjęcia zależy od proporcji obrazu, ale maksymalnie będzie to 1080 pikseli. Z praktyki wiadomo, że obniżenie tych parametrów do rozmiaru: 1800 x 1000 pikseli też będzie poprawne, a dodatkowo pozwoli nam zaoszczędzić jeszcze nieco bardziej na transferze.
• Zdjęcia wewnątrz strony w układzie 2-kolumnowym: Jeśli na stronie występują sekcje 2-kolumnowe, to wówczas zdjęcie (biorąc pod uwagę jeszcze marginesy) zazwyczaj osiąga maksymalną szerokość 900 pikseli. W takim przypadku dobrze sprawdzi się rozmiar 900 x 600 pikseli
• Rozmiary małych ikon/grafik: W tym przypadku zazwyczaj dobrze sprawdzi się rozmiar 400 x 400 pikseli.
• Galeria zdjęć: Jeśli zdjęcia w galerii są klikalne i po kliknięciu powiększają się na całą szerokość monitora, to sprawdzi się rozmiar o maksymalnej wysokości zdjęcia 1000 pikseli, a nawet 900 pikseli i szerokości takiej jaka będzie wynikała z proporcji zdjęcia.
• Galeria zdjęć: Jeśli zdjęcia w galerii nie są klikalne i nie powiększają się na całą szerokość monitora, to sprawdzi się rozmiar o szerokości 900 pikseli, a nawet często 600 pikseli też będzie rozmiarem wystarczającym.
• Inne często występujące rozmiary: 900 x 900 pikseli, 1800 x 600 pikseli itp.

Jeśli chodzi o wagę zdjęć wyrażoną w kB, to poruszamy się tu jedynie w przedziałach orientacyjnych, gdyż jedno zdjęcie o wielkości 600 x 900 pikseli i przy tej samej kompresji może mieć przykładowo 80 kB, a inne o tym samym rozmiarze i dokładnie tej samej kompresji może mieć już np. 120 kB. Wszysto zależy bowiem od szczegółowości samego zdjęcia, od tego jaki mamy obraz.

Przykładowe rozmiary zoptymalizowanych zdjęć:

• Zdjęcie 1800 x 1000 pikseli: 80 kB - 200 kB
• Zdjęcie 900 x 600 pikseli: 30 kB - 80 kB

Poniżej znajduje się link do edytora:

• Photopea: Edytor ten umożliwia edycję zdjęć bez konieczności instalacji na komputerze. Wystarczy wejści na poniższą stronę: link Photopea

Przenosimy zdjęcie do edytora Photopea

Chwytamy myszką interesujące nas zdjęcie i trzymając zdjęcie za pomocą lewego przyciku myszy, przenosimy zdjęcie do edytora.

Wybieramy opcję kadrownania

Opcję tą znajdziemy po lewej stronie w pasku z narzędziami.

Wybieramy stały rozmiar

Po wcześniejszym wybraniu opcji kadrowania, w górnym polu wyboru ustawiamy: STAŁY ROZMIAR.

Ustawiamy szerokość i wysokość zdjęcia

W kolejnych 2 polach ustawiamy najpierw szerokość zdjęcia wyrażoną w pikselach, a następnie wysokość zdjęcia w pikselach.

W naszym przykładzie ustawiamy szerokość: 900 pikseli i wysokość: 600 pikseli.

Zaraz potem za pomocą myszki chwytamy rogi zaznaczenia i ustalamy interesujący nas kadr.

Na koniec całość zatwierdzamy poprzez kliknięcie ENTER.

Kontrolujemy otrzymaną wielkość zdjęcia

Aby upewnić się, że wszystko zadziałało poprawnie, sprawdzamy rozmiar zdjęcia.

Po najechaniu na zakładkę OBRAZ, wybieramy ROZMIAR OBRAZU.

Odczytujemy uzyskaną szerokość i wysokość

Pozostaje wyeksportować przycięte w powyższy sposób zdjęcie

Wybieramy zakładkę PLIK, a następnie EKSPORTUJ JAKO.

Wybieramy JPG

Ustawiamy siłę kompresji

Za pomocą suwaka ustawiamy jakość zdjęcia na 49%.

Przenosimy zdjęcia do przygotowanego wcześniej folderu

Wyeksportowane zdjęcia odnajdziemy w folderze POBRANE.

Warto więc przygotować sobie folder, do którego przeniesiemy gotowe zdjęcia, aby następnie dodać je do naszej strony internetowej.