Како да оптимизујете слике производа за е-трговину за брже странице у високој конверзији

Фотографије производа за е-трговину морају да пренесу вредност и функционалност неког производа док инспиришу купце да купују. Када год је могуће, слике производа такође треба да буду смањене и да се брзо учитавају. Изазов је, дакле, да направите велике, атрактивне слике као релативно мале фајлове.

Walmart, један од највећих трговаца онлајн и офлајн, веома је успешно пронашао равнотежу између добрих фотографија и малих фајлова.

На пример, слика производа за Juniors Wonder Woman – мајица на сајту Walmart има 450 пиксела са 450 пиксела и само 12МБ. То је невероватно мала величина фајла за релативно велику слику.

optimize_1

Још један добар пример слике је много занимљива фотографија производа Wonder Woman Graphic Tee на сајту Hot Topic која је истовремено довољно велика да помогне да се производ прода (443 пиксела са 598 пиксела), а довољно мала, у смислу величине фајла (само 45 МБ у овом случају) да се смањи за учитавање странице наспрам других слика исте величине.

optimize_1

Поређења ради, један од слика производа за Wonder Woman – мајица на сајту Popfunk је 1.000 пиксела са 1.000 пиксела и 1.349 КБ или 1.3 МБ.

optimize_1

Док чак и Попфунк слика није неразумно велика с обзиром на квалитет слике, то ипак показује колико су добро Walmart и Hot Topic оптимизовали своје слике. Walmart добија више од 16.000 пиксела по КБ.

optimize_1

Свакако да постоје многе стратегије за оптимизацију фотографија производа, три од њих укључују коришћење алтаки за компресију слика, коришћење манипулације слика и програме за обраду као што су Adobe Photoshop CC 2015 или коришћењем скрипте у PHP, Python или слично .

Алтаке за компресију слика

Постоји много доступних алатки за компресију слика које се плаћају или су пак бесплатне. Неке од ових програма за компресију слика мора да се преузму на рачунар, док се други програми покрећу са Интернета.

Претрага на Google или Bing даће резултате на десетине, ако не и стотине алатки за компресију слика. Ево неколико њих које бисте могли да уземте у обзир. Наведени су без неког посебног реда.

Алатке које се покрећу са Интернета:

Компресори слика који се преузимају са Интернета:

Софтвер за обраду фотографија

Аdobe Photoshop 2015 је вероватно тренутно најбоље софтверско решење за манипулацију фотографијама. Photoshop KZ 2015 који има најновију верзију софтвера у тренутку писања овог текста, такође има нови и побољшани генератор слика за веб дизајнере.

У прошлости, многи веб дизајнери су користили функцију сачувај за веб из Photoshop програма за оптимизацију и компресовање слика, као и слике производа о којима се овде говори. Иако је ова функција још увек доступна, нови генератор обавља бољи посао припреме слике за коришћење на Интернету, па ће, по правилу, припремити још мање фајлове за исти ниво компресије.

Да би се показали нови Adobe Photoshop генератор, преузете су слике од Антони Деланои које су доступне на SnapStock.io под лиценцом Creative Commons. Ради примера, замислите да је ово слика производ за женску мајцу Sunset.

optimize_1

Оригинална слика је имала 2.53 МБ и била 3.744 пиксела са 5.616 пиксела и имала је 240 пиксела по инчу. Потом је слика смањена да буде у складу са сликом производа за wеб презентацију е-трговине и сада је 500 пиксела са 750 пиксела и садржи 72 пиксела по инчу.

За оптимизацију ове слике у Photoshop CC 2015 изаберите File > Export > Export As или можете користити пречицу на тастатури ctrl + alt + shift + w на Windows рачунару или cmd + opt + shift + w на ОS X рачунару.

optimize_1

Пхотосхоп ће отворити дијалог за извоз, са опцијама за врсту фајла, у неким случајевима квалитета слике и резолуцијом слике.

optimize_1

Подешавањем типа слике у ЈПЕГ и квалитет слике на 75 одсто, могуће је да се извезе слика заласка сунца са само 31.7 КБ или око 11.829 пиксела по КБ.

optimize_1

Скрипте за обраду фотографија

Најефикаснији начин за оптимизацију слике производа и за лепоту и брзо учитавање је да се користи скрипта. Скоро сваки програмски језик нуди неку врсту обраду слике, обично као библиотека.

Иако ове скрипте или библиотеке апсолутно захтевају вештине развоја wеб презентација, они често нису компликовани за коришћење и могу произвести сјајне резултате.

На пример, једна посебно једноставна комбинација за коришћење је Laravel PHP Framework и Intervention Image библиотека која ради са GD Library или ImageMagick.

Ево неколико примера популарних библиотека за обраду слика за неколико водећих језика за кодирање. Сваки од ових нуди објашњења како се користе.

PHP:

Python:

Ruby:

Node.js:

source : practicalecommerce.com