Веб-беттерде қолдануға болатын бірнеше сурет форматтары бар. Кейбір жалпы мысалдар GIF , JPG және PNG болып табылады . SVG файлдары бүгінгі күні веб-сайттарда жиі пайдаланылады, бұл веб-дизайнерлерді онлайн кескінге тағы бір мүмкіндік береді.
GIF кескіндері
Кішкентай, тұрақты түстер саны бар кескіндер үшін GIF файлдарын пайдаланыңыз. GIF файлдары әрдайым 256 ерекше түске дейін азайтылады. GIF файлдары үшін қысу алгоритмі JPG файлдарға қарағанда анағұрлым күрделі, бірақ тегіс түсті кескіндер мен мәтіндерде қолданылғанда ол өте кішкентай файл өлшемдерін шығарады.
GIF пішімі фотосурет кескіндері немесе градиент түстері бар суреттер үшін жарамсыз. GIF форматы түстердің шектеулі санына ие болғандықтан, Градиент және фотосуреттер GIF файлы ретінде сақталған кезде жолақтану және pixelation арқылы аяқталады.
Қысқаша айтқанда, GIF-ті тек бірнеше түспен қарапайым суреттер үшін қолдансаңыз да, PNG-ді сол үшін де қолдануға болады.
JPG кескіндері
JPG суреттерін миллиондаған түстері бар фотосуреттер мен басқа суреттер үшін пайдаланыңыз. Кескіннің кейбір сапасын жоғалту арқылы кішігірім графиканы жасауға мүмкіндік беретін күрделі қысу алгоритмі қолданылады. Бұл кескін қысылған кезде кескін туралы кейбір ақпарат жоғалып кеткендіктен, «жоғалту» қысу деп аталады.
JPG форматы мәтіні бар суреттерге, қатты түстің үлкен блоктарына және нақты бұрыштары бар қарапайым пішіндерге сәйкес келмейді. Өйткені сурет қысылғанда, мәтін, түс немесе сызықтар бұлыңғыр болуы мүмкін, себебі ол басқа пішімде сақталғандай өткір емес кескінге әкеледі.
JPG суреттері жақсы суреттер мен суреттер үшін пайдаланылады, олардың көпшілігі табиғи түстерге ие.
PNG кескіндері
PNG форматы GIF форматында GIF кескіндері роялти төлеміне жатқызылған кезде GIF форматы үшін ауыстырылады. PNG графика GIF суреттеріне қарағанда жақсы қысу жылдамдығына ие, бұл GIF ретінде сақталған файлға қарағанда кішірек кескіндерге әкеледі. PNG файлдары альфа мөлдірлігін ұсынады, яғни суреттеріңіздің толығымен мөлдір болуы немесе тіпті альфа мөлдірлігінің ауқымын қолдануға болатын аймақтар болуы мүмкін. Мысалы, тамшылардың көлеңке мөлдірлігі әсерінің ауқымын қолданады және PNG үшін жарамды болады (немесе орнына CSS көлеңкелерін пайдалану арқылы ғана бізді аяқтай аласыз).
GIF файлдары сияқты PNG кескіндері фотосуреттерге сай емес. Шынайы түстерді пайдаланып, GIF файлдары ретінде сақталған фотосуреттерге әсер ететін жолақты мәселені шешуге болады, бірақ бұл өте үлкен кескіндерге әкелуі мүмкін. PNG кескіндері ескі ұялы телефондар мен арнайы телефондармен жақсы қолдау көрсетпейді.
Біз мөлдірлікті талап ететін кез келген файл үшін PNG файлын қолданамыз. Біз сондай-ақ PNG-8-ні PNG-форматты пайдалана отырып GIF ретінде қолайлы кез келген файл үшін қолданамыз.
SVG кескіндері
SVG ауқымды векторлық графиканы білдіреді. JPG, GIF және PNG файлдарында растр негізіндегі пішімдерден айырмашылығы, бұл файлдар мөлшерін жоғарылату сапасы жоғалмай, кез-келген өлшемде көрсетілетін өте кішкентай файлдарды жасау үшін векторларды пайдаланады. Олар белгішелер және тіпті логотиптер сияқты иллюстрациялар үшін жасалған.
Веб-жеткізу үшін суреттерді дайындау
Сіз қандай кескін форматын пайдаланасыз қарамастан және сіздің веб-сайтыңызыңыз оның барлық беттерінде бірнеше түрлі форматтарды қолданатынына сенімді болса, сол сайттағы барлық суреттердің веб-жеткізіліміне дайын болуын қамтамасыз етуіңіз керек. Үлкен кескіндер тораптың баяу жұмыс істеуіне және жалпы өнімділікке әсерін тигізуі мүмкін. Бұған қарсы тұру үшін бұл суреттер сапалы деңгейде ең жоғары сапа мен ең аз файл өлшемі арасындағы теңгерімді табу үшін оңтайландырылуы керек .
Суреттердің дұрыс пішімін таңдау шайқастың бір бөлігі болып табылады, сонымен қатар осы файлдарды дайындағаныңызға көз жеткізу бұл маңызды веб жеткізу процесінің келесі қадамы.
Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard өңдейді.