Ce folositi pentru a livra imagini la dimensiuni diferite in site-urile voastre responsive?
2 Likes
Chiar acum am un proiect mic preluat de la altcineva ce folosește urmatoarea chestie:
<picture>
<source media="(min-width: 884px) and (min-resolution: 2dppx)" srcset="/assets/img/project/1-1@md+2x.jpg" />
<source media="(min-width: 884px)" srcset="/assets/img/project/1-1@md+1x.jpg" />
<source media="(min-width: 768px) and (min-resolution: 2dppx)" srcset="/assets/img/project/1-1@sm+2x.jpg" />
<source srcset="/assets/img/project/1-1@xs+2x.jpg" />
<img width="984" height="612" src="/assets/img/project/1-1@md+1x.jpg" />
</picture>
Dacă mă întrebi pe mine, source media mi se pare util doar în situația în care imaginile sunt (ușor) diferite la diverse rezoluții/densități, altfel este overkill; de obicei folosesc o singură imagine: un JPG salvat la caliate foarte joasă (10-20%) la dimensiuni duble decât am nevoie (e.g. pentru o imagine de 900x400 voi salva la 1800x800 la 10-20% caliatte). Chiar dacă imaginea are artefacte, când browserul face downsize, acestea dispar (sau sunt acceptabile).
Demo: plecând de la imaginea asta (că e colorată):
2200x1462@5% 260kb: (la 1400px și 10% au rezultat ~150kb)
700x465@70% 220kb:
Edit: observ că discourse procesează imaginile și rezultă dimensiuni ceva mai mari; ~150 respectiv ~220kb sunt dimensiunile imaginilor înanite de upload.
7 Likes
This is a neat trick 
1 Like
Salut Catalin,
Consider ca aici: https://responsiveimages.org gasesti cam tot ce te intereseaza despre responsive images. In afara faptului ca vrei sa servesti imagini de diverse dimensiuni in functie de dispozitiv si eventual de viteza de descarcare de care dispune utilizatorul, mai intra in joc si conceptul de “art direction” care este de asemenea explicat in linkul mentionat mai sus.
4 Likes