Jump to content
Sign in to follow this  
Aerografit

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

Recommended Posts

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: http://www.aerografit.pl/aerograf.html

Share this post


Link to post
Share on other sites

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:

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

Sklep z usługami SEO: www.teraztop.pl/sklep

Oferujemy m.in.: linki z forów, zaplecza SEO, piramidy linków

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

 

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


Firia.pl - Blog pasjonatki wszystkiego co związane ze zdrowiem, odżywianiem oraz psychologią
Każdy czasem potrzebuje pięknych życzeń i wierszyków na najróżniejsze okazje - http://zyczeniowo.pl/ 

Czy zastanawiasz się nad tym gdzie możesz kupić spinki do koszuli? Odwiedź sklep internetowy https://riwia.pl/spinki-do-mankietow gdzie znajdziesz największy wybór spinek do koszuli. Większość osób uważa spinki do mankietów za dodatek tylko dla mężczyzn, ale my wykraczamy poza utarte schematy i przedstawiay Wam świat niezwykłych dodatków.

Share this post


Link to post
Share on other sites

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ć.

Share this post


Link to post
Share on other sites

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


baner-seostationv2.png

Share this post


Link to post
Share on other sites

oraz przelecenie jpegoptim przez ssh - daje najlepsze efekty,

 

 

  • Like 1

Czym się zajmuję: Tworzenie sklepów internetowych, projektowanie responsywnych stron www.
Polecam również dobry katalog znajdzfirme.org, który nigdy nie będzie śmieciową farmą linków.

 

Share this post


Link to post
Share on other sites

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)

Edited by Aerografit

Share this post


Link to post
Share on other sites

@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:

Edited by Suchjy

baner-seostationv2.png

Share this post


Link to post
Share on other sites

Ł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. 

Edited by Maksiu86

Doświadczone i pewne Biuro Rachunkowe Łódź. Na rynku od 1995 roku ! 

Share this post


Link to post
Share on other sites

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...


DAMTOX.PL - pozycjonowanie stron!

StolicaZdrowia.pl - Portal o zdrowiu

Tworzenie stron www - damtox.pl

Share this post


Link to post
Share on other sites

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/


Czym się zajmuję: Tworzenie sklepów internetowych, projektowanie responsywnych stron www.
Polecam również dobry katalog znajdzfirme.org, który nigdy nie będzie śmieciową farmą linków.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By M@rcus_F3X
      Cześć,
      Czy warto zrobić myk, aby powtarzające się na wielu podstronach obrazki np. w headerze strony miały inne opisy alt w zależności od podstrony na jakiej się znajdują? Czy może to mieć negatywny efekt?
    • By dkwd
      Sprzedam 25 zdjęć w usłudze Adobe Stock. 10zł / zdjęcie.
      Automatycznie odnowiła mi się usługa na 1 miesiąc, a obrazki nie są mi już potrzebne.
      Mogę także sprzedać komplet 25 zdjęć za 220zł.
       
      Subskrypcja kończy mi się 3 czerwca, także do 2 czerwca jest możliwość wykorzystania pakietu.
       
      Proszę o info priv lub mail kontakt (@) deniskozub.pl
    • By HeAdSOn
      Witam
       
      Jaki cms będzie najlepszy do zrobienia strony z cytatami , memami - głownie mają być to obrazki z cytatami.
      Czy polecicie jakiś. Czy są jakiegoś gotowe pluginy, moduły pomocne przy tworzeniu np edytora do wstawiania takich treści lub tworzenia rankignu uzytkowników i obrazków pod kątem Lubię to ? I zaznaczę że nie interesuje mnie skrypt tentego
    • By Aerografit
      Jaki polecacie darmowy hosting obrazków do celów typu: zamieszczanie zdjęć na forach i aukcjach?
      Zależy mi na tym by miał:
      - nieograniczony transfer, brak limitów i brak opłat
      - nieograniczony czas hostingowania obrazków (czyli nie że po 3 miesiącach zamiast zdjęcia widzę napis "file not found")
      - w miarę intuicyjna obsługa i możliwość szybkiego zamieszczania zdjęć (najlepiej hurtowo, bo zazwyczaj wystawiam na aukcjach dużo przedmiotów i potrzebuję dużo tych zdjęć wrzucić i zamieścić)
      - możliwość wybrania kodu z miniaturką jaka ma być wyświetlana
      - może nawet dodawać znak wodny do zdjęć
      - może po kliknięciu w miniaturkę otwierać duże zdjęcie na ich stronie.
       
      Póki co fajny był dla mnie fotosik, ale ten ich limitowany transfer to porażka. Obecnie korzystam z zapodaj.net ale tam można wrzucić max 5 plików na jeden rzut, przy czym każdy osobno i jak się wybierze jeden typ miniaturki to już nie da się go później zmienić na większy/mniejszy.
       
      Co polecacie?
    • By Aerografit
      Witam was serdecznie,
      Mam galerię z moimi realizacjami malowanymi aerografem i są one podzielone na kaski, motocykle, samochody, itp. Jak wiadomo tradycyjnie po kliknięciu w filtr "kaski" zostają nam wyświetlone tylko kaski itd. Problem w tym, że kiedy kliknę na którąś miniaturkę, żeby otworzył mi się duży obrazek i przeglądam wtedy je wtedy to i tak mi je wyświetla "normalnie" czyli ignoruje wybrany filtr (skrypt galerii to Lightbox). Generalnie wcale mnie to nie dziwi, że tak się dzieje i jest całkowicie zrozumiałe, bo webmaster ze mnie początkująco-hobbystyczny i najnormalniej w świecie po prostu wrzuciłem ten skrypt galerii do stronki bez większego przerabiania.
      Moje pytanie brzmi: czy jest jakiś prosty "myk" dzięki któremu jak kliknie się kaski to w galerii-screenie przewijając obrazki na boki również widzi się tylko to co przefiltrowane czyli kaski?
       
      Poniżej link do ów podstrony:
      http://www.aerografit.pl/aerograf.html Z góry przepraszam za brak profesjonalizmu w nazewnictwie, ale mam nadzieję, że wytłumaczyłem to w miarę zrozumiale. 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use Privacy Policy