Jak publikować zdjęcia na stronie

Kilka zaleceń, które pomogą Ci wygodniej i bezpieczniej publikować obrazy na stronie oraz zapewnić ich optymalne wyświetlanie dla odwiedzających.

Używaj adresów względnych

Zamiast pełnego adresu (np. https://mydomain.com/img/picture.jpg) używaj adresów względnych, czyli bez domeny (np. /img/picture.jpg):

jeśli w przyszłości zmienisz domenę swojej strony, wszystkie wcześniej dodane obrazy pozostaną dostępne, ponieważ przeglądarka automatycznie doda do adresów obrazów aktualną (nową) domenę i nie będzie próbowała wczytywać ich ze starej;
jeśli dodasz inne strony do swojego konta Web Systems Pro i będą one korzystały z tych samych zasobów, obrazy będą ładowane z każdej z tych domen - wszystkie Twoje strony będą wyglądały jak całkowicie niezależne od siebie.

Przygotuj obrazy w odpowiednich rozmiarach

Jeśli chcesz umieścić na stronie małe logo, lepiej przygotować je wcześniej w odpowiednich wymiarach w programie graficznym, zamiast liczyć na to, że przeglądarka i tak je zmniejszy (oczywiście to zrobi, ale strona będzie się ładować dłużej, co może nie spodobać się odwiedzającym).

Pamiętaj, że dla nowoczesnych ekranów o zwiększonej gęstości pikseli (Retina) warto publikować obrazy w podwójnej rozdzielczości (w pikselach), np. 800 pikseli zamiast 400, które wystarczyłyby dla standardowych ekranów.

Używaj odpowiednich formatów

Najlepiej używać formatów JPEG (do zdjęć), PNG (do elementów graficznych strony), WebP (dla szybkiego ładowania obrazów w przeglądarce). Formaty takie jak TIFF czy BMP nie są zbyt odpowiednie do użytku w sieci.

Aby przekonwertować obraz z jednego formatu na inny, nie wystarczy po prostu zmienić nazwę pliku. Na przykład zmiana nazwy picture.bmp na picture.jpg nie utworzy obrazu w formacie JPG - aby to zrobić, należy otworzyć plik w specjalnym edytorze graficznym (np. GIMP lub Adobe Photoshop) i zapisać/wyeksportować go w odpowiednim formacie.

Optymalizuj rozmiar

Ten sam obraz może wyglądać identycznie na stronie, ale mieć różny rozmiar pliku. To istotne, ponieważ rozmiar pliku wpływa na szybkość ładowania strony: im szybciej obrazy się wczytają, tym szybciej odwiedzający zobaczą zawartość, zamiast opuszczać stronę po kilku sekundach oczekiwania.

Aby zmniejszyć rozmiar plików graficznych, używaj specjalnych programów lub serwisów internetowych, takich jak squoosh.app czy tinypng.com.

Dodaj SEO

Obrazy na stronie również można zoptymalizować pod kątem wyszukiwarek: użytkownicy będą mogli znajdować obrazy na podstawie słów kluczowych, które następnie zaprowadzą ich na Twoją stronę.

W tym celu dodaj do elementów HTML <img> z obrazami atrybut alt="..." (w miejsce wielokropka wpisz odpowiedni tekst), np.:

<img src="/img/photos/electrical-switchboard-scheme-sb1.jpg" alt="Schemat rozdzielnicy elektrycznej">

Warto również dodać atrybut title="..." o podobnej treści - tekst ten pojawi się jako podpowiedź, gdy użytkownik najedzie kursorem na obraz.

Aby Twoje obrazy były lepiej widoczne w wyszukiwarkach takich jak „Google” i „Bing”, nazywaj pliki zgodnie z ich zawartością. Jeśli nazwiesz plik z obrazem schematu elektrycznego 123qwerty.jpg, raczej nie będzie to dobra optymalizacja SEO.

Wgraj na serwer od razu kilka obrazów

W ten sposób łatwiej się nimi zarządza:

Przygotuj wszystkie potrzebne obrazy na komputerze.
Wgraj wszystkie pliki jednocześnie na serwer.
Skopiuj adresy przesłanych plików i dodaj je do stron witryny.

Umieszczaj obrazy na swojej stronie

w sekcji „Witryna → Pliki”;
w aplikacji „Zdjęcia”;
w aplikacji „Pliki”.

Można również używać obrazów z innych stron www, o ile ich właściciele wyrażą na to zgodę. Jednak jeśli te strony przestaną działać lub przeniosą obrazy w inne miejsce (albo zmienią ich nazwy), Twoja witryna na tym ucierpi. Bezpieczniej jest przesłać wszystkie potrzebne obrazy do folderu na własnym serwerze (w koncie Web Systems Pro) - wówczas będą stanowiły integralną część Twojej strony.