Jak połączyć obrazy na stronę internetową

Połączyć obrazy czy pokazać je osobno?

Kolaż łączy kilka obrazów w jednym pliku. Może zwięźle przedstawić projekt lub pokazać temat obok przydatnego szczegółu. Zdjęcia powinny odpowiadać na wspólne pytanie, na przykład jak wygląda gotowa kuchnia i jak działają zastosowane w niej rozwiązania do przechowywania.

Pokazuj obrazy osobno, gdy każdy potrzebuje własnego opisu, linku lub dokładnego obejrzenia. Galeria produktu pozwala przyjrzeć się poszczególnym widokom zamiast oglądać je w małej siatce.

Kolaż zachowuje układ po zmniejszeniu. Obrazy dodane osobno w edytorze strony mogą na telefonie ustawić się jeden pod drugim; połączone w jeden plik pozostają na swoich miejscach. Układ jest przewidywalny, ale strona ma mniej możliwości wyświetlenia każdego zdjęcia w użytecznym rozmiarze.

Wybierz obrazy, które wnoszą różne informacje

Od dwóch do czterech obrazów to praktyczny punkt wyjścia do przedstawienia projektu. Każdemu nadaj rolę: widok ogólny pokazuje kontekst, a zbliżenie ujawnia cechę, którą inaczej trudno dostrzec. Dwa niemal identyczne widoki ogólne zwykle mówią mniej niż widok ogólny i przydatny szczegół.

Szukaj pasującego do siebie oświetlenia i kolorów. W porównaniu przed i po używaj podobnych kątów, kadrów i skali, aby ułatwić ocenę zmiany. Unikaj przycinania, które ukrywa istotną różnicę. Nasz poradnik wyboru obrazów na stronę wyjaśnia, co powinien przekazywać każdy obraz.

Wybierz układ pasujący do obrazów

W układzie trzech obrazów Pixilo pierwszy jest duży i znajduje się po lewej, a dwa kolejne po prawej, jeden nad drugim. Zmień kolejność, aby wybrać zdjęcie, które dostanie najwięcej miejsca. Zwykła siatka wypełnia się od lewej do prawej, a następnie od góry do dołu. Niewypełnione pola pokazują wybrane tło.

Dopasuj kształt kolażu do pól zdjęć

Szerokość i wysokość kolażu określają kształt jego pól. Kwadratowy kolaż nie zawsze daje kwadratowe pola: przy dwóch obrazach obok siebie każde pole jest pionowe. Siatka z dwoma rzędami i dwiema kolumnami daje pola zbliżone do kwadratu, jeśli odstępy i marginesy są małe.

Przy dwóch pionowych zdjęciach obok siebie wypróbuj wyższy kolaż, aby pola pozostały pionowe. Szeroki, niski kolaż przy wypełnianiu pól odcina więcej u góry i u dołu. Przy dwóch poziomych zdjęciach w jednym rzędzie szerszy kolaż może zachować większą część każdej sceny.

Zacznij od miejsca dostępnego na stronie i wypróbuj układ oraz kształt pasujące do zdjęć. Jeśli strona wymaga stałego kształtu, zachowaj go i zmień układ lub wybór obrazów. W Pixilo odblokuj proporcje, aby zmienić kształt. Zablokuj je ponownie, gdy chcesz zmienić tylko rozmiar, zachowując proporcje.

Pokazać cały obraz czy wypełnić pole?

Pokaż cały obraz zachowuje wszystkie krawędzie, ale może pozostawić miejsce wokół zdjęcia. To przydatne dla logo, diagramów i zdjęć produktów, w których przycięcie usunęłoby ważną informację.

Wypełnij pole przycina obraz do jego pola bez rozciągania. Siatka zdjęć ma dzięki temu równe krawędzie, ale trzeba sprawdzić, co znika. Wybierz każdą miniaturę i przesuń kadr tak, aby ważny temat pozostał widoczny.

Jeśli pole nie mieści jednocześnie twarzy i czynności obok niej, wypróbuj inny kształt lub układ, pokaż cały obraz albo wybierz inne zdjęcie. Przesuwanie kadru nie pozwoli zmieścić wszystkich części szerokiej sceny w wąskim polu. Użyj najpierw narzędzia do przycinania, jeśli chcesz dokładniej wykadrować oryginał, a potem sprawdź, jak pasuje do kolażu.

Oddziel zdjęcia odstępami

Niewielki odstęp ułatwia rozróżnienie sąsiednich zdjęć. Margines zewnętrzny tworzy ramkę wokół kolażu, ale zabiera też miejsce obrazom. Zachowaj umiar w obu ustawieniach, gdy kolaż ma trafić do wąskiej kolumny. Odstępy i margines zmniejszają się wraz z obrazem.

Wybierz tło pasujące do zdjęć i strony. Widać je w odstępach, marginesach i wolnych miejscach przy obrazach, które nie wypełniają pól. Zmiana koloru lub wybranie przezroczystości nie usuwa tła, które już jest częścią zdjęcia.

Połącz obrazy w Pixilo

1. Otwórz narzędzie do łączenia obrazów i wybierz pliki JPG, PNG lub WebP.
2. Wybierz układ i ustaw kolejność strzałkami pod miniaturami.
3. Ustaw szerokość i wysokość całego kolażu, razem z odstępami i marginesem zewnętrznym.
4. Pokazuj całe obrazy lub wypełnij nimi pola. Przy przycinaniu wybierz każdą miniaturę i dopasuj położenie kadru. Suwaki są dostępne tylko w kierunkach, w których obraz jest przycinany.
5. Ustaw odstępy, margines zewnętrzny oraz kolor lub przezroczystość tła.
6. Pobierz PNG, sprawdź jakość i przygotuj wersję do publikacji.

Przycisk Dodaj obrazy pozwala dołączyć zdjęcia bez utraty kolejności, kadrów i ustawień. Zastąp obrazy zastępuje wybrany zestaw. Układ jednego dużego i dwóch małych obrazów wymaga dokładnie trzech zdjęć; dodanie czwartego przełącza go na siatkę.

Przykład: cztery zdjęcia gotowej kuchni

Firma remontowa chce zwięźle przedstawić realizację na stronie projektu. Wybiera widok całego pomieszczenia, wnętrze szafki, szczegół blatu i oświetlenie nad nim. Każde zdjęcie pokazuje inny aspekt tej samej ukończonej pracy.

Firma zaczyna od siatki 2 × 2, aby pokazać wszystkie cztery aspekty. Gdyby najważniejszym argumentem był widok ogólny, układ trzech obrazów mógłby dać mu więcej miejsca, z dwoma szczegółami obok i czwartym zdjęciem w innym miejscu strony.

Strona wyświetla kolaż o szerokości do 600 pikseli. W tym przykładzie wyeksportuj go w wymiarach 1200 × 800 pikseli, z odstępami 16 pikseli, marginesem zewnętrznym 24 piksele i białym tłem. Plik jest dwa razy szerszy od widoku na stronie, aby dostarczyć więcej szczegółów ekranom o większej gęstości pikseli. To przykładowe ustawienia, a nie wymagany rozmiar dla każdej strony. Nasz poradnik rozmiarów obrazów na stronach wyjaśnia, jak dobrać wymiary.

Wypełnij pola i umieść najpierw widok ogólny, a następnie szafkę, blat i oświetlenie. Dopasuj każdy kadr, aby pokazać cechę, którą zdjęcie ma wyjaśniać.

Przy szerokości wyświetlania 360 pikseli na telefonie każde zdjęcie ma tu tylko około 170 pikseli szerokości. Szafka i lampy nadal są rozpoznawalne, ale załóżmy, że połączenie blatu jest za małe do oceny. Wyjmij to zdjęcie z kolażu i pokaż osobno w większym rozmiarze. Ułóż pozostałe trzy zdjęcia tak, aby widok ogólny był głównym obrazem. Samo zwiększenie wymiarów eksportu nie dałoby połączeniu więcej miejsca na stronie.

Sprawdź kolaż w mobilnym układzie strony

Obejrzyj podgląd strony w szerokości komputera i telefonu bez powiększania. Sprawdź, co odbiorca naprawdę zrozumie: czy porówna dwa wykończenia, zobaczy rozwiązanie do przechowywania lub prześledzi sekwencję? Rozpoznanie ogólnego tematu nie wystarczy, gdy istotny szczegół zniknął.

Sprawdź obraz na stronie, a nie tylko pobrany plik. Motyw strony może dodatkowo go przyciąć do stałego obszaru. Zmień ten obszar lub ustawienia wyświetlania, jeśli odcinają część kolażu.

Jeśli układ jest zbyt ciasny, uprość go lub pokaż zdjęcia osobno. Jeśli kreator strony obsługuje inny obraz dla urządzeń mobilnych, przygotuj wersję z mniejszą liczbą zdjęć lub układem pionowym. Nasz poradnik obrazów responsywnych wyjaśnia tę metodę.

Zachowaj nagłówki i ważne oznaczenia jako tekst strony. Tekst wewnątrz obrazu zmniejsza się razem z nim i trudniej go aktualizować. Dodawaj objaśniające podpisy w edytorze strony.

Dodaj podpis i użyteczny tekst alternatywny

Podpis może wskazać projekt i wyjaśnić kolejność zdjęć. Dla czterech zdjęć kuchni: „Ukończony remont kuchni. Od lewego górnego rogu zgodnie z ruchem wskazówek zegara: widok ogólny, wysuwana szafka, oświetlenie blatu i szczegół blatu”. Popraw opis, jeśli przesuniesz lub usuniesz zdjęcie.

Informacyjny kolaż wyeksportowany do jednego pliku wymaga tekstu alternatywnego dla całości. Tutaj może to być: „Wyremontowana kuchnia z wysuwaną szafką, równym połączeniem blatu i lampami nad blatem”. Opisz to, co istotne, zamiast pisać tylko „Kolaż czterech zdjęć”.

Jeśli obrazy przedstawiają szczegółowe porównanie, podaj najważniejsze różnice w tekście obok, zamiast próbować zmieścić całe wyjaśnienie w tekście alternatywnym. Wskazówki W3C dotyczące złożonych obrazów wyjaśniają, jak połączyć krótki tekst alternatywny z pełniejszym opisem. Nasz poradnik tekstów alternatywnych i nazw plików pomaga pisać opisy dopasowane do strony.

Przygotuj plik na stronę

Pixilo zapisuje kolaż jako PNG, zachowując przezroczystość i nie dodając kompresji stratnej przy eksporcie. Nie przywraca to szczegółów brakujących w zdjęciach źródłowych. Mały obraz może stracić ostrość przy powiększaniu do rozmiaru pola, zwłaszcza po ciasnym kadrowaniu. Obejrzyj każde zdjęcie w pobranym kolażu. Jeśli jedno jest wyraźnie mniej ostre od pozostałych, użyj większego oryginału lub mniejszego pola.

Kolaż złożony głównie ze zdjęć może dać duży plik PNG. Użyj PNG na WebP lub, jeśli nie potrzebujesz przezroczystości, PNG na JPG, aby przygotować kopię na stronę. Porównaj rozmiar pliku i widoczną jakość z PNG. Przy ustawianiu jakości przyglądaj się drobnym szczegółom i krawędziom: najmniejszy plik nie pomoże, jeśli ukryje cechę, którą chcesz pokazać.

Jeśli tło strony ma prześwitywać przez obraz, zachowaj wersję obsługującą przezroczystość. JPG tego nie umożliwia. Nasz poradnik formatów obrazów na stronach szerzej omawia wybór formatu.

Wgraj wybraną wersję i upewnij się, że strona używa właściwego pliku oraz zamierzonych wymiarów. Zachowaj oryginalne zdjęcia do późniejszych zmian: zdjęć wewnątrz pobranego PNG nie można już przestawiać.