Ёсць цэлы шэраг графічных фарматаў, якія могуць быць выкарыстаны на вэб-старонках. Некаторыя агульныя прыклады GIF , JPG і PNG . SVG - файлы таксама часта выкарыстоўваюцца на вэб - сайтах сёння, даюць вэб - дызайнерам яшчэ адзін варыянт для онлайн - выявы.
GIF выявы
Выкарыстоўвайце GIF файлы малюнкаў, якія маюць невялікае, фіксаванае колькасць кветак. GIF-файлы заўсёды зводзяцца да не больш чым 256 унікальных кветак. Алгарытм сціску GIF - файлаў з'яўляецца менш складаным , чым для JPG - файлаў, але пры выкарыстанні на плоскіх каляровых малюнкаў і тэксту ён вырабляе вельмі маленькія памеры файлаў .
Фармат GIF ня падыходзіць для фатаграфічных малюнкаў або малюнкаў з градыентам колеру. Паколькі фармат GIF мае абмежаваную колькасць кветак, градыенты і фатаграфіі будуць у канчатковым выніку з бандажнымі і пікселізацыі пры захаванні ў выглядзе файла GIF.
У двух словах, вы б выкарыстоўваць GIFs толькі для простых малюнкаў з толькі некалькі кветак, але вы таксама можаце выкарыстоўваць PNGs для гэтага, а таксама (падрабязней пра гэта крыху пазней).
JPG малюнка
Выкарыстоўвайце JPG малюнка для фатаграфій і іншых малюнкаў, якія маюць мільёны кветак. Ён выкарыстоўвае складаны алгарытм кампрэсіі, які дазваляе ствараць меншую графіку, губляючы некаторыя якасці малюнкаў. Гэта называецца «з стратамі» сціску, так як некаторыя з інфармацыі аб малюнку губляецца, калі малюнак сціскаецца.
Фармат JPG не пасуюць для малюнкаў з тэкстам, вялікімі блокамі суцэльнага колеру і простымі формамі з выразнымі бакамі. Гэта адбываецца таму, што, калі малюнак сціскаецца, тэкст, колер, або лініі могуць размытасць, у выніку чаго малюнак, якое не гэтак рэзкім, як ён будзе захаваны ў іншым фармаце.
JPG малюнка лепш за ўсё выкарыстоўваць для фатаграфій і малюнкаў, якія маюць шмат і шмат натуральных кветак.
PNG малюнка
Фармат PNG быў распрацаваны ў якасці замены фармату GIF, калі апынулася, што GIF выявы будзе спаганяцца плата роялці. PNG графік мае лепшую ступень сціску, чым GIF выявы, якія прыводзяць да больш дробным малюнках, чым той жа файл, захаваны ў фармаце GIF. PNG файлы прапануюць альфа-празрыстасць, гэта значыць вы можаце мець вобласць малюнкаў, якія альбо цалкам празрыстыя або нават выкарыстоўваць дыяпазон альфа-празрыстасць. Напрыклад, падзенне ценяў выкарыстоўвае шэраг эфектаў празрыстасці і будзе прыдатныя для PNG (ці вы можаце проста пакласці канец нам, выкарыстоўваючы CSS цень замест гэтага).
PNG малюнка, як GIFs, не вельмі добра падыходзіць для фатаграфій. Можна абыйсці пытанне кальцавання, што ўплывае на фатаграфіі, захаваныя як GIF файлы, выкарыстоўваючы сапраўдныя колеру, але гэта можа прывесці да вельмі вялікіх малюнках. PNG малюнка таксама не вельмі добра падтрымліваецца старых мабільных тэлефонаў і мабільныя тэлефоны.
Мы выкарыстоўваем PNG для любога файла, які патрабуе празрыстасці. Мы таксама выкарыстоўваем PNG-8 для любога файла, які быў бы прыдатны ў якасці GIF, выкарыстоўваючы гэты фармат PNG замест.
SVG малюнка
SVG азначае Scalable Vector Graphic. У адрозненні ад растравых фарматаў на аснове знойдзеных у JPG, GIF, PNG і гэтыя файлы выкарыстоўваюць вектары для стварэння вельмі маленькіх файлаў, якія могуць быць аказаны ў любым памеры без страты якасці павелічэння памеру файла. Яны створаны для ілюстрацыі, як значкі, і нават лагатыпы.
Падрыхтоўка малюнкаў для вэб-дастаўкі
Незалежна ад таго, які фармат выявы вы выкарыстоўваеце, і ваш сайт абавязкова выкарыстоўваць цэлы шэраг розных фарматаў ва ўсіх яго старонках, вы павінны пераканацца , што ўсе выявы на гэтым сайце, падрыхтаваны для вэб - дастаўкі . Занадта вялікія выявы могуць прывесці на сайт, каб працаваць павольна і ўплывае на агульную прадукцыйнасць. Для барацьбы з гэтым, гэтыя малюнкі павінны быць аптымізаваныя , каб знайсці баланс паміж высокім якасцю і нізкай памер файла , які можна на гэтым узроўні якасці.
Выбар фармату выявы направа з'яўляецца часткай бітвы, але і пераканаўшыся, што вы падрыхтавалі гэтыя файлы наступны крок у гэтым важным працэсе вэб-дастаўкі.
Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard.