200vh background image / jak zoptymalizować i mieć dobrą jakość

pytanie zadane 15 października 2018 w HTML i CSS przez eric19972 Użytkownik (590 p.)
zmienione kategorie 15 października 2018 przez Arkadiusz Waluk

Witajcie, mam pewien dylemat. Otóż znalazłem taki projekt witryny - https://dribbble.com/shots/4839724-eos-io-Landing-page/attachments/1087080 i nie mam pojęcia jak to zrobić, ponieważ tło jest rozłożone na około 200vh. Bardzo fajnie to wygląda jak przesuwamy wielkie zdjęcie, które po czasie ładnie przemienia się w jakiś kolorek naszej strony. Jednak jak to zrobić od strony technicznej? Po pierwsze skąd wziąć takie zdjęcie, które po otrzymaniu height: 200vh; będzie miało naprawdę dobrą jakość, a druga sprawa, jeżeli już znajdziemy tak wysoką rozdzielczość zdjęcia, to jak to się ma do optymalizacji strony? Takie zdjęcie waży wtedy conajmniej 5 mb, a wiadomo że to dosyć dużo i znacznie opóźnia to załadowanie się strony. Widziałem wiele witryn zrobionych w taki sposób, więc musi być jakiś złoty środek. Co moglibyście podpowiedzieć? Z góry dzięki za wszelkie odpowiedzi :)

1 odpowiedź

odpowiedź 15 października 2018 przez shotokan Nałogowiec (39,660 p.)

Moim zdaniem nie ma żadnego złotego środka, albo dajesz słabsze zdjęcie (mniej ważące), albo dajesz np. preloader i też to ładnie wygląda.

komentarz 15 października 2018 przez eric19972 Użytkownik (590 p.)

A preloader działa tak, że wyłącza się dopiero po wczytaniu wszystkich danych strony? Nigdy tego nie robiłem, w sumie dobry pomysł, tylko żeby nie było że np. w JS ustawię, aby preloader trwał 3 sekundy, a po zgaśnieciu i tak strona będzie potrzebowała tych 2 sekund aby załadować olbrzymią grafikę

komentarz 15 października 2018 przez shotokan Nałogowiec (39,660 p.)

Preloadera nie ustawiasz na określony czas tylko sam trwa tyle czasu ile potrzeba na załadowanie całej zawartości strony. Proponuję poszukać gotowych rozwiązań preloaderów, jest tego sporo.