Î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.

Am avut azi puțin timp liber și am încropit o extensie de Chrome pentru Profitshare.

Extensia este setată astfel încât vei împărți profitul cu mine, dar un procent mic (se generează random un număr între 0 și 1000 și dacă acel număr este peste 950, se va împărți profitul). Pentru moment acest lucru nu este opțional, dar în funcție de succesul extensiei voi schimba această funcționalitate (și voi adăuga altele noi)

De când am început să scriu zilnic pe blog, am avut nevoie de redimensionarea imaginilor prea mari, astfel încât să nu depășească 1280px lățime. Prin urmare, am făcut ce face tot omul normal: resize în Photoshop. În a treia zi mi-am dat seama că nu-i o idee prea bună și că trebuie să elimin toți pașii inutili (deschis PS » deschis imaginea în PS » redimensionare » salvare pentru web » adăugarea unui prefix la numele fișierului).

Prin urmare, am instalat ImageMagick. Împreună cu un batch file (resize.bat) simplu, puteam face resize din CMD:

convert %1 -resize 1280 resized-%1

Doar că și asta presupunea prea mulți pași: trebuia să deschid o consolă și să scriu resize nume-poza.jpg.

Prin urmare, am făcut un script Python simplu care face resize la pozele selectate. Pentru asta e nevoie de instalarea a câtorva unelte suplimentare:

• ImageMagick – la instalare trebuie să se bifeze Install development headers and libraries for C and C++;
• Python 2.x – eu am 2.7.6, dar cred că funcționează orice este sub 3; nu uita ca la instalare să bifezi adăugarea python.exe la PATH!
• Wand – un wrapper Python pentru ImageMagick;
• StExBar – O unealtă ce adaugă diverse icons în Windows Explorer.

Wand

Varianta de instalare ce mi-a funcționat mie a fost cea explicată aici: python setup.py install în directorul în care am clonat repository-ul. Pip nu mi-a funcționat niciodată.

De asemenea, nu uita să setezi și variabila MAGICK_HOME (directorul unde ai instalat ImageMagic). Posibil să fie nevoie de un restart după asta.

Script-ul

import sys, os
import imghdr

from wand.image import Image

maxWidth = 1280
prefix = 'resized-'

args = sys.argv[1:]

def main():
  validImages = [ 'jpg', 'jpeg', 'png' ]
  for image in args:
    filename = os.path.basename( image )

    if( imghdr.what( filename ) in validImages ):
      i = Image( filename=filename )
      with i.clone() as resize:
        resize.transform( resize=str( maxWidth ) + 'x' )
        resize.save( filename=prefix + filename )
        resize.size

if __name__ == '__main__':
  main()

StExBar

Este nevoie să adaugi o comandă custom:

# command line
python C:\tools\resize.py %selpaths

Cam asta e tot

Ce-i drept, sunt foarte mulți pași inițiali, dar odată setat, toată mașinăria va funcționa fără probleme