galeria zdjęć a oryginalny rozmiar zdjęcia i czas ładowania strony

1

Tworzę stronkę, na której znajduje się galeria zdjęć. Układ kafelkowy, zdjęcia ułożone jako flex i wrap. Czyli całość jest responsywna. Zdjęcia okrojone do wymiarów typu 200 na 300 px, a w rzeczywistości mają znacznie więcej (każde waży ponad 1 MB). Przy ładowaniu strony chwilę schodzi, zanim całość się pokaże. No to myślę zrobić tak:

  • utworzyć na serwerze 2 katalog (zdjęcia małe i zdjęcia duże)
  • w galerii wyświetlają się (czyli się ładują) zdjęcia z katalogu zdjęcia małe
  • po kliknięciu na zdjęcie wyświetla się (jako okno modalne) zdjęcie z "dużego" katalogu

Dobrze myślę, tak to się "powinno" robić?

2

Zasadniczo odkryłeś coś, co się od 20 lat (a może i więcej) stosuje ;)

Tak, trzymanie miniaturek na potrzeby pokazywania ich w wersji zmniejszonej jest bardzo dobrym pomysłem.
W ten sposób obrazek zmniejszasz tylko jeden raz, więc nie marnujesz CPU przy każdy wyświetleniu strony. Tak samo nie marnujesz transferu i czasu - bo wysyłasz miniaturki, a nie całe obrazki.

Plusem jest także to, możesz taka miniaturkę wygenerować automatycznie, ale równie dobrze możesz ją wrzucić samodzielnie. W ten sposób możesz ją trochę wykadrować, zmniejszyć w programie do obróbki grafiki (lepsza jakość), możesz poprawić ostrość czy kontrast.

Jedynie musisz pamiętać o tym, żeby podczas jakichkolwiek operacji na "dużych" plikach także poprawić wersje mini, bo inaczej może pojawić się problem taki, że miniaturka pokazuje coś, co nie ma żadnego związku z dużym plikiem.

1

Napisałem też skrypt w PHP, który przy każdym odświeżeniu strony "łapie" każde zdjęcie w katalogu, a następnie jego nazwę wrzuca w znacznik img. Czyli dodanie lub usunięcie zdjęcia nie wymaga dłubania w HMTL, wystarczy wrzucić zdjęcie do katalogu. To też jest "okej"?

1

Co do skryptu przeszukującego dysk - póki odświeżeń masz mało, a zdjęć też niewiele to spoko. Ale zrób eksperyment - wrzuć tam z 300-500 obrazków, kazdy po 1-2MB, a potem wciśnij i przytrzymaj klawisz F5. I (jeśli masz taką możliwość) popatrz na statystyki zużycia CPU oraz I/O na serwerze.

Zasada jest taka - jeśli można, to staraj się cachować co się ta, tworzyć miniaturki, nie wykonywać bezsensownych operacji w stylu wczytywanie czy skalowanie obrazków, których można uniknąć. Póki ruch masz niewielki to może nie odczujesz tego, ale za jakiś czas wszystko może zacząć zwalniać i wtedy będzie panika i przepisywanie wszystkiego na szybko.

0

Tematyka strony (tworzę to na potrzeby firmy) jest tak niszowa, że nie spodziewam się więcej jak 50 wyświetleń na miesiąc. Samych zdjęć będzie około 100. Raczej to podzielę na kategorie, a nie jedna strona ze 100 miniaturkami.

1

nie spodziewam się więcej jak 50 wyświetleń na miesiąc

Jeżeli jesteś pewien że ruch będzie na poziomie 1-2 wejścia dziennie to możesz śmiało to wszystko o czym pisałem olać ;)

0

Olać to może nie - cennej wiedzy i doświadczenia nigdy za wiele.

1

Ale nie ma sensu wdrażać czegoś tylko po to, żeby coś wdrożyć - jeśli nie spowoduje to żadnych realnych korzyści, ale za to stracisz czas plus jeszcze jest ryzyko, że coś pochrzanisz i pojawią się potem problemy wymagające dalszych napraw.

Pamiętaj - Done is better than perfect. Pewnie masz ważniejsze rzeczy do zrobienia, niż tracenie czasu na zmiany w jakiejś galerii, która się wyświetli 2x dziennie.

1

Chodzi mi o to, że tak czy inaczej dzięki tej dyskusji coś w głowie zostanie i być może za jakiś czas z tego korzystam :)

1
kosmonauta80 napisał(a):

Napisałem też skrypt w PHP, który przy każdym odświeżeniu strony "łapie" każde zdjęcie w katalogu, a następnie jego nazwę wrzuca w znacznik img. Czyli dodanie lub usunięcie zdjęcia nie wymaga dłubania w HMTL, wystarczy wrzucić zdjęcie do katalogu. To też jest "okej"?

Zasadniczo OK, ale skoro masz już taki skrypt, to lepiej wywoływać go raz niż przy każdym otwieraniu galerii.
Zrób sobie np. ukrytą podstronę pt: analiza galerii, na której będzie skrypt analizujący zawartość jej katalogów i zapisujący dane o znalezionych zdjęciach do pliku, z którego to pliku lub plików będą później korzystać skrypty wyświetlające zdjęcia. Przy okazji możesz tam zaimplementować podstawowy "self test" galerii, sprawdzający czy każda miniaturka ma duży odpowiednik a każdy duży odpowiednik miniaturkę, czy nie ma pustych katalogów itp.

0

Pozostaje jeszcze kwestia czy te zdjęcia musza mieć po 1-2MB, wrzuć sobie kilka w https://tinypng.com i zobacz bo może się okazać, że będa zajmowały po 0,6MB - 1,3MB

1 użytkowników online, w tym zalogowanych: 0, gości: 1