Dużo miniaturek obrazków na stronie, a szybkość ich ładowania i wczytywania strony, kompresja... jak?

[Aerografit]

Mam mały nietypowy problem. Mam stronę typu portfolio/galeria i sporo obrazków miniaturek. Galeryjka działa na skrypcie lightboxa. Nie mniej jednak mam dosyć sporo tych miniaturek i zauważyłem, że przy słabszym łączu dosyć dużo czasu mija zanim one się wszystkie wczytają. Jak można byłoby rozwiązać ten problem? Czy dałoby rady zrobić coś takiego, że tylko część ich się ładuje, a pozostała część dopiero jak zjedziemy niżej suwakiem? Albo że pozostała część jest ukryta (jakaś formuła CSS) i po kliknięciu "pokaż więcej" odsłania się reszta? 

Z tym, że podkreślę, że mam w tej galerii filtry (klikasz i pozostają tylko wybrane realizacje konkretnej kategorii) i zależałoby mi na tym by to zostało... i w tym cały problem, który nie wiem jak ugryźć

 

Ewentualnie: Niby każda miniaturka ma po jakieś ok. 33kb, rozmiar obrazku 200x200px. Czy jest możliwość skompresowania ich jeszcze bardziej? Jeśli tak to jakim programem?

 

Tutaj link do galerii, o którą chodzi: https://www.aerografit.pl/aerograf.html

[TerazTop]

Photoshop -> Zapisz dla internetu

 

Przy zachowaniu bardzo wysokiej jakości możesz osiągnąć 12-13kb dla jednej miniatury. Jak zejdziesz do średniej jakości to nawet 8kb.

 

Tutaj masz podgląd dla bardzo wysokiej jakości, waga 13,54kb:

https://i68.tinypic.com/259bzvt.jpg

[ar4]

Nie musisz posiadać PS. Możesz pobrac sobie ten program i przejechać wszystkie zdjęcia masowo (możesz zaoszczędzić nawet kilka MB):

https://css-ig.net/fast-image-optimizer

[baambaam]

a może lazyload?
https://www.appelsiini.net/projects/lazyload

[Aerografit]

Dzięki serdeczne za rady. Photoshop wystarczy, ale tego Fast Image Optimizera i LazyLoad też pewnie sprawdzę . 

 

A w kwestii "późniejszego ładowania się obrazków jak np. zjedziemy na dół" pomożecie coś? To tak na przyszłość gdyby nawet te 11kb to byłoby za dużo

[Aleksiejs]

 

A w kwestii "późniejszego ładowania się obrazków jak np. zjedziemy na dół" pomożecie coś? To tak na przyszłość gdyby nawet te 11kb to byłoby za dużo

 

Dostałeś odpowiedź posta wyżej - lazy load

[piotr.k]

Przy takiej ilości miniatur możesz dodatkowo pomyśleć też nad jakimś "niby cdnem", tworząc dodatkowe 2-3 subdomeny i z nich serwując statyczne pliki (obrazki, ewentualnie css, js, fonty) - zwiększy to ilość żądań przesyłanych jednocześnie, dodatkowo te subdomeny nie będą miały w nagłówkach ciastek więc wzrost szybkości wczytywania i jakaś oszczędność może być.

[Suchjy]

Cachowanie zdjęć i plików po stronie serwera i użytkownika też pomaga.

[stania.info]

oraz przelecenie jpegoptim przez ssh - daje najlepsze efekty,

 

 

[Aerografit]

Dzięki wszystkim za odpowiedzi. Ten Fast Image Optimizer chyba nie działa, albo mi nie działa, więc musiałem i tak wszystko ręcznie przeczesać photoshopem. Dobrze natomiast wiedzieć jak na przyszłość zapisywać zdjęcia . Swoją drogą znacie może jakiś program który masowo by zoptymalizował mi JPGi bez utraty jakości? Mógłby też przy okazji zmniejszać ich rozdzielczość. Swego czasu używałem do tego Eitbit Picture Resize, ale z brakiem utraty jakości niestety mało miał wspólnego... (a szkoda, bo tyle dobrych zdjęć się zepsuło)

[Suchjy]

@Aerografit, W photoshopie możesz sobie zrobić "akcje" - taki bind, nagrać swoje działania.

 

Otwierasz wszystkie pliki czy jakąś paczkę i zaczynasz nagrywanie działań: czyli klikasz plik > zapisz dla web > w jakosci ~50%, zamykasz plik i powielasz dla wszystkich z automatu. Szybko zoptymalizujesz duze ilosci obrazków.

 

Info o akcjach:

[Maksiulek]

Ło ludzie, Photoshopa brać tylko do kompresji obrazków ? XnView -> Narzędzia -> Konwertuj wiele plików i dajemy wytyczne co ma zrobić (zmiana wielkości, stopień kompresji i pełno innych opcji). Prosto i szybko. 

[baambaam]

@Aerografit

nie musi otwierac wszystkich na raz. otwiera jeden obrazek, nagrywa makro, potem plik>automatyzuj>sekwencja wsadowa

[ar4]

Dzięki wszystkim za odpowiedzi. Ten Fast Image Optimizer chyba nie działa, albo mi nie działa, więc musiałem i tak wszystko ręcznie przeczesać photoshopem. Dobrze natomiast wiedzieć jak na przyszłość zapisywać zdjęcia . Swoją drogą znacie może jakiś program który masowo by zoptymalizował mi JPGi bez utraty jakości? Mógłby też przy okazji zmniejszać ich rozdzielczość. Swego czasu używałem do tego Eitbit Picture Resize, ale z brakiem utraty jakości niestety mało miał wspólnego... (a szkoda, bo tyle dobrych zdjęć się zepsuło)

 

Jak to nie działa? Może nie przeczytałeś na stronie jak się go obsługuje? W skrócie:

Łapiesz zdjęcie (możesz całe foldery ze zdjęciami) i upuszczasz na pliku programu o nazwie: FastIO.cmd

Otwiera się czarne okienko (takie same jak w CMD) i wyskakują ci opcje do wyboru. Każda opcja określa stopień kompresji. Ja zawszy wybieram maksymalną, a więc klikam na klawiaturze liczbę 1 (jak masz 3 formaty w folderze to 3 razy będzie się pytam o rodzaj kompresji). W ten sposób skrypt mieli zdjęcia i automatycznie nadpisuje stare.

Cała filozofia...

Ps. daj znać czy testowo odpaliłeś skrypt i działa...

[stania.info]

Po cholerę się męczyć, i w ogóle coś robić? Masz dostęp do SSH ? Jedna linia kodu pod linuxa idziesz na kawę i masz wszystkie zdjęcia zoptymalizowane.

 

Poczytaj np tu w języku PL:
jacekjagusiak.pl/jak-zoptymalizowac-zdjecia-na-stronie/