Urcați imagini cât mai mari!

Î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

  1. http://www.html5rocks.com/en/mobile/high-dpi/
  2. http://www.html5rocks.com/en/mobile/easy-high-dpi-images/
  3. http://paulstamatiou.com/responsive-retina-blog-development-part-2/
  4. https://bensmann.no/the-hidpi-web/
  5. http://www.netvlies.nl/blog/design-interactie/retina-revolution
  6. https://css-tricks.com/on-responsive-images/

Toate dimensiunile reprezintă lățimea imaginilor. Înălțimea se presupune că urmează proporțiile imaginii originale.

8 Comentarii to “Urcați imagini cât mai mari!”

  1. Din pacate, prea putini gandesc in perspectiva. Daca acum merge… merge…

  2. Legat de tehnicile responsive si ideea articolului, http://adaptive-images.com/ si http://squeezr.it/ par a fi variante de luat in calcul.

  3. Și cînd pagina ta are 25 mb de la poze imense și se încarcă infectat la majoritatea vizitatorilor?

  4. sfatul meu: urcati imagini la dimensiunile de ACUM. be a sport, si da de mancare si altui coleg (poate chiar tie) peste 2-3-4 ani :)

  5. Ionuț Staicu

    @matthers: acolo e o problemă ce ține de alte aspecte, nu de dimensiunea pozelor urcate

    @StefanZ: dacă ești pregătit să renunți la CDN-uri & co, da, sunt variante de luat în calcul. Altfel nu prea.

  6. @gigixy: Dacă tu crezi că modul cel mai bun prin care îți poți vinde timpul este să redimensionezi imagini, foarte bine.

    Dar știi că asta impune să păstrezi pozele la o rezoluție mare undeva, da?

    Presupunând că vorbim de un site de fotografie (gen flickr, 500px sau altele de genul), cum procedezi cu materialul urcat de utilizatori? Îi rogi frumos să mai urce ei pozele o dată?

  7. sa faci redimensionare in zbor costa. se simte la incarcarea unei pagini. preferabil sa salvezi versiunile redimensionate. daca n-ai versiunea respectiva o generezi, o salvezi si o servesti.

    ps: nu vad unde-ar fi 2000px rezolutie optima.

  8. Ionuț Staicu

    @semeketh: nu am zis să faci redimensionarea din zbor. Redimensionarea o faci atunci când urci pozele și servești variantele corespunzătoare.

    Lățimea optimă a unui text este situată undeva între 60 și 70 caractere (60-70em). Nu o zic eu, o zic studiile din tipografie & co. Pentru a avea un text cât de cât citeț, plecăm de la premisa că 1em = 14px. Adică lățimea maximă a unui paragraf ar trebui să fie 980px, sau, ușor rotunjit, 1000px. Altfel spus, cu anumite excepții (e.g. site-uri cu un design mai… special), imaginile urcate azi nu au nevoie de mai mult de 1000px lățime. Dar pentru că vorbim despre imagini ce vrem a le folosi și peste cinci ani, putem dubla (cel puțin) dimensiunea. Simplu, nu? :D

    PS: evident, vorbesc despre imaginile ce apar în conținutul site-ului, nu imaginile detaliate (e.g. lightbox & co).

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>