Дали барате да прикачувате слики на вашата страница на WordPress, но не сте сигурни какви големини или типови на датотеки треба да бидат сликите? Дали не сте запознаени со процесот на промена на големината и компресирање на слики за веб? Во оваа статија, ќе објаснам зошто користењето на правилна големина на сликата е важно за вашата веб-локација, плус ќе ви покажам како да ја промените големината и да ги компресирате вашите слики користејќи го бесплатниот уредувач на фотографии GIMP.

Содржина

Зошто промената на големината на сликите на вашата веб-страница е важна

Да почнеме со тоа зошто промената на големината на сликите на вашата веб-страница е толку важна.

Според WordPress.org, целокупната „физичка големина“ на сликата игра огромна улога во перформансите на веб-страницата. „Големината на датотеката [на слика] го диктира времето потребно за вчитување на вашата страница; колку е поголема големината на датотеката... толку подолго ќе треба да се вчита [страница]“. Со други зборови, поставувањето голема големина на датотека на вашата веб-локација ќе ги забави перформансите на која било страница на која ќе ја додадете содржината, обично прикажувајќи се како побавни брзини на вчитување на страницата во аналитичките податоци на вашата страница.

„Големината на датотеката [на слика] го диктира времето потребно за вчитување на вашата страница; колку е поголема големината на датотеката... толку подолго ќе треба да се вчита [страница]“.

-WordPress.org

Брзина на вчитување на страницата, исто така наречена едноставно како „Страна Брзина,“ е „колку брзо се вчитува содржината на вашата страница“, според Веб-страница за оптимизација Moz. Имањето побавни страници може да резултира со повисоки “стапки на отскокнување,“ што е фенси метрика што ги претставува сесиите каде што посетителот на страницата ја напушта вашата страница откако ќе прегледа една страница.

Побавните страници исто така може да го намалат времето што посетителите го поминуваат на страниците на вашата страница, бидејќи луѓето може да бидат нестрпливи чекајќи содржината на страницата да се вчита и побрзо да ја напуштат вашата страница.

Овие метрики се важни затоа што обично сакате корисниците да поминуваат повеќе време на вашата страница и да гледаат повеќе страници низ вашата страница.

Тие се исто така важни затоа што играат улога во тоа како вашата страница се рангира на страниците со резултати од пребарувачот или „SERPs“. SERPs се едноставно страници со резултати што се прикажуваат кога внесувате збор или фраза во Google и притискате на копчето Enter. Бидејќи поголемите слики укажуваат на лоши практики за веб-дизајн и негативно влијаат на искуството на корисникот додека се на вашиот сајт, пребарувачите како Google може да казни вашиот сајт за да ги имате овие поголеми слики и рангирајте ја вашата веб-страница под другите веб-локации кои работат подобро.

Колку е пониско рангирањето на вашата веб-страница на Google, на пример, толку помалку сообраќај добива вашата страница и толку повеќе сообраќај ќе оди кај вашите конкуренти кои се рангирани над вас во резултатите од пребарувањето.

Со намалување на големината на датотеката на вашите слики на вашата веб-локација, можете да ја подобрите вашата Страна Брзина и на тој начин да се подобрат другите метрики како отскокнување стапка време на стрд на крајот да го подобрите вашето рангирање на пребарувачите.

Имајте предвид дека има многу други важни променливи кои влегуваат во рангирањето на пребарувањето, така што поправањето на вашите слики е само дел од солидна Оптимизација (Search Engine Optimization) стратегија. Сепак, секако е многу важно да му помогнете на вашиот сајт да се рангира повисоко на места како Google за да помогне да се зголеми сообраќајот на вашата страница.

WordPress поедноставен: Курс како да изградите моќни веб-страници од Дејвис Медиа Дизајн

Како да ја промените големината на сликите за WordPress во GIMP

Значи, како правилно да ја менувате големината на сликите за WordPress?

Можете да ја намалите големината на датотеката на сликата едноставно со намалување на вкупната големина на сликата користејќи скалирање сечење пред да го поставите на вашата веб-страница. Плус, можете да го примените она што се нарекува „компресија” на вашата слика за дополнително да ја намалите нејзината големина.

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

Чекор 1: Отворете ја вашата слика

За да започнете со овој процес, отворете ја сликата што сакате да ја поставите на вашата страница во GIMP. Можете да го направите ова со влечење и пуштање на вашата слика од вашиот компјутер во прозорецот со слики на GIMP, или едноставно можете да отидете во File>Open кога сте во GIMP.

Ако го користите методот File>Open, одете до локацијата на сликата на вашиот компјутер од внатрешноста на дијалогот „Отвори слика“ што се појавува и кликнете двапати на датотеката со сликата откако ќе ја лоцирате за да ја отворите во GIMP (или кликнете на Копче „Отвори“ во долниот десен агол на прозорецот за дијалог).

Чекор 2: Најдете ги димензиите на вашата слика

На самиот врв на прозорецот GIMP е карактеристика наречена „Лента за наслов“ (црвена стрелка на сликата погоре). Овде, ќе ги видите моменталните димензии на вашата слика (зголемена зелена кутија на фотографијата). Мојата слика е 1920×1280 – со првиот број, 1920, што ја претставува ширината на мојата слика (во пиксели), а вториот број, 1280, ја претставува висината на мојата слика. Конечните димензии на сликата што ќе сакате да ги користите за вашата слика ќе зависат од тоа каде во WordPress имате намера да ја користите сликата, како и од тоа која тема ја користите.

За ова упатство, ќе ја сменам големината на мојата слика до стандардната големина од 1200×630 пиксели што се препорачува за слики од блогови.

Чекор 3: Променете го соодносот на сликата со алатката Crop Tool

Имајќи го ова на ум, првото нешто што ќе сакам да направам е да ја исечам мојата слика така што соодносот на мојата оригинална слика ќе се совпаѓа со соодносот на сликата на препорачаната големина. За да го направите ова, ќе ја зграпчам мојата алатка за сечење со притискање на shift+c на мојата тастатура или кликнување на иконата за алатката за сечење во GIMP Toolbox (црвена стрелка на сликата погоре).

Следно, во Опции на алатката за оваа алатка, ќе го штиклирам полето до „Поправено“ (зелена стрелка) и ќе кликнам на паѓачкото мени за да изберете „Сооднос на аспект“ (сина стрелка).

Ќе напишам „1200:630“ за да го поставам мојот сооднос во полето за текст под паѓачкото мени (жолта стрелка). Ова се совпаѓа со соодносот на препорачаната големина на сликата што сакам да биде мојата конечна слика.

Користејќи ја алатката за сечење, сега ќе кликнам и ќе го влечам глувчето низ сликата за да ја нацртам областа за сечење. Кога ќе го пуштам глувчето, сè надвор од областа за сечење ќе биде затемнето (црвената стрелка на сликата погоре - под претпоставка дека „Означи“ е означено во Опциите на алатката, што обично е стандардно).

Стандардно, мојата област за отсекување ги има водичите поставени како „Централни линии“ (жолта стрелка на сликата погоре). Можам да ја сменам оваа поставка користејќи ги паѓачките водичи кон дното на Опциите на алатките. На пример, ќе ги сменам моите водичи во „Правило на третини“ (зелена стрелка). Различните опции за водич овде се засноваат на принципи на фотографија, што го олеснува врамувањето на вашата композиција користејќи ги овие принципи.

Можете да лебдите со глувчето над која било од страните или аглите на областа за сечење (т.е. означената област означена со црвената стрелка на сликата погоре), потоа кликнете и повлечете за да ја промените големината на границата на областа за сечење. Забележете дека секогаш можете да ја видите големината на вашата област за отсекување во полињата „Големина“ лоцирани во Опциите на алатките (наведени со зелено на сликата погоре). Ќе сакате да ја задржите вкупната големина на површината за отсекување поголема од крајната големина од 1200×630 на сликата.

Можете исто така да кликнете и повлечете го глувчето во средината на областа за сечење (црвена стрелка) за да го репозиционирате исечокот на сликата.

Откако ќе бидете подготвени да ја исечете сликата, кликнете еднаш во областа за сечење и вашата слика ќе биде отсечена.

Забележете дека ако опцијата „Избриши исечени пиксели“ во Опциите на алатката е отштиклирана (зелена стрелка на сликата погоре), вашата оригинална граница на сликата сè уште ќе се прикажува околу вашата слика преку жолта линија со точки (црвена стрелка). Можете да ја вратите оригиналната слика, со што ќе го вратите исечокот, со одење до Image>Fit Canvas to Layers. Ќе се извезе само областа на вашата слика во рамките на границата на платното.

Чекор 4: Скалирај ја вашата слика

Нашата слика сега е отсечена на соодносот што го сакаме, но ако уште еднаш ги погледнете димензиите на нашата слика во „Лентата за наслов“ ќе видите дека сликата е 1532×804 (исцртана со зелена боја и зголемена на горната фотографија – вашите димензии најверојатно ќе бидат малку поинакви врз основа на тоа колку голема сте ја нацртале вашата површина за отсекување на вашата слика). Сега ќе треба да ја зголемиме нашата слика за да одговара на саканите димензии.

За да го направите ова, одете до Image>Scale Image (црвена стрелка).

Во полето „Scale Image“ што се појавува, под „Image Size“, проверете дали иконата за врска со синџирот до полињата „ширина“ и „висина“ е поврзана (црвена стрелка на горната фотографија). Потоа, сменете ја „Ширината“ на вашата слика на 1200 (зелена стрелка). Притиснете го копчето за јазиче. Висината на сликата автоматски ќе се ажурира на „630“. Под „Квалитет“, проверете дали паѓачкото мени „Интерполација“ (сина стрелка) е поставено или на „NoHalo“ или „LoHalo“ за најдобар квалитет на сликата по скалирањето. (За повеќе информации за интерполација, проверете го мојот туторијал на оваа тема).

Притиснете го копчето „Scale“ за да ја зголемите вашата слика (жолта стрелка).

Откако ќе заврши скалирањето, проверете ги димензиите на сликата во лентата за наслов. Сега треба да видите големина на слика од 1200×630 - точната големина што ја сакаме! Па, што правиме сега?

Чекор 5: Компресирајте ја вашата слика со извоз

Сечење и скалирање на сликата ја намалија големината на датотеката со намалување на висината на сликата од 1920 на 1200 пиксели и ширината од 1280 на 630 пиксели, но можеме да ја намалиме големината на сликата уште повеќе со примена на компресија кога ја извезуваме сликата.  

Значи, сега треба да ја извеземе сликата во формат на датотека што ќе примени компресија на сликата без значително да го намали квалитетот на сликата. Иако JPEG-овите се секогаш добра опција, сега е достапна уште подобра опција: WebP.

Форматот WebP применува поголема компресија од JPEG додека влијае на квалитетот на сликата помалку од JPEG. Со други зборови, ќе добиете подобра слика со помала големина на датотека. Плус, WebP форматите се поддржани од сите топ 5 веб-прелистувачи.

За да извезете во WebP, одете до Датотека>Извези како (црвена стрелка).

Кликнете на која било од папките во делот „Места“ (оцртана со зелено) за да ја изберете сликата на вашиот компјутер каде што сакате да ја зачувате вашата слика. Можете едноставно да кликнете двапати на папка за да ја внесете и да видите во која папка се наоѓате веднаш до насловот „Зачувај во папка“ (црвена стрелка). Потоа, преименувајте ја вашата слика во она што сакате - само погрижете се да го завршите името на вашата слика со наставката „.webp“ (сина стрелка) за да ја извезете сликата во формат WebP. Кога ќе бидете подготвени, кликнете „Извези“ во долниот десен агол на прозорецот (жолта стрелка).

Следно, ќе се појави дијалогот „Извези слика како WebP“. Проверете дали „Lossless“ е отштиклирана (црвена стрелка). Јас обично го поставувам „Квалитет на слика“ на 80 (сина стрелка - ова е процент, па колку е помал процентот, толку помал ќе биде квалитетот на сликата, но колку ќе биде помала големината на датотеката со сликата). Ако вашата слика не содржи транспарентност (т.е. лого без позадина), не мора да се грижите за лизгачот „Алфа квалитет“ (всушност, во експеримент што го изведов, малку го намалив алфа-квалитетот од 100 на 90 ја зголеми големината на датотеката на слика со проѕирна позадина од 8.50 kb на 8.52 kb). Напаѓачкото мени „Тип на извор“ може да го задржите на „Стандардно“.

Дали сакате или не сакате да проверите или отштиклирате некоја од опциите за метаподатоци, вклучувајќи податоци Exif, податоци ITPC и податоци XMP, зависи од вас. Податоците Exif и XMP се метаподатоци вообичаено доделени од вашиот фотоапарат и кои опишуваат информации за вашата фотографија, како на пр., каков модел на фотоапарат е користен или каков тип на објектив е користен. ITPC, од друга страна, се користи од членовите на печатот и доделува информации за вашата слика како што се сопственост, права и лиценцирање. Ако не сте сигурни што да правите, само оставете ги означени овие опции.

Исто така, добро сте оставајќи ја опцијата „Зачувај профил во боја“ отштиклирана бидејќи повеќето прелистувачи автоматски ќе го користат просторот за боја sRGB за да ја прикажат вашата слика, што е она што го користи GIMP. Ако користите профил со различна боја, ова ќе сакате да го оставите означено. Исто така, ако сте загрижени дека сликата не се прикажува правилно за одредени прелистувачи, ако ја оставите означена, додавате само неколку kb на вкупната големина на сликата.

Конечно, опцијата „Зачувај сликичка“ може да остане нештиклирана, што дополнително ќе ни заштеди неколку килобајти.

Кликнете на „Извези“ (жолта стрелка на сликата погоре) за да ја изнесете сликата во формат WebP. Кога се споредува извезената WebP-датотека со JPEG-датотека која е со иста големина, а нејзиниот квалитет е поставен на „80“, сликата на WebP доаѓа со околу 30 kb, или приближно 25%, помала по големина од JPEG.

Чекор 6: Поставете ја вашата слика на WordPress

Сега можете да се најавите на вашата веб-страница на WordPress и да отидете на страницата или објавата каде што сакате да ја поставите вашата слика, или едноставно да отидете во делот „Медиуми“ користејќи ја главната навигација и да ја повлечете и пуштите вашата слика во Медиумската библиотека. Во мојот случај, ќе отидам до „Објави“ користејќи ја главната навигација (црвена стрелка на сликата погоре) и ќе кликнам на „Блог пост 1“ (сина стрелка) за да ја уредам таа објава на блогот.

Потоа ќе ја отворам страничната лента за поставки за објавување (црвена стрелка) и ќе скролувам надолу до делот „Избрана слика“ и ќе го проширам овој дел (сина стрелка). Потоа, ќе кликнам на сликата за да ја заменам со мојата нова слика.

Ќе отидам до табулаторот „Подигни датотеки“ (црвена стрелка) и ќе можам да ја влечам и испуштам мојата слика од мојот компјутер во WordPress (сини стрелки).

Конечно, ќе кликнам „Постави истакната слика“ за да ја применам оваа промена (црвена стрелка).

Кликнете на „Ажурирај“ (црвена стрелка) за да ја ажурирате вашата страница со новата избрана слика.

Ако кликнам „Прегледај објава“ (сина стрелка)…

…сега ќе ја видите новата избрана слика прикажана на врвот на мојот блог.

Тоа е тоа за овој туторијал! Ако сакате да дознаете повеќе за дизајнирање веб-страница на WordPress, препорачувам да ја проверите мојата Курс за WordPress 6.0 за некодирачи! Или, ако сакате да дознаете повеќе за GIMP, проверете го мојот GIMP 2.10 Masterclass на Udemy!   

Пин Тоа на Pinterest