Як захоўваць выявы для сайтаў

1. Абярыце неабходны фармат для малюнкаў
2. Рыхтуем да публікацыі JPG
3. GIF і PNG-8
4. PNG-24
5. WebP
6. агульныя рэкамендацыі
7. заключэнне

Галаўны боль вэбмайстра - карцінкі. Пошукавыя сістэмы хочуць, каб малюнкі былі лёгкімі і хутка грузіліся, наведвальнікі сайтаў і соцсетей не жадаюць глядзець на «Поціск» пікселы і агідныя артэфакты сціску. Як знайсці кампраміс паміж патрабаваннямі пошукавых алгарытмаў і людзей? Вось некалькі саветаў.

(Last Updated On: 2018/10/27)

Абярыце неабходны фармат для малюнкаў

Поўнакаляровыя малюнка, якія ўключаюць у сябе мільёны адценняў, можна захоўваць толькі ў двух асноўных фарматах: JPG і PNG-24. GIF і PNG-8 катэгарычна не падыходзяць: яны абодва працуюць толькі з абмежаванай колькасцю кветак (да 256 у залежнасці ад каляровай табліцы). І GIF, і PNG-8 ідэальныя для захавання малюнкаў, чарцяжоў, або малюнкаў, дзе выкарыстоўваецца вельмі абмежаваная палітра. Ня фота!

• Асаблівасць малюнкаў у фарматах GIF і PNG-8: у адрозненне ад JPG і PNG-24, іх не варта маштабаваць. Адразу губляецца выразнасць, з'яўляюцца непрыемныя артэфакты.
• Асаблівасці JPG і PNG-24. PNG-24 каштуе выбраць, калі трэба максімальна даступнае якасць па-за залежнасці ад памеру. Яшчэ адно адрозненне гэтага фармату - падтрымка празрыстасці: можна, напрыклад, выдаліць фон, каб размясціць фрагмент фота на тым фоне, які ўжо ёсць на сайце. Гэта зручна для размяшчэння складаных лагатыпаў ў Градыентнае кветкамі і мноствам каляровых адценняў. У большасці выпадкаў трэба выкарыстоўваць JPG.

Выснова. Калі вам трэба размясціць на сайце чарцёж, скан дакумента, малюнак - выкарыстоўвайце GIF і PNG-8. У такім выпадку вы атрымаеце высокую выразнасць пры маленечкім вазе. Для загрузкі фатаграфій на сайт выкарыстоўвайце JPG. У сацсетцы пераважна загружаць PNG-24, але пра гэта - ніжэй.

Так выглядае фатаграфія, якую захоўваюць у адным з Васьмібітны фарматаў Для падрыхтоўкі фота для вэб выкарыстоўвайце прафесійнае ПА. Я рэкамендую Adobe Photoshop або яго аналагі. Чаму «Фотошоп»? Яго модуль Save for Web дазваляе бачыць, як менавіта псуецца карцінка па меры ўзмацнення сціску, і вы можаце выбраць патрэбныя суадносіны паміж якасцю і вагой карцінкі. У гэтым жа акне можна паглядзець, як будзе выглядаць карцінка на іншых платформах.А цяпер пяройдзем да больш канкрэтных рэкамендацый.

Рыхтуем да публікацыі JPG

Першае, што варта засвоіць: кожнае захаванне ў фармаце JPG павялічвае колькасць артэфактаў. Гэты алгарытм сціскае за кошт асерадненні аднародных кропак. Чым больш сціск - тым менш дэталяў, адценняў, тым больш выяўленыя ўсім знаёмыя «квадрацікі». Захоўвайце малюнак у JPG для вэб ў самы апошні момант, перад публікацыяй. Да гэтага захоўвайце карцінку ў адным з фарматаў без сціску з стратамі: PSD, TIFF, або нават PNG-24.

Да таго, як захоўваць малюнак для вэб, паменшыце дазвол фота. Камера захоўвае фатаграфіі з ppi 300 або 240 (у залежнасці ад налад камеры), а дысплеі (акрамя Рэцін) разумеюць толькі 72 ppi. Залішняе дазвол павялічвае вагу выявы без якіх-небудзь візуальных пераваг. Высокае дазвол трэба толькі для друку.

Ня захоўвайце для публікацыі ў інтэрнэт фота з залішняй дазволам. Гэта павялічвае памеры, але не дае ніякіх пераваг Ступень сціску JPG для публікацыі ў web - 80% і больш (гэта значыць 70, 60, 50% ...). Арыентуйцеся на якасць у першую чаргу, але памятайце: на сённяшні дзень гранічны «вага» карцінкі, размешчанай на старонцы як ілюстрацыя - каля 250 кб. Прытрымлівайцеся гэтай лічбы.

Падпішыцеся на наш канал у Telegram, каб не прапусціць новыя артыкулы і рэцэпты!
@aromaesthetica

Выдаляйце метатега з малюнкаў для вэб: дадзеныя аб аўтары, аўтарскіх правах, інфармацыя аб камеры і т. Д. Яны значна павялічваюць «вага» карцінкі.

У выпадку захавання пастаўце галачку ў чекбокс «Прагрэсіўная развёрстка». Гэты алгарытм загружае малюнак за некалькі праходаў. Наведвальнік сайта ужо бачыць загружаць фатаграфіі, якая па меры загрузкі становіцца ўсё больш дэталёвай.

Ці варта ўключаць у малюнак каляровай профіль? Мабыць, няма, калі вы сканвертаваць фота ў sRGB-1966. Браўзэры ўмеюць працаваць толькі з ім. А вось калі ваша выява захавана ў адным з прафесійных фарматаў, з адлюстраваннем будуць праблемы. Сам па сабе каляровай профіль - маленечкі тэкставы файлік, інтэграваны ў кантэйнер з выявай. Вядома ж, ён трохі павялічвае вагу файла, таму яго лепш зрэзаць разам з метатега.

GIF і PNG-8

Розніца паміж гэтымі фарматамі - ў ліцэнзаванні, і нашай тэмы гэта не датычыцца. Акрамя таго, GIF ўмее працаваць з анімацыяй, а PNG-8 - не. Калі ваша выява змяшчае абмежаваную колькасць кветак (ад 1 да 256), а таксама вобласці празрыстага - захоўвайце ў адным з гэтых фарматаў.

Старадаўняя гравюра змяшчае мінімум кветак і пабудавана на рысках. аптымальны фармат - GIF ці PNG-8 У выпадку захавання GIF і PNG-8 «Фотошоп» прапануе некалькі опцый. Першая: выбраць колькасць кветак. Больш колераў - больш вага. Глядзіце, каб не сыходзіла якасць і ня гублялася рэзкасць, і арыентуйцеся на мінімальную па памерах палітру.

Калі малюнку не патрэбна празрыстасць - зніміце адпаведную галачку.

У некаторых выпадках у індэксавацца выява трэба падмяшаць трохі «шуму», каб схаваць артэфакты. Гэта выкарыстоўваецца для захавання GIF і PNG-8, якiя ствараюцца з фатаграфій і відэа (калі гаворка пра GIF). «Фотошоп» прапануе некалькі тыпаў такога шуму, выбірайце прыдатны.

Нагадаю: GIF і PNG-8 не варта маштабаваць! Захоўвайце іх у тым памеры, у якім яны павінны адлюстроўвацца на маніторы.

PNG-24

У гэты фармаце якасць захоўваецца, таму што сціск не прадугледжана. Падтрымліваецца празрыстасць (альфа-канал).

Ніколі не публікуйце на сайце фатаграфіі ў фармаце PNG-24. Яны ў некалькі разоў «цяжэй» фота ў фармаце JPG. Памер загружанага малюнка прама ўплывае на хуткасць загрузкі старонкі, і файл у фармаце PNG-25 "важыць" прыкладна ў 4-8 разоў больш гэтага ж выявы ў фармаце JPEG без бачнага пагаршэння якасці (з паказчыкам сціску 80%).

Калі вы загружаеце фота ў сацсетцы (Facebook, Instagram, Vkontakte), варта выбраць PNG-24. Прычына ў тым, што пры загрузцы малюнка ўсё роўна будуць канвертаваны і вужаняты сацсеткамі, а значыць, якасць фота пацерпіць яшчэ раз. Вы ніяк не можаце кантраляваць ступень сціску, можна толькі паспрабаваць знізіць рызыкі. Для гэтага і патрэбен PNG-24 як фармат без страты якасці. Ва ўсіх іншых выпадках выкарыстоўвайце больш прыдатныя фарматы.

WebP

Гэты фармат малюнкаў для публікацыі ў інтэрнэт быў распрацаваны Google амаль 10 гадоў таму. Галоўная яго вартасць - ён сціскае файлы без страты якасці ў паўтара разу мацней, чым JPEG, ды яшчэ і падтрымлівае празрыстасць. Ён можа замяніць усе актуальныя фарматы малюнкаў для вэб. Здавалася б, чаму б не выкарыстоўваць яго?

Галоўная праблема фармату WebP (чытаецца як "веппи»): яго дагэтуль чытаюць далёка не ўсе браўзэры. Зараз, у 2018, з ім спраўляюцца толькі Chrome і Opera, а Microsoft Explorer, Microsoft Edge, Firefox і Safari яго не разумеюць. Таму вам прыйдзецца прадугледзець падмену малюнкаў гэтага фармату на малюнкі традыцыйных для інтэрнэт фарматаў. А гэта роўна ў два разы больш малюнкаў, якія трэба самастойна загрузіць на сервер.

Яшчэ адна праблема: актуальная рэалізацыя працы з гэтым фарматам мае на ўвазе і канвертаванне «налёту», значна абцяжарваюцца зыходны ход вэб-старонкі. Іншымі словамі, суадносіны «тэкст / код html» змяняецца ў бок html. Гэта дрэнна для пошукавай аптымізацыі. Вось і атрымліваецца: з аднаго боку, карцінкі хутчэй грузяцца, але не кожным браўзэрам, і трэба трымаць карцінкі ў двух фарматах. З іншага боку, старонка становіцца цяжэй.

У фармату малюнкаў для інтэрнэт WebP можа быць вялікая будучыня: ён сапраўды мацней сціскае карцінкі. Фота з вялікай ступенню сціску становіцца крыху больш за мутным, іншыя артэфакты сціску не выяўленыя. Але выкарыстаць гэты фармат зараз - тэма для разважання вэбмайстра. Асабіста я пакуль выкарыстоўваць гэты фармат не гатовы.

агульныя рэкамендацыі

Захоўваючы файл для публікацыі на сайце, дайце яму асэнсаваны назоў, якое апісвае яго змест. Пошукавыя сістэмы звяртаюць на гэта ўвагу. Назва трэба пісаць транслітам, прабелы - замяняць злучок. Ўсе словы ў назве - з маленькай літары.

Пры памяншэнні памераў фота выкарыстоўвайце алгарытм з узмацненнем рэзкасці. Калі ўмееце працаваць з алгарытмамі ўзмацнення рэзкасці - папярэдне узмацняйце яе ўручную, да таго, як паменшыце памеры фота. Больш падрабязна пра ўзмацненне рэзкасці і дэталёвасці глядзіце тут .

Не размяшчайце маштабаваць малюнак. Высветліце у вэбмайстра, які памер па шырыні і вышыні малюнка патрэбен для сайта, і захоўвайце ваша фота для публікацыі менавіта ў гэтым памеры. CMS могуць маштабаваць малюнак аўтаматычна, але ў выніку старонка будзе важыць нашмат больш, чым трэба. Гэта дрэнна адбіваецца на хуткадзейнасці сайта, і як вынік - на яго месца ў пошукавай выдачы. Або, як варыянт, CMS расцягне карцінку да патрэбнага памеру, глядзіцца гэта дрэнна.

Тыя самыя «квадрацікі», артэфакты алгарытму сціску. Вам падабаецца такое якасць? Не рэкамендую аўтаматычныя «аптымізатары» малюнкаў па рэкамендацыях Google Speed ​​Test. Так, яны драматычна паменшаць вага малюнкаў, але пашкадуйце вочы сваіх наведвальнікаў. Ды і ўласны бізнэс: якасць візуальнага кантэнту ўплывае на ўспрыманне сайта і канверсію. Горш ўспрыманне - менш грошай у ваш кішэню. Лепш выдаткуйце трохі часу на падрыхтоўку паўнавартаснага кантэнту, яно таго варта.

заключэнне

Каб выканаць баланс якасці і малога памеру файла, захоўвайце выявы для публікацыі ў інтэрнэт ўручную. Да выбару канчатковага фармату падыходзіце свядома, калі ёсць сумневы - выбірайце JPG. Так, кожны год з'яўляюцца новыя аптымізаваныя фарматы, але падтрымліваюцца яны не ўсімі браўзэрамі і сістэмамі кіравання кантэнтам. JPG - універсальны фармат для ілюстрацый да тэкстаў.

рэзюмэ

назву артыкула

Як захоўваць выявы для сайтаў

апісанне

Як выбраць фармат малюнкаў для публікацыі ў інтэрнэт, якія налады прымяніць, каб карцінка добра выглядала, але не запавольвала загрузку сайта? Якія працуюць рэкамендацыі.

аўтар

Віктар Пятроў

выдавец

aromaesthetica.ru