Искате ли да качите изображения на вашия WordPress сайт, но не сте сигурни какви размери или файлови типове трябва да бъдат изображенията? Не сте запознати с процеса на преоразмеряване и компресиране на изображения за уеб? В тази статия ще обясня защо използването на правилното оразмеряване на изображението е важно за вашия уебсайт, както и ще ви покажа как да преоразмерявате и компресирате вашите изображения с помощта на безплатния фоторедактор GIMP.

Защо преоразмеряването на изображенията на вашия уебсайт е важно

Нека започнем с това защо преоразмеряването на изображенията на вашия уебсайт е толкова важно.

Според WordPress.org, общият „физически размер“ на изображението играе огромна роля за представянето на страницата на уебсайта. „Размерът на файла [на изображение] диктува времето, необходимо за зареждане на вашата страница; колкото по-голям е размерът на файла... толкова повече време ще отнеме зареждането на [страница].“ С други думи, качването на файл с голям размер на вашия уебсайт ще забави работата на всяка страница, към която добавите съдържанието, като обикновено се показва като по-ниска скорост на зареждане на страницата в аналитичните данни на вашия сайт.

„Размерът на файла [на изображение] диктува времето, необходимо за зареждане на вашата страница; колкото по-голям е размерът на файла... толкова повече време ще отнеме зареждането на [страница].“

-WordPress.org

Скорост на зареждане на страницата, наричана още просто „скорост страница,“ е „колко бързо се зарежда съдържанието на вашата страница“, според SEO сайт Moz. Наличието на по-бавни страници може да доведе до по-високи „нива на отпадане”, което е фантастичен показател, представящ сесии, при които посетител на сайта напуска вашия сайт, след като е прегледал една страница. По-бавните страници също могат да намалят времето, което посетителите прекарват на страниците на вашия сайт, тъй като хората може да станат нетърпеливи в очакване съдържанието на страницата да се зареди и да напуснат сайта ви по-бързо.

Тези показатели са важни, защото обикновено искате потребителите да прекарват повече време на вашия сайт и да разглеждат повече страници в него.

Те също така са важни, защото играят роля в това как вашият сайт се класира на страниците с резултати от търсачките или „SERP“. SERPs са просто страниците с резултати, които се показват, когато въведете дума или фраза в Google и натиснете клавиша enter. Тъй като по-големите изображения са показателни за лоши практики за уеб дизайн и влияят негативно върху изживяването на потребителя, докато е на вашия сайт, търсачки като Google може санкционират вашия сайт за тези по-големи изображения и класирайте уебсайта си под други уебсайтове, които се представят по-добре.

Колкото по-ниско се класира уебсайтът ви в Google, например, толкова по-малко трафик получава сайтът ви и толкова повече трафик ще отиде при вашите конкуренти, които се класират над вас в резултатите от търсенето.

Като намалите размера на файла на вашите изображения на уебсайта си, можете да подобрите своя скорост страница и по този начин подобрява други показатели като степента на отпадане и време на пагe, за да подобрите в крайна сметка класирането си в търсачките.

Имайте предвид, че има много други важни променливи, които влизат в класирането при търсене, така че коригирането на вашите изображения е само част от солидна SEO (Оптимизация за търсачки) стратегия. Със сигурност обаче е много важно да помогне на вашия сайт да се класира по-високо на места като Google, за да помогне за увеличаване на трафика на вашия сайт.

Как да преоразмерите изображения за WordPress в GIMP

И така, как правилно да преоразмерявате изображения за WordPress?

Можете да намалите размера на файла на изображението просто като намалите общия размер на изображението с помощта на мащабиране и изрязване преди да го качите на уебсайта си. Освен това можете да приложите това, което се нарича „компресия” към вашето изображение, за да намалите допълнително размера му.

GIMP, безплатният фоторедактор с отворен код, може да изпълни всички тези задачи, като същевременно експортира в препоръчани файлови формати от „следващо поколение“, за да намали допълнително размера на файловете на вашите изображения и да подобри производителността на вашия сайт.

Мащабирайте изображението си

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

Ако използвате метода File>Open, навигирайте до местоположението на изображението на вашия компютър от диалоговия прозорец „Open Image“, който се появява, и щракнете двукратно върху файла с изображение, след като го намерите, за да го отворите в GIMP (или щракнете върху Бутон „Отвори“ в долния десен ъгъл на диалоговия прозорец).

В горната част на прозореца на GIMP има функция, наречена „Заглавна лента“ (червена стрелка на изображението по-горе). Тук ще видите текущите размери на вашето изображение (уголемено зелено поле на снимката). Изображението ми е 1920×1280 – с първото число, 1920, представлява ширината на изображението ми (в пиксели), а второто число, 1280, представлява височината на изображението ми. Окончателните размери на изображението, които ще искате да използвате за вашето изображение, ще зависят от това къде в WordPress възнамерявате да използвате изображението, както и каква тема използвате.

За този урок ще преоразмеря изображението си до стандартния размер 1200 × 630 пиксела, който се препоръчва за изображения в публикации в блогове.

Имайки това предвид, първото нещо, което ще искам да направя, е да изрежа изображението си, така че съотношението на оригиналното ми изображение да съответства на съотношението на препоръчания размер. За да направя това, ще взема своя инструмент за изрязване, като натисна shift+c на клавиатурата си или щракна върху иконата на инструмента за изрязване в кутията с инструменти на GIMP (червена стрелка на изображението по-горе).

След това в опциите на инструмента за този инструмент ще поставя отметка в квадратчето до „Фиксиран“ (зелена стрелка) и ще щракнете върху падащото меню, за да изберете „Съотношение“ (синя стрелка).

Ще напиша „1200:630“, за да задам моето съотношение в текстовото поле под падащото меню (жълта стрелка). Това съответства на съотношението на препоръчания размер на изображението, което искам да бъде крайното ми изображение.

Използвайки инструмента за изрязване, сега ще щракна и плъзна мишката върху изображението, за да начертая зоната за изрязване. Когато пусна мишката, всичко извън зоната за изрязване ще бъде затъмнено (червена стрелка в изображението по-горе – ако приемем, че „Открояване“ е отметнато в опциите на инструмента, което обикновено е по подразбиране).

По подразбиране моята област за изрязване има водачите, зададени като „Централни линии“ (жълта стрелка на изображението по-горе). Мога да променя тази настройка, като използвам падащото меню с ръководства в долната част на опциите на инструмента. Например, ще променя водачите си на „Правило на третините“ (зелена стрелка). Различните опции за ръководство тук се основават на принципите на фотографията, което улеснява кадрирането на вашата композиция с помощта на тези принципи.

Можете да задържите курсора на мишката над която и да е от страните или ъглите на зоната за изрязване (т.е. маркираната област, обозначена с червената стрелка на изображението по-горе), след което щракнете и плъзнете, за да промените размера на границата на областта за изрязване. Обърнете внимание, че винаги можете да видите размера на вашата зона за изрязване в полетата „Размер“, намиращи се в опциите на инструмента (очертани в зелено на изображението по-горе). Вие ще искате да запазите общия размер на областта за изрязване по-голям от крайния размер 1200 × 630 на изображението.

Можете също така да щракнете и плъзнете мишката в средата на зоната за изрязване (червена стрелка), за да промените позицията на изрязването върху изображението.

След като сте готови да изрежете изображението, щракнете веднъж в зоната за изрязване и вашето изображение ще бъде изрязано.

Обърнете внимание, че ако опцията „Изтриване на изрязани пиксели“ в опциите на инструмента не е отметната (зелена стрелка в изображението по-горе), оригиналната граница на изображението все още ще се показва около изображението чрез жълта пунктирана линия (червена стрелка). Можете да възстановите оригиналното изображение, като по този начин отмените изрязването, като отидете на Image>Fit Canvas to Layers. Само областта от вашето изображение вътре в границата на платното ще бъде експортирана.

Нашето изображение вече е изрязано до съотношението, което желаем, но ако погледнете още веднъж размерите на нашето изображение в „Заглавната лента“, ще видите, че изображението е 1532 × 804 (очертано в зелено и увеличено на горната снимка – вашите размери вероятно ще бъдат малко по-различни в зависимост от това колко голяма сте начертали зоната за изрязване на вашето изображение). Сега ще трябва да мащабираме нашето изображение, за да съответства на желаните от нас размери.

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

В полето „Мащабиране на изображението“, което се появява, под „Размер на изображението“, уверете се, че иконата на връзката на веригата до полетата „ширина“ и „височина“ е свързана (червена стрелка на снимката по-горе). След това променете „Ширина“ на вашето изображение на 1200 (зелена стрелка). Натиснете клавиша tab. Височината на изображението ще се актуализира автоматично до „630“. Под „Качество“ се уверете, че падащото меню „Интерполация“ (синя стрелка) е зададено на „NoHalo“ или „LoHalo“ за най-добро качество на изображението след мащабирането. (За повече информация относно интерполацията, вижте моя урок по темата).

Натиснете бутона „Мащаб“, за да мащабирате изображението си (жълта стрелка).

След като мащабирането приключи, проверете размерите на изображението в заглавната лента. Сега трябва да видите размер на изображението 1200×630 – точният размер, който искаме! И така, какво ще правим сега?

Компресирайте вашето изображение чрез експортиране в WebP

Изрязването и мащабирането на изображението намалиха размера на файла, като намалиха височината на изображението от 1920 на 1200 пиксела и ширината от 1280 на 630 пиксела, но можем да намалим размера на изображението още повече, като прилагаме компресия, когато експортираме изображението.  

И така, сега трябва да експортираме изображението във файлов формат, който ще приложи компресия към изображението, без забележимо да намали качеството на изображението. Въпреки че JPEG файловете винаги са добра опция, сега има още по-добра опция: WebP.

Форматът WebP прилага повече компресия от JPEG, като същевременно влияе по-малко на качеството на изображението от JPEG. С други думи, ще получите по-добре изглеждащо изображение с по-малък размер на файла. Освен това WebP форматите се поддържат от всички топ 5 уеб браузъра.

За да експортирате в WebP, отидете на File>Export As (червена стрелка).

Щракнете върху някоя от папките в секцията „Места“ (очертана в зелено), за да изберете изображението на вашия компютър, където искате да запазите изображението си. Можете просто да щракнете двукратно върху папка, за да влезете в нея, и да видите в коя папка се намирате до заглавието „Запазване в папка“ (червена стрелка). След това преименувайте изображението си на каквото желаете – просто се уверете, че завършвате името на изображението си с разширението „.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.

Вече можете да влезете в сайта си на WordPress и да отидете до страницата или публикацията, където искате да качите изображението си, или просто да отидете до секцията „Медия“ с помощта на главната навигация и да плъзнете и пуснете изображението си в медийната библиотека. В моя случай ще навигирам до „Публикуване“ с помощта на основната навигация (червена стрелка на изображението по-горе) и ще щракна върху „Публикация в блог 1“ (синя стрелка), за да редактирам тази публикация в блога.

След това ще отворя страничната лента с настройки на публикацията (червена стрелка) и ще превъртя надолу до секцията „Представено изображение“ и ще разширя тази секция (синя стрелка). След това ще щракна върху изображението, за да го заменя с моето ново изображение.

Ще навигирам до раздела „Качване на файлове“ (червена стрелка) и мога да плъзгам и пускам изображението си от моя компютър в WordPress (сини стрелки).

Накрая ще щракна върху „Задаване на избрано изображение“, за да приложа тази промяна (червена стрелка).

Щракнете върху „Актуализиране“ (червена стрелка), за да актуализирате страницата си с ново представено изображение.

Ако щракна върху „Преглед на публикацията“, (синя стрелка)…

...сега ще видите новото представено изображение в горната част на моя блог.

Това е всичко за този урок! Ако искате да научите повече за проектирането на уебсайт на WordPress, препоръчвам ви да разгледате моя WordPress 6.0 за курс за хора, които не програмират! Или, ако искате да научите повече за GIMP, разгледайте моя GIMP 2.10 Майсторски клас на Udemy!   

Абонирайте се за бюлетина на DMD

Абонирайте се за бюлетина на DMD

Регистрирайте се, за да получавате нови уроци, актуализации на курсове и най-новите новини за любимия си софтуер с отворен код!

Абонирахте се успешно!

Тя ПИН на Pinterest