Witam,

Przymierzam się do pierwszego projektu strony typu RWD. Poguglałem tu i tam i wszystko jest w miarę jasne... Kwestia delikatnej zmiany sposobu myślenia. Ale mam jedno pytanie dotyczące zdjęć na stronie. Dajmy na to, że jest sobie taka fotka na stronie zagnieżdżona gdzieś w tekście o szerokości np. 600px. Przyjmijmy też, że plik ma 200kb. I teraz delikwent otwiera stronę na jakimś małym mobilu o szerokości ekranu dajmy na to 320px. Pytanie co z tą fotką zrobić, aby zmniejszyć ją do takiego rozmiaru? Można oczywiście zrobić ją procentowo w CSS, etc. Ale po co ładować na takie małe urządzenie tyle KB? Problem pogłębi się jeśli na stronie pojawi się kilkanaście takich fotek...

Pytanie więc, czy robić kilka wersji fotek pod różne progi rozdzielczości i wtedy dopasowywać już konkretny rozmiar do konkretnego ekranu? W sumie takich progów wg bootstrapa jest ~5-6 także to nie jakiś duży problem... Tylko czy takie podejście ma sens? Na pewno będzie to mniej KB do załadowania na mobilkach, a na tym śmiesznym polskim LTE wolę jeszcze nie polegać... Pozdrawiam, ŁF.

Możesz przecież przepuścić żądanie do obrazka przez plik php który go odpowiednio przeskaluje i zwróci odpowiednio mniejszy, a zarazem lżejszy plik dla urządzenia mobilnego. Ewentualnie przegenerować je raz i trzymać wszystkie na cdn'ie.

Oczywiście nie muszę mówić że link tworzysz po stronie klienta.

masz narzędzie, wtyczkę do Grunta, które ci automatycznie minimalizuje obrazki, i z jednego pliku robi kilka w różnych wersjach
https://www.npmjs.org/package/grunt-responsive-images
korzysta się z tego jeszcze na poziomie developmentu, przed wgraniem plików na serwer (potem na serwer od razu wgrywasz wygenerowane pliki w różnych wersjach).

a tu jest opis Grunta jako takiego: http://gruntjs.com/getting-started