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

Чаму змяненне памеру малюнкаў вашага вэб-сайта важна

Давайце пачнем з таго, чаму змяненне памеру малюнкаў вашага сайта так важна.

па WordPress.org, агульны «фізічны памер» выявы гуляе вялікую ролю ў прадукцыйнасці вэб-старонкі. «Памер файла [малюнка] дыктуе час, неабходны для загрузкі вашай старонкі; чым большы памер файла… тым даўжэй [старонка] будзе загружацца». Іншымі словамі, загрузка файла вялікага памеру на ваш вэб-сайт запаволіць прадукцыйнасць любой старонкі, на якую вы дадаеце малюнак, звычайна ў выглядзе паніжэння хуткасці загрузкі старонкі.

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

-WordPress.org

Хуткасць загрузкі старонкі, якую таксама называюць проста "Page Speed”, - гэта “як хутка загружаецца кантэнт на вашай старонцы”, у адпаведнасці з SEO сайт Moz. Больш павольныя старонкі могуць прывесці да большага "паказчык адмоваў», які з'яўляецца мудрагелістым тэрмінам для аднастаронкавых сеансаў, калі наведвальнік сайта пакідае ваш сайт пасля прагляду адной старонкі. Больш павольныя старонкі таксама могуць паменшыць колькасць часу, якое наведвальнікі праводзяць на старонках вашага сайта, бо людзі могуць страціць цярпенне, чакаючы, пакуль змесціва старонкі загрузіцца і пакіне ваш сайт.

Гэтыя паказчыкі важныя, таму што вы звычайна хочаце, каб карыстальнікі праводзілі больш часу на вашым сайце і праглядалі больш старонак вашага сайта.

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

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

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

Звярніце ўвагу, што ёсць шмат іншых важных зменных, якія ўваходзяць у пошукавы рэйтынг, таму выпраўленне вашых малюнкаў - толькі частка цвёрдага SEO (Search Engine Optimization) стратэгія. Тым не менш, гэта, безумоўна, вельмі важна, каб дапамагчы вашаму сайту атрымаць больш высокі рэйтынг у такіх месцах, як Google, каб павялічыць наведвальнасць вашага сайта.

Як змяніць памер малюнкаў для WordPress у GIMP

Такім чынам, як правільна змяніць памер выявы для WordPress?

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

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

Павялічце малюнак

Каб пачаць гэты працэс, адкрыйце малюнак, які хочаце загрузіць на свой сайт, у GIMP. Вы можаце зрабіць гэта, перацягнуўшы сваю выяву з кампутара ў акно выявы GIMP, або вы можаце проста перайсці ў меню Файл>Адкрыць у GIMP.

Калі вы выкарыстоўваеце метад «Файл>Адкрыць», перайдзіце да выявы на вашым кампутары з дыялогу «Адкрыць выяву», які з'явіцца, і двойчы пстрыкніце файл выявы, калі вы знойдзеце яго, каб адкрыць яго ў GIMP (або націсніце кнопку кнопка «Адкрыць» у правым ніжнім куце дыялогавага акна).

У самым версе акна GIMP знаходзіцца функцыя пад назвай «Панэль загалоўка» (чырвоная стрэлка на малюнку вышэй). Тут вы ўбачыце бягучыя памеры выявы (павялічанае зялёнае поле на фота). Мая выява мае памер 1920 × 1280 - першая лічба, 1920, уяўляе шырыню маёй выявы (у пікселях), а другая лічба, 1280, уяўляе вышыню маёй выявы. Канчатковыя памеры выявы, якія вы захочаце выкарыстоўваць для выявы, будуць залежаць ад таго, дзе ў WordPress вы збіраецеся выкарыстоўваць выяву, а таксама ад таго, якую тэму вы выкарыстоўваеце.

Для гэтага падручніка я змяню памер выявы да стандартнага памеру 1200 × 630 пікселяў, які рэкамендуецца для малюнкаў у блогу.

Маючы гэта на ўвазе, першае, што я хачу зрабіць, гэта абрэзаць сваю выяву так, каб суадносіны бакоў майго зыходнага відарыса адпавядалі суадносінам бакоў рэкамендаванага памеру. Для гэтага я вазьму інструмент кадравання, націснуўшы Shift+C на клавіятуры або націснуўшы значок інструмента кадравання ў панэлі інструментаў GIMP (чырвоная стрэлка на малюнку вышэй).

Далей у параметрах інструмента для гэтага інструмента я пастаўлю галачку насупраць «Выпраўлена» (зялёная стрэлка) і пстрыкну расчыняецца меню, каб выбраць «Суадносіны бакоў» (сіняя стрэлка).

Я набяру «1200:630», каб усталяваць суадносіны бакоў у тэкставым полі пад выпадальным меню (жоўтая стрэлка). Гэта супадае з суадносінамі бакоў рэкамендаванага памеру выявы, які я хачу мець у канчатковым выглядзе.

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

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

Вы можаце навесці курсор мышы на любы з бакоў або вуглоў вобласці абрэзкі (г.зн. вылучанай вобласці, пазначанай чырвонай стрэлкай на малюнку вышэй), затым націснуць і перацягнуць, каб змяніць памер мяжы вобласці абрэзкі. Звярніце ўвагу, што вы заўсёды можаце ўбачыць памер вобласці абрэзкі ў палях «Памер», размешчаных у параметрах інструмента (на малюнку вышэй абведзены зялёным). Вы захочаце захаваць агульны памер вобласці абрэзкі большым, чым канчатковы памер выявы 1200×630.

Вы таксама можаце пстрыкнуць і перацягнуць мышшу пасярэдзіне вобласці абрэзкі (чырвоная стрэлка), каб змяніць месца абрэзкі на малюнку.

Калі вы будзеце гатовыя абрэзаць выяву, пстрыкніце адзін раз у вобласці абрэзкі, і выява будзе абрэзана.

Звярніце ўвагу, што калі параметр «Выдаліць абрэзаныя пікселі» ў параметрах інструмента не пазначаны (зялёная стрэлка на малюнку вышэй), мяжа зыходнага відарыса ўсё роўна будзе адлюстроўвацца вакол вашага відарыса праз жоўты пункцір (чырвоная стрэлка). Вы можаце аднавіць зыходны відарыс, адмяніўшы кадраванне, перайшоўшы ў Выява>Падпасаваць палатно да слаёў. Будзе экспартавана толькі вобласць вашага відарыса ўнутры мяжы палатна.

Наша выява цяпер абрэзана да патрэбнага нам суадносін бакоў, але калі вы яшчэ раз паглядзіце на памеры нашай выявы ў радку загалоўка, вы ўбачыце, што выява мае 1532 × 804 (акрэслена зялёным і павялічана на фота вышэй – вашы памеры, хутчэй за ўсё, будуць крыху адрознівацца ў залежнасці ад таго, наколькі вялікі вы намалявалі вобласць абрэзкі на малюнку). Цяпер нам трэба маштабаваць малюнак, каб ён адпавядаў жаданым памерам.

Для гэтага перайдзіце ў Выява>Маштаб малюнка (чырвоная стрэлка).

У полі «Маштаб выявы», якое з'явіцца, у раздзеле «Памер выявы» пераканайцеся, што значок звяна ланцужка побач з палямі «шырыня» і «вышыня» звязаны (чырвоная стрэлка на фота вышэй). Затым змяніце «Шырыню» выявы на 1200 (зялёная стрэлка). Націсніце клавішу табуляцыі. Вышыня выявы аўтаматычна абновіцца да «630». У раздзеле «Якасць» упэўніцеся, што для выпадальнага меню «Інтэрпаляцыя» (сіняя стрэлка) усталявана «NoHalo» або «LoHalo» для лепшай якасці выявы пасля маштабавання. (Для атрымання дадатковай інфармацыі аб інтэрпаляцыі, праверце мой падручнік па гэтай тэме).

Націсніце кнопку «Маштаб», каб павялічыць малюнак (жоўтая стрэлка).

Пасля завяршэння маштабавання праверце памеры выявы ў радку загалоўка. Цяпер вы павінны ўбачыць памер выявы 1200 × 630 - менавіта той памер, які мы жадаем! Такім чынам, што нам цяпер рабіць?

Сцісніце выяву шляхам экспарту ў WebP

Абрэзка і маштабаванне выявы паменшылі памер файла за кошт памяншэння вышыні выявы з 1920 да 1200 пікселяў і шырыні з 1280 да 630 пікселяў, але мы можам яшчэ больш паменшыць памер выявы, ужываючы сціск падчас экспарту выявы.  

Такім чынам, цяпер нам трэба экспартаваць малюнак у фармат файла, які будзе прымяняць сціск да выявы без прыкметнага зніжэння якасці выявы. Нягледзячы на ​​тое, што JPEG заўсёды добры варыянт, цяпер даступны яшчэ лепшы варыянт: WebP.

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

Каб экспартаваць у WebP, перайдзіце ў меню Файл>Экспартаваць як (чырвоная стрэлка).

Пстрыкніце любую з тэчак у раздзеле «Месцы» (абведзены зялёным контурам), каб выбраць выяву на вашым камп'ютары, куды вы хочаце захаваць выяву. Вы можаце проста двойчы пстрыкнуць папку, каб увайсці ў яе, і ўбачыць, у якой тэчцы вы знаходзіцеся, побач з назвай «Захаваць у тэчцы» (чырвоная стрэлка). Затым перайменуйце сваю выяву ў любую, якую вы хочаце - проста пераканайцеся, што вы заканчваеце назву выявы пашырэннем «.webp» (сіняя стрэлка), каб экспартаваць выяву ў фармат WebP. Калі вы будзеце гатовыя, націсніце «Экспарт» у правым ніжнім куце акна (жоўтая стрэлка).

Далей з'явіцца дыялогавае акно «Экспарт выявы як WebP». Упэўніцеся, што галачка "Без страт" знята (чырвоная стрэлка). Звычайна я ўстанаўліваю «Якасць выявы» на 80 (сіняя стрэлка - гэта працэнт, таму чым ніжэй працэнт, тым ніжэй будзе якасць выявы, але меншым будзе памер файла выявы). Калі ваш відарыс не ўтрымлівае празрыстасці (напрыклад, лагатып без фону), вам не трэба турбавацца аб паўзунку «Альфа-якасць» (фактычна, у эксперыменце, які я правёў, якасць альфа-канала крыху знізілася са 100 да 90 павялічаны памер файла выявы з празрыстым фонам з 8.50 кб да 8.52 кб). У выпадальным спісе «Тып крыніцы» можна пакінуць «Па змаўчанні».

Вы самі вырашаеце, ці хочаце вы паставіць або зняць галачку з параметраў метададзеных, уключаючы дадзеныя Exif, дадзеныя ITPC і дадзеныя XMP. Даныя Exif і XMP - гэта метаданыя, якія звычайна прызначаюцца вашай камерай і якія апісваюць інфармацыю аб вашай фатаграфіі, напрыклад, мадэль камеры або тып аб'ектыва. ITPC, з іншага боку, выкарыстоўваецца прадстаўнікамі прэсы і прысвойвае вашай выяве такую ​​інфармацыю, як права ўласнасці, правы і ліцэнзаванне. Калі вы не ведаеце, што рабіць, проста пакіньце гэтыя параметры адзначанымі.

Сапраўды гэтак жа можна пакінуць опцыю «Захаваць каляровы профіль» не адзначанай, бо большасць браўзераў будзе аўтаматычна выкарыстоўваць каляровую прастору sRGB для адлюстравання вашага малюнка, што і выкарыстоўвае GIMP. Калі вы выкарыстоўваеце іншы каляровы профіль, вы захочаце пакінуць гэта галачкай. Акрамя таго, калі вы турбуецеся аб тым, што выява не будзе адлюстроўвацца належным чынам у пэўных браўзерах, пакідаючы галачку, вы дадасце толькі некалькі кб да агульнага памеру выявы.

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

Націсніце «Экспарт» (жоўтая стрэлка на малюнку вышэй), каб экспартаваць выяву ў фармат WebP. Калі параўноўваць экспартаваны файл WebP з файлам JPEG, які мае такі ж памер і мае якасць "80", відарыс WebP мае памер прыкладна на 30 кб, або прыблізна на 25%, меншы за памер JPEG.

Цяпер вы можаце ўвайсці на свой сайт WordPress і перайсці да старонкі або паведамлення, куды вы хочаце загрузіць выяву, або проста перайсці ў раздзел «Медыя» з дапамогай галоўнай навігацыі і перацягнуць выяву ў медыятэку. У маім выпадку я перайду да «Публікацыі» з дапамогай галоўнай панэлі навігацыі (чырвоная стрэлка на малюнку вышэй) і націсну «Публікацыя ў блогу 1» (сіняя стрэлка), каб адрэдагаваць гэтую публікацыю ў блогу.

Затым я адкрыю бакавую панэль налад публікацыі (чырвоная стрэлка), пракручу ўніз да раздзела «Выбраная выява» і разгарну гэты раздзел (сіняя стрэлка). Потым я пстрыкну выяву, каб замяніць яе сваёй новай выявай.

Я перайду на ўкладку «Загрузка файлаў» (чырвоная стрэлка) і магу перацягнуць сваю выяву з камп'ютара ў WordPress (сінія стрэлкі).

Нарэшце, я націскаю «Усталяваць абраны відарыс», каб прымяніць гэта змяненне (чырвоная стрэлка).

Націсніце «Абнавіць» (чырвоная стрэлка), каб абнавіць сваю старонку новай выявай.

Калі я націскаю «Праглядзець паведамленне», (сіняя стрэлка)...

... зараз вы ўбачыце новы паказаны малюнак уверсе майго блога.

Вось і ўсё для гэтага падручніка! Калі вы хочаце даведацца больш аб распрацоўцы вэб-сайта WordPress, я рэкамендую праверыць мой Курс WordPress 6.0 для некадэраў! Ці, калі вы хочаце даведацца больш пра GIMP, праверце мой Майстар-клас GIMP 2.10 на Udemy!   

Падпішыцеся на рассылку DMD

Падпішыцеся на рассылку DMD

Падпішыцеся, каб атрымліваць новыя падручнікі, абнаўленні курсаў і апошнія навіны пра ваша любімае праграмнае забеспячэнне з адкрытым зыходным кодам!

Вы паспяхова падпісаліся!

Pin It на Pinterest

падзяліцца гэтай