Jak zaimplementować obrazki tak, aby zachować jakość na różnych ekranach oraz krótki czas pierwszego ładowania strony?

Question

Pytanie tak jak w temacie. Proszę o obszerne wypowiedzi.

Answer 1

Bardzo dobry artykuł na ten temat ma Opera: https://dev.opera.com/articles/responsive-images/

W skrócie: wypada mieć kilka wersji, dostosowanych do najpopularniejszych rozdzielczości – tak, aby obrazek jak najbardziej pasował wymiarami do urządzenia i nie musiał się zbytnio skalować. Do tego wypada też serwować WebP tam, gdzie się da, bo w większości przypadków ten format powinien dawać lepsze wyniki niż JPG czy PNG → https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

No i używaj SVG wszędzie tam, gdzie się da. Wektory Po Prostu Działają™.

Comments

Już czytam, dzięki.

---

@Comandeer,

No i używaj SVG wszędzie tam, gdzie się da.

jestem za... przekonaj tylko UX designerów aby dostarczali Ci zawsze svg a nie pierdylion pliczków png... :) Ale zgadzam się jak najbardziej, tym bardziej, że po za problemem skalowania rozwiązuje to też problemy np. jakiś filtrów graficznych itp.