În ultima vreme am găsit de câteva ori sfatul „nu mai urcați poze mari pe blog”. Plus recomandarea că dimensiuni de 8-900px sunt în regulă. Doar că nu sunt în regulă. Iată de ce:
Prețul
Prețul este motivul principal invocat de majoritatea: stocarea costă, poți face economii importante dacă nu urci poze mari sau alte minuni de genul. Să fim serioși, stocarea este extrem, dar extrem de ieftină. Cât de ieftină? Cam $0.03/Gb/Lună. Cât înseamnă asta? Pentru 1Tb de imagini asta înseamnă vreo $30. Nu am eu mari afaceri online, dar tind să cred că în momentul în care ai 1Tb în imagini ai alte costuri mult mai mari, iar cei $30 vor însemna o sumă infimă. Ba chiar și găzduirea „normală” (fără cloud & co) este ridicol de ieftină când vine vorba de spațiu.
ATENȚIE: vorbesc de stocarea acestor imagini. Sub nici o formă nu susțin sau încurajez servirea imaginilor la rezoluție maximă! De cele mai multe ori 1600-2000px este rezoluția optimă (mai ales dacă se urmează sfatul de mai jos).
Tehnologia
Tehnologia evoluează în ritm alert. Acum zece ani, cea mai comună rezoluție era 1024×768; pe lângă asta mai erau câteva rezoluții extrem de comune și… cam atât. Acum situația stă altfel: avem nu doar o mulțime de rezoluții (pentru că producătorii consideră că-i foarte util să facă sute de combinații) dar și densități diferite ale pixelilor (așa numitele Retina Displays). Adică nu doar că avem o mulțime de rezoluții dar putem avea aceeași rezoluție pe o mulțime de dimensiuni fizice.
În aceste condiții, dacă îți iei în serios site-ul, ar fi bine să fii pregătit. OK, poate azi site-ul tău arată excelent cu pozele de 800px lățime, dar ești sigur că peste doi-trei-cinci ani (când monitoarele Hi-DPI vor fi nu doar accesibile ca preț dar și adoptate la o scară largă) site-ul tău se va vedea bine și pe noul design?
Așadar, nu e mai simplu (și mai sigur!) să urci imaginile la o rezoluție cel puțin dublă decât ce ai nevoie?
Sfatul meu
Varianta scurtă: urcați pozele la o rezoluție cât mai mare, serviți pozele la rezoluția optimă. Adică urci pozele la 2-3000px (poate mai mult). Le servești la cât ai nevoie ACUM. Peste doi ani, când schimbi designul, va trebui doar să re-generezi imaginile pentru dimensiunile de care ai nevoie.
Pro Tip
În acest moment, este destul de tricky să servești imagini optime pentru fiecare rezoluție și densitate. Poți folosi diverse biblioteci JavaScript, poți folosi Media Queries (în CSS) sau poți face următoarea chestie:
Generezi imaginile la o rezoluție dublă față de ce ai tu nevoie (e.g. dacă ai nevoie de 400×400 le generezi la 800×800) dar la o calitate foarte scăzută (gen 15-20%). Când le afișezi, vei avea grijă – din CSS – să aibe dimensiunea necesară (în majoritatea cazurilor vei rezolva o grămadă de probleme folosind următoarea regulă CSS: img { max-width:100%; height:auto }
.
Imaginile astfel afișate vor arăta foarte bine atât pe ecranele Hi DPI (cel puțin pe dispozitivele mobile, încă n-am testat pe monitoare normale) și vor avea și o dimensiune rezonabilă.
Resurse utile
- http://www.html5rocks.com/en/mobile/high-dpi/
- http://www.html5rocks.com/en/mobile/easy-high-dpi-images/
- http://paulstamatiou.com/responsive-retina-blog-development-part-2/
- https://bensmann.no/the-hidpi-web/
- http://www.netvlies.nl/blog/design-interactie/retina-revolution
- https://css-tricks.com/on-responsive-images/
Toate dimensiunile reprezintă lățimea imaginilor. Înălțimea se presupune că urmează proporțiile imaginii originale.