To pytanie w rzeczywistości nie dotyczy kodowania, ale wybiera właściwą metodę dla zadania. Nie wiem, czy to jest sprzeczne z zasadami SO, ale proszę bardzo.Responsywne obrazy: zmiana rozmiaru lub dynamiczne przycinanie?
Kiedyś zbudowałem mały CMS dla lokalnej gazety, który dał im możliwość dodawania swoich wpisów wraz ze zdjęciem. Jeśli chodzi o zdjęcie, przesyłali jedno zdjęcie, a ja zapisałem różne wersje tego zdjęcia, aby wyświetlać je według różnych szablonów, które mogą wybrać (szablony i nie rozmiary ekranów!).
Teraz proszę o odnowienie tego starego system i mam do czynienia z dylematem reakcji/adaptacyjności.
Jeśli chodzi o moje odkrycia w Internecie, kolejną wielką rzeczą jest element <picture>. Znalazłem wiele zasobów i właśnie wtedy, gdy zdecydowałem się na to, natknąłem się na stronę internetową this. Jeśli spojrzysz na źródło dowolnego obrazu, zauważysz, że ma on takie zapytanie, jak width=940&height=320&mode=crop&scale=both&meta=panoramic Kiedy zmieniam rozmiar okna, staje się on podobny do width=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenter Wierzę, że ta strona używa Image Resizer i że w zależności od rozmiaru ekranu, jedno zdjęcie jest przetwarzane w locie przez serwer w celu wydrukowania nowego obrazu.
Co ja nie rozumiem to, która z tych metod jest lepsza ponieważ element picture wciąż wymaga wielu obrazów przesłanych na serwer natomiast imageresizer potrzebuje tylko jednego i to uprawach-przeskalowanie odpowiednią do wielkości ekranu. Ale z drugiej strony, z elementem picture serwer nie jest bombardowany prośbami o zmianę rozmiaru obrazów, ale obsługuje istniejące zdjęcia, które oszczędzają na przetwarzanie i czas?
nie jest jeszcze obsługiwane we wszystkich przeglądarkach http://caniuse.com/#search=picture, ale jest najwyraźniej najlepsze, jeśli możesz go użyć w swoim kontekście i spełnia twoje potrzeby. Należy również pamiętać, że serwery takie jak resizer obrazu mogą buforować zawartość, aby uniknąć ciężkich obliczeń obrazu. –