Изборник Затворити

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

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

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

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

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

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

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

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

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

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

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

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

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

3 Comments

  1. Alex

    Zdravo Pedja,
    procitao sam ovaj tekst i slazem se sa tobom da je SEO fotografija na sajtu veoma bitan cinilac kompletnog SEO odnosno optimizacije za pretrazivace. Pocetnik sam u ovome, ali shvatam znacaj optimizacije i hvala ti sto nam pomazes korisnim savetima.
    Pozdrav!
    Alex

Оставите одговор на sasa Одустани од одговора

Ваша адреса е-поште неће бити објављена. Неопходна поља су означена *

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

Ово веб место користи Акисмет како би смањило непожељне. Сазнајте како се ваши коментари обрађују.