Теме: Графички дизајн | Фотографске технике

Оптимизација слика (фотографија и цртежа) за web

Скраћена веза: https://pedja.supurovic.net/veza/647

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

„Најтежи“ графички елементи су свакако управо фотографије и друге илустрације. Оне заузимају поприлично простора, чак и ако то на први поглед није очигледно. Оптимизација фотографија се своди на поступак којим се сманјује дужина датотеке у којој се она налази, али тако да се и даље задржи прихватљив ниво њеног квалитета. На тај начин штедимо простор на диску, али и убрзавамо учитавање веб странице.

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

У веб станама се фотографије приказују ЈПГ, ГИФ и ПНГ форматима. Сваки од њих има предности и мане.

ЈПГ формат је намењен првенствено за фотографије. Начин „паковања“ података је такав да се покушава компресија података на основу садржаја, односно програм настоји да утврди који елементи фотографије су небитни, то јест око их не примећује и њих избацује из фотографије. Овај начин компресије се зове компресија са губитком, јер се неповратно губи одређени део информација. Пажљивим подешавањем параметара заита се може постићи да се датотека фотографије значајно смањи (и до десетак пута) а да око то не примети или да промене буду слабо видљиве. Слаба тачка ЈПГ формата су преливи боја и оштре ивице, због чега је он и најпогоднији за фотографије, а не за цртеже.

ГИФ формат је намењен првенствено за цртеже и уопште илустрације које не садрже много боја, јер овај формат не може да прикаже више од 256 боја. Обично се користи за логотипе, разне ситне сличице и графичке елементе на страни који садрже мали број боја. Предност овог формата је упаво у томе што због малог броја боја, може да врло добро искомпресује садржај и направи изузетно мале датотеке. Специјалност су му велике површине исте боје. Често може да послужи и за приказ фотографије јер је одговарајућим алатима могуће оптимизовати сваку боју појединачно и тако постићи да фотографија и са 256 боја изгледа врло добро. Још једна битна карактеристика ГИФ формата је да може да буде прозиран – неку површину на слици можете прогласити провидном и кроз њу ће се видети оно што се налази испод сличице.

ПНГ формат је новијег датума, и има две верзије, једна одговара за компресију фотографија, а друга компресији илустрација. По правилу, за илустрације је бољи од ГИФ-а јер даје мање датотеке за исти квалитет.

Неопходно је да о овоме водите рачуна, јер на сваком иоле посећеном сајту управо постаје проблем велики саобраћај и потрошња ограничених ресурса које по правилу плаћате ви ако је ваш сајт или власник сајта ко садржај стављате на туђи сајт.

Детаљно упутство

Пре много времена, баш због потребе да посетиоцима свог форума помогнем да боље оптимизују фотографије направио сам упутство за оптимизацију фотографија ради објављивања на web-у. Погледајте га и примените. Упутство је детаљно са објашњеним поступцима и примерима и у ствари показује колико је оптимизација једноставан поступак

Примените га и добитак ћете брзо осетити, јер ако оптимизацијом само на једној фотографији уштедите 10кБ (а уштедећете мнго више), то значи да са десет фотографија на страни штедите 100кб, што ће се итекако осетити на брзини учитавања странице.


Поделите овај чланак са пријатељима


3 comments to Оптимизација слика (фотографија и цртежа) за web

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Попуните израз тако да буде тачан: *