Jak zmniejszyć i przygotować zdjęcia do strony internetowej?

Image Description
Bartłomiej Banaczyk
2 października 2022
Share:

Przy prowadzeniu szkoleń z obsługi naszych stron internetowych bardzo często napotykamy pytania dotyczące przygotowania plików graficznych do umieszczenia w witrynie. Czy muszą mieć konkretną rozdzielczość, jakość, wielkość - ogółem mówiąc - jak przygotować obrazy aby dobrze wyglądały na stronie internetowej?

Jakim programem zmniejszyć zdjęcia na stronę internetową?

Istnieje dziesiątki płatnych i bezpłatnych programów graficznych, które można wykorzystać do przygotowania obrazów do wykorzystania w internecie. Wprawieni użytkownicy prawdopodobnie użyją software ze stajni Adobe - jak Photoshop czy Lightroom. Istnieją jednak darmowe alternatywy, a od pewnego czasu jedną z nich polecamy naszym klientom szczególnie.

Mowa o darmowym "mini programie" PowerToys, który prezentuje się użytkownikowi bardziej jako wtyczka do Windowsa niż osobny program. Aplikacja jest produkowana przez Microsoft, i od systemu Windows 11 jest automatycznie instalowana w systemie. We wcześniejszych dystrybucjach Windowsa użytkownik musi zainstalować ją samodzielnie. 

Oficjalna strona aplikacji: https://learn.microsoft.com/en-us/windows/powertoys/ 

Dlaczego PoweToys? 

Bo jest prosty, szybki i skuteczny. Nie wymaga umiejętności obsługi programu graficznego. Po uruchomieniu chowa się do zasobnika na pasku start i nie przeszkadza użytkownikowi w pracy. Użycie go wymaga jedynie zaznaczenia obrazów, które chcemy zmniejszyć i kliknięciu na nich prawym klawiszem myszy. W menu program wczyta dodatkowe opcje. 

Po wybraniu opcji Zmień rozmiar obrazów wyświetlone zostanie okno, w którym należy zaznaczyć docelowy rozmiar obrazu oraz kilka dodatkowych informacji. 

Wybierz rozmiar - opcja ta pozwala wybrać nam do jakiej wielkości chcemy zmniejszyć nasze pliki graficzne. Rozmiar należy dostosować do potrzeb i miejsca, w którym chcemy osadzić obraz. Jeżeli jest to mała miniaturka używana jako ikona w aktualnościach wystarczająca będzie opcja "Mały". Jeżeli zdjęcie prezentowane będzie jako realizacje lub fotografia w galerii wybieramy Duży rozmiar obrazu. 

Zmniejszaj obrazy, ale nie powiększaj ich - funkcja ta określa czy program ma rozciągnąć mniejsze obrazy do rozmiaru wybranego w polu wyżej. Zalecamy zaznaczenie tego pola.

Ignoruj orientacje obrazów - zaznacz tą funkcję aby program zmniejszył proporcjonalnie zarówno obrazy poziome jak i pionowe.

Zmień rozmiar oryginalnych obrazów (nie twórz kopii) - Jeżeli chcesz zastąpić pliki w Twoim folderze nowymi - mniejszymi obrazami zaznacz tą opcją. Jeżeli chcesz, aby Power Toys zmniejszył zdjęcia, ale zachował oryginały pozostaw to pole niezaznaczone. 

Usuń metadane, które nie mają wpływu na renderowanie - Metadane to informacje przechowywane wraz z plikami graficznymi. Przy fotografiach zapisana jest w nich np data wykonania zdjęcia, model aparatu, parametry fotografowania itp. Jeżeli nie chcesz aby te informacje zostały zachowane przy zmniejszaniu obrazów - zaznacz to pole. 

Czy trzeba zmniejszać pliki przed wrzuceniem?

To zależy. Głównie od systemu, na którym oparta jest Twoja witryna. W darmowych open sourcowych rozwiązaniach jak WordPress, Joomla czy Drupal - funkcje te mogą działać w bardzo różnorodny sposób. W przypadku witryn opartych o cms.magico zmiana rozmiaru zdjęć w większości przypadków nie jest konieczna.

Dodawanie ikony do aktualności, realizacji, bloga czy produktów w sklepie internetowym nie wymaga wcześniejszego specjalnego przygotowania pliku. System cms.magico samodzielnie zmniejszy obraz, wykadruje go i przekonwertuje do formatu webm, który jest obecnym standardem optymalizacji plików graficznych w stronach internetowych. Większość pracy system wykona za Ciebie.

Może jednak zdarzyć się sytuacja, że wcześniejsze zmniejszenie plików będzie konieczne. Jeżeli Twoje obrazy będą bardzo duże, np oryginalne pliki zdjęć wychodzące z aparatu, może zdarzyć się sytuacja, w której serwer nie poradzi sobie ze zmniejszeniem tak dużego pliku. Niezbędne wtedy będzie wcześniejsze zmniejszenie go na komputerze i upload do cmsa nieco mniejszego obrazu. 

Czy warto zmniejszać obrazy przed uploadem?

Zdecydowanie tak. Nawet w sytuacji, kiedy cms.magico poradzi sobie ze zmniejszeniem Twojego obrazu korzystne jest mimo wszystko wcześniejsze pomniejszenie go na Twoim komputerze. System cms owszem zmniejsza obrazy, ale zachowuje jednocześnie na serwerze plik oryginalny. Nie jest on wyświetlany użytkownikom Twojej witryny, a jedynie przechowywany jest w formie kopi zapasowej. Zajmuje to jednak powierzchnie serwera, który wydzielony jest pod Twoje usługi. Korzystne jest zatem wcześniejsze zmniejszenie wgrywanego obrazu. 

W jakim formacie należy je zapisać?

Najlepszy format zdjęć, obrazów czy ilustracji wstawianych na stronę internetową to jpg lub webm. JPG to standardowy format zdjęć, i jeden z lepiej skompresowanych plików graficznych. Obrazy webm generowane są w naszym oprogramowaniu automatycznie.

Czy ważna jest rozdzielczość DPI/PPI?

Nie. W plikach przeznaczonych do internetu ważne są wymiary obrazu określone w pikselach (px). Obecny standard szerokości witryn to 1320px. Światowa, najczęściej używana rozdzielczość monitorów komputerowych to obecnie ekrany Full HD, czyli 1920x1080px. Szerokość ekranów smartfonów oscyluje zwykle w granicach 400px, a tabletów od 800 do 1200px. 

Na podstawie tych danych świetnie widać, że w standardowych sytuacjach nie ma potrzeby wgrywania na serwer plików większych niż 1920px.

O autorze

Image Description

Bartłomiej Banaczyk

Właściciel Agencji Kreatywnej Magico. W branży interaktywnej od 10 lat. Specjalista z zakresu marketingu interaktywnego oraz optymalizacji stron (SEO). W Magico zajmuje się kontaktami z klientami oraz wspieraniem ich działań marketingowych.