5 sposobów na optymalizację obrazów na stronie zespołu

Obecnie strony internetowe mogą wyświetlać się na setkach różnych rozmiarów ekranu, nawet w różnych orientacjach na tym samym urządzeniu (poziomo lub pionowo). Wyświetlacze, na których ludzie widzą Twoją witrynę, mogą mieć szerokość zaledwie kilkuset pikseli na urządzeniach mobilnych, do tysięcy pikseli na nowszych monitorach panoramicznych o wysokiej rozdzielczości.

Ponieważ nowe technologie zapewniały różne rozmiary ekranów, dzięki którym użytkownicy mogą zobaczyć Twoją witrynę, wymagało to również nowego sposobu myślenia o jej projektowaniu, który zapewniłby jej doskonały wygląd na każdym ekranie — dużym, małym, wysokim lub szerokim.

W tym miejscu w grę wchodzi koncepcja „responsywnego” projektowania stron internetowych!

Jak działa projektowanie responsywne

Strona responsywna jest zbudowana w taki sposób, że pozycja i rozmiar są „względem” przestrzeni, w której są przeglądane. Gdy Twoja witryna jest wyświetlana na różnych ekranach, dostosowuje się poprzez rozciąganie lub zmniejszanie; poruszanie się, aby dopasować się do dostępnej przestrzeni.

Każde zdjęcie, które prześlesz do swojej witryny Bandzoogle, rozciągnie się i skaluje w zależności od tego, jak duża jest „przestrzeń”, w której znajduje się zdjęcie.

W przypadku obrazów nagłówka jest to szczególnie ważne, ponieważ responsywne obrazy będą „dopasowywać się” jak najlepiej do ramki. Mniej pracy przy przycinaniu kilku zdjęć oznacza więcej czasu, no cóż, na odtwarzanie muzyki, prawda?

Przyjrzyjmy się pięciu sposobom optymalizacji obrazów w witrynie zespołu, aby uzyskać odpowiedni projekt.

1. Wybierz odpowiedni obraz

Projekt responsywny skaluje elementy strony, takie jak obrazy nagłówka, „proporcjonalnie” do oryginalnego rozmiaru pliku graficznego, którego używasz, i robi to „względem” miejsca, w którym znajduje się obraz na stronie.

Oznacza to, że proporcje obrazu są zachowywane na wszystkich urządzeniach, a obrazy zawsze będą starały się jak najlepiej „wypełnić” przestrzeń, w której się znajdują. Może to spowodować, że w obrazach nagłówka części obrazu będą „przycięte” — jest to nieuniknione w przypadku projektowania responsywnego, ale pomocne będzie wybranie obrazu, który dobrze przycina.

Artysta: Tragedia Ann

Komputer stacjonarny i panoramiczny

Na laptopie obrazy nagłówka będą skalowane w stosunku do szerokości ekranu. Na urządzeniu mobilnym obraz skalowałby się na podstawie wysokości ekranu.

Innymi słowy, twój obraz będzie zawsze skalowany w stosunku do najdłuższego boku przestrzeni.

Teraz wyobraź sobie to na ekranie o szerokości 1000 pikseli – ekrany komputerów stacjonarnych/laptopów są szersze niż wysokie i powiedzmy, że ten sam ekran ma również wysokość 570 pikseli (około 16:9 dla wielu wyświetlaczy).

W tym scenariuszu nasz obraz ma 1000 pikseli szerokości na tym wyświetlaczu, ale został przeskalowany do 900 pikseli wysokości, co oznacza, że ​​w przestrzeni, która ma tylko 570 pikseli wysokości, odcina on ponad 300 pikseli na górze i na dole zdjęcie. Zdjęcia bez głowy, ojcze!

Orientacja mobilna i pionowa

Wykonaj tę samą matematykę z przykładem ekranu mobilnego, który ma wysokość 600 pikseli – powiedzmy, że ten sam wyświetlacz ma tylko około 320 pikseli szerokości. Gdy obraz dostosuje się do tego wyświetlacza, ponad połowa obrazu zostanie odcięta po obu stronach (pamiętaj, że obraz zostanie zmniejszony do szerokości 667 pikseli na ekranie pionowym o wysokości 600 pikseli).

To dobry sposób na zirytowanie perkusisty na skraju zdjęcia zespołu, co może być zabawne! Ale nadal...

Zoptymalizuj, a następnie prześlij swoje pliki

Dobrą metaforą, której możesz użyć, jest wyobrażenie sobie, że jesteś w galerii sztuki oprawiającej obrazy - jeśli umieścisz krajobraz Moneta w ramie portretowej „Matka Whistlera”, ta ramka odetnie wiele naprawdę ładnych lilii wodnych z boku twój obraz.

W tym miejscu może to być trudne — twórcy witryn nie mogą przewidzieć obrazów, których chcesz użyć (lub tego, co jest na nich wyświetlane), ale selektywność w zakresie dodawania obrazów jest dobrym pierwszym krokiem.

Kilka prostych wskazówek, jak wybrać odpowiedni obraz do nagłówka:

• Unikaj używania obrazów, które zostały „blisko przycięte” — im więcej miejsca lub wypełnienia masz wokół „fokusa” obrazu, tym mniejsze prawdopodobieństwo, że ostrość zostanie odcięta na różnych wyświetlaczach.
  
• Używaj dużych obrazów – 2000 x 1800 w rozmiarze 72 dpi zwykle działa dobrze w przypadku większości motywów Bandzoogle i pomaga upewnić się, że obrazy wyglądają świetnie na każdym ekranie.
  
• Staraj się używać obrazów, które mają orientację zbliżoną do „kwadratu” — nie musi to być idealnie kwadratowy obraz, ale tak blisko, jak to tylko możliwe, aby uzyskać taką samą wysokość i szerokość obrazu, zwykle działa świetnie na każdym wyświetlaczu. Ta dodatkowa przestrzeń daje Ci swobodę, niezależnie od orientacji, w jakiej oglądana jest Twoja witryna.
  
• Staraj się unikać używania obrazów z tekstem lub logo na samym obrazie - zdecydowanie nie chcesz, aby ważny tekst lub Twoja marka zostały ucięte dla odwiedzających!
  
• Zamiast tego dodaj swoje logo w opcji „tytuł / logo” edytora motywów Bandzoogle. Następnie dodaj dowolny tekst w nagłówku do funkcji nagłówka wezwania do działania. W ten sposób ważne wiadomości nie zostaną odcięte przez krawędź wyświetlacza.

Artysta: Martin i James

2. Przytnij do swojego motywu

Jeśli masz już przesłane obrazy, Bandzoogle oferuje kilka świetnych narzędzi, dzięki którym wyświetlają się jeszcze lepiej!

Niektóre z naszych projektów szablonów wyświetlają „pełny ekran” podczas ładowania, mają regulowaną wysokość nagłówka, mogą wyświetlać obrazy nagłówka w ograniczonej przestrzeni, w różnych kształtach (np. szablon Spotlight), a nawet ustawiać obraz nagłówka jako tło Twoje strony (na przykład Slice).

Wypróbowanie różnych motywów z różnymi opcjami nagłówka jest łatwe — możesz zmienić projekt motywu za pomocą opcji „edytuj motyw” > „wyświetl motywy”, wybierz żądany motyw, dostosuj go w edytorze projektu, kliknij „zapisz” i opublikuj swój zmiany.

Zakładając, że motyw nie ustawia nagłówka jako pełnego obrazu tła strony, możesz również dostosować względne powiększenie i położenie dodawanych obrazów.

W opcji „edytuj treść” kliknij obraz nagłówka na karcie edycji treści, a następnie w edytorze nagłówka kliknij link „przytnij” pod miniaturą obrazu nagłówka.

Następnie możesz dostosować powiększenie za pomocą suwaka powiększenia i kliknąć/przeciągnąć obraz w odpowiednie miejsce.

3. Ustaw punkt centralny

Podczas przycinania obrazu nagłówka w edytorze nagłówków możesz również zauważyć małą niebieską kropkę nad obrazem – służy to do ustawienia „punktu centralnego”. Zapewnia to, że gdziekolwiek ta kropka jest umieszczona na obrazie, zawsze będzie „ostry”, bez względu na rozmiar lub orientację obrazu.

Może to być bardzo przydatne w przypadku obrazów, w których „ostrość” przesłanego obrazu nie jest całkowicie wyśrodkowana — kliknięcie/przeciągnięcie punktu ogniskowego nad ogniskiem obrazu zapewni, że bez względu na to, co zostanie odcięte na różnych ekranach, ostrość będzie z przodu i na środku .

Po ustawieniu przycinania, powiększania i punktów centralnych wystarczy kliknąć „zapisz”, aby zastosować przycięcie, a następnie ponownie kliknąć „zapisz” w edytorze nagłówków, aby zastosować zmiany.

Artysta: Anna Bassy

4. Dostosuj wysokość mobilnego nagłówka

Granica między tym, czym jest ekran mobilny, a ekranem niemobilnym, cały czas się zaciera – weźmy na przykład tablet. Nie na tyle duży, by służyć jako „pulpit”, ale nie na tyle mały, by zmieścić się na ekranie telefonu komórkowego.

Gdy przeglądasz witryny na wielu tabletach w orientacji poziomej, witryna może wyglądać tak samo, jak na ekranie komputera stacjonarnego lub laptopa. Obróć tablet bokiem, jak „portret”, a wszystko może się zmienić – zmniejszenie szerokości ekranu może pokazać więcej elementów „mobilnych” bliższych temu, co możesz zobaczyć na telefonie.

Większość motywów Bandzoogle jest domyślnie ustawiona tak, aby wyświetlać nagłówek „pełnej wysokości” na ekranach zorientowanych pionowo – może to być problematyczne, jeśli obraz nagłówka zawiera fokus na lewą i prawą stronę.

W tym celu, pod warunkiem, że Twój motyw nie ustawia nagłówka jako obrazu tła dla Twoich stron, możesz włączyć opcję „niestandardowa wysokość nagłówka mobilnego” w ustawieniach „nagłówka” na karcie „edytuj motyw”.

Po włączeniu kliknij ikonę „Podgląd mobilny” w edytorze motywów i dostosuj suwak „Wysokość nagłówka (urządzenie mobilne)” — może to pomóc w dostosowaniu miejsca, w którym znajduje się obraz, aby lepiej pasował do proporcji obrazu i pokazać więcej obraz. Po prostu kliknij „zapisz” po ustawieniu tego!

5. Dodaj filtry

Na koniec możesz dodać naprawdę niesamowite wibracje do obrazów nagłówka, ustawiając filtr. Wydobądź bluesa, nadaj swojemu zdjęciu bardziej filmowy wygląd z lat 70. lub wybierz czarno-białą stylistykę vintage. Tutaj jest wiele opcji!

Po prostu kliknij kartę „edytuj motyw” w panelu sterowania Bandzoogle, a pod opcjami „nagłówka” możesz wybrać filtr prefabrykowany lub utworzyć własny niestandardowy styl filtra.

Artysta: Carleen Williams

Chociaż czasami może to być trochę owijanie głowy, ogólny konsensus z projektantami stron internetowych jest taki, że responsywność jest lepszym sposobem na poruszanie się po witrynie.

Gwarantuje to, że Twoja witryna będzie wyglądać świetnie i będzie czytelna na każdym dostępnym ekranie zarówno teraz, jak i w przyszłości, a witryny takie jak Google będą Cię lepiej oceniać, jeśli Twoja witryna korzysta z dobrych praktyk responsywnych.

Na dłuższą metę jest to również świetna oszczędność czasu dla tych, którzy zarządzają własnymi witrynami - znajomość najlepszego sposobu optymalizacji obrazów i treści to pierwszy krok, a Bandzoogle zajmie się resztą!

Stwórz muzyczną stronę internetową z responsywnymi obrazami za pomocą kilku kliknięć. Zbuduj swoją stronę internetową z Bandzoogle już dziś!