Изображенията (снимки, графики, гифове и др.) са важна част от съвременния уеб дизайн. Сами по себе си те могат да превърнат един иначе плосък и безлик дизайн в изключително атрактивен уебсайт. В контекста на съдържанието на страницата, изображенията могат да подсилят съобщението, което предава страницата.
“Една снимка струва повече от хиляда думи”
Много често обаче изображенията са причина за бавното зареждане на един уебсайт. Какво се прави в този случай? Ако снимките на сайта са наистина важна част от него, тогава трябва да се научиш как да ги оптимизираш без да се губи качество.
В тази статия ще поясним по-подробно как да оптимизираме изображенията, така че да подобрим скоростта на зареждане на WordPress.
Съдържание
- Защо трябва да се оптимизират изображенията в WordPress
- Как да оптимизираме изображенията, без загуба на качество
- Физически размер на изображението
- Какво означава Serve scaled images?
- Резолюция на снимките
- Размер на файла
- Компресиране на изображения с TinyPNG.com
- Тип на файла
- 7 плъгина за оптимизиране на изображения в WordPress
- 5 добри безплатни онлайн инструмента за оптимизиране на изображения
- Финални думи
Защо трябва да се оптимизират изображенията в WordPress
Много уебсайтове страдат от бавно зареждане. Това се отразява зле на потребителското изживяване, завършени поръчки, връщащи се потребители и клиенти, увеличен Bounce rate и не на последно място на SEO оптимизацията.
Скоростта на зареждане се определя от множество фактори: може би темата не е бърза, може би идващият трафик на сайта е твърде далеч и сървърът не е в състояние бързо да изпраща снимките към браузърите без помощта на CDN, може би сайтът не е достатъчно защитен и е затрупан със злонамерен софтуер. Възможно е все още да не са били извършени оптимизации на скоростта относно JavaScript и CSS файловете.
Наистина може да има множество причини поради които един сайт и браузърите на потребителите не комуникират помежду си толкова бързо, колкото би ти се искало. Чрез оптимизация и правилна настройка на сървъра може да се подобри времето за реакция и да се ускори зареждането на изображенията. Това води до някои големи предимства, например:
- Уеб страниците (не само изображенията) ще се зареждат по-бързо.
- Съдържанието ще бъде по-разчупено и атрактивно, тъй като може да използваш изображения с високо качество и висока разделителна способност, за да разкажеш историята.
- С подобряването на ефективността и естетиката на уебсайта, вероятно ще видиш, че процентът на отпадане (Bounce rate) намалява.
- На свой ред, това ще се отрази добре при обхождане от търсачките, което води до повишаване на ранкинга при търсене.
- Създаването на бекъпи на сайта ще отнема по-малко време и пространство.
- Ще намали разходите за bandwidth и място за съхранение на сървъра.
Какво обаче да направим за самите изображения?
Вече знаем, че чрез оптимизиране на сървъра, изображенията могат да се зареждат по-бързо. Но има ли нещо, което може да направиш с изображенията като файлове, което по същество ще ги направи по-лесни за работа когато се ъплоуднат в WordPress?
Отговорът на това е “да”!
? Научи повече за нашата услуга по Оптимизация за скорост на WordPress и WooCommerce.
Как да оптимизираме изображенията, без загуба на качество, преди да ги качим в WordPress ?
WordPress Codex включва кратко ръководство за това как да определиш правилния размер и качество на изображението за твоя уебсайт. Нужно е да се обърне внимание на четири фактора:
- Физически размер: как изображението реално се представя (като размери размерите) на уебсайта.
- Размер на файла: колко килобайта или мегабайта е самият файл на изображението.
- Разделителна способност: това се отнася до броя на пикселите, които съществуват в дадено изображение. Колкото по-висока е разделителната способност, толкова по-ясно е изображението.
- Тип файл: Това се отнася до формата, в който е запазен конкретният файл. Когато говорим за изображения, обикновено имаме предвид PNG, JPG, SVG и GIF.
Нека разгледаме по-подробно отделните фактори, които трябва да се следват при оптимизиране на изображенията преди качването им в WordPress.
Физически размер на изображението
Физическото пространство, което изображенията заемат на дадена страница от твоя WordPress сайт се определя от това от кое устройство и каква страница гледат потребителите. Например изображение, използвано в блог пост може да се нуждае само от среден размер (напр. 400px ширина), докато заглавната снимката (hero image) на начална или ландинг страница е необходимо да бъде с цялата ширина за изображението (напр. 1920px).
Няма нужда да качите изображение с висока резолюция, което да използвате в блог пост например, където да се показва с ширина 400px. Имай предвид, че прилагането на css стил за намаление на размера (style=”width:400px” например) не прави зареждането на снимката по-бързо.
Не случайно и Google Page Speed често дава указанието “Serve scaled images” – “Използвайте преоразмерени изображения”.
Какво означава Serve scaled images?
Мащабирано/преоразмерено/скалирано изображение е изображение, което се настройва така, че да съответства (мащабира се) с точните размери на изображенията, необходими за даден сайт. Така че, когато “сервираш мащабирани изображения”, коригираш тези изображения до правилния размер, преди да се изпратят в браузъра и да се визуализират.
Правилно мащабираното изображение не трябва да губи своите качества след извършване на преоразмеряването. Това означава, че изображението ще остане не само ясно, но и да бъде по-малко или по-голямо в зависимост от случая.
Показването на мащабирани изображения на уебсайта подобрява ефективността му. Мащабираните изображения могат да спестят ресурси, когато се изтеглят изображенията, тъй като не заемат много място на сървъра. Поради това уебсайтът става значително по-бърз.
Освен това, бързото време за зареждане на страницата и минималното използване на ресурси прави сайта ви по-добър по няколко направления:
Първо, скоростта на сайта подобрява SEO и помага да за по-високо класиране в SERP (страницата с резултати от търсене). Това означава, че повече хора ще намерят твоя сайт.
На второ място, повече хора, които намерят твоя сайт, ще останат по-дълго и ще се върнат, за да го използват отново. Интернет потребителите са много нетърпеливи. Това означава, че бавното зареждане на сайта ще накара много потребители да го напуснат. И обратно, бързият сайт е удоволствие за разглеждане, ще видиш увеличение на потребителите, които разглеждат много страници и се връщат повторно.
Резолюция на снимките
DPI (dots per inch) е референцията, която трябва да се търси, когато се оценява разделителната способност на изображението. 72 DPI (пиксела на инч) е стандартната разделителна способност, която ще видиш на повечето изображения, докато 300 DPI е често използвана при стоковата фотография. По-висок DPI означава повече пиксели, тоест повече информация, което означава по-голям размер на файла на снимката.
Въпреки че няма конкретни препоръки от WordPress за това при какви типове резолюция трябва да се запазват изображенията, те съветват да се внимава да не се използват резолюции по-високи от необходимите, особено за големи размери на файлове. Колкото по-голяма е разделителната способност, толкова по-голям е размерът на файла. Ако изображението изглежда кристално ясно при по-нисък DPI, тогава може да го запазиш с по-ниския DPI.
Размер на файла
Размерът на файла на самото изображения е един от най-важните фактори, когато става въпрос за оптимизиране на скоростта на уебсайта. WordPress препоръчва по-големите изображения да са между 60kb и 100kb, а по-малките изображения да са не по-големи от 30kb.
Разбира се тук не трябва да се прави компромис с качеството само и само да се достигне този малък размер. В Pixadoro имаме наблюдения, че за FullHD снимка, намаляване на размера на файла до 150-200kb е напълно възможно без да се губи качество на изображението.
Компресиране на изображения с TinyPNG.com
На всички клиенти на Pixadoro препоръчваме да използват онлайн инструмента TinyPNG.com / TinyJPG.com. И двата домейна реално използват една технология и на практика може да използвате само единия – няма значение дали ще оптимизирате .jpg снимка в tinypng.com или обратното.
TinyPNG / TinyJPG е мощен инструмент за компресиране на изображения, с който може да се постигне до 70% намаление на размера на файла. Освен компресиране без загуба на качество, ще бъдат премахнати и ненужните мета данни от снимката, което допълнително ще намали крайният размер на файла.
Уеб версията е безплатна като позволява оптимизирането на до 20 снимки накуп, всяка до размер 5MB (ако вече си намалил резолюцията на изображението, за което говорихме по-горе, едвали ще надхвърли 5MB). Супер за компресиране на изображението като последна стъпка преди да се качи в WordPress.
Има и плъгин за WordPress – https://wordpress.org/plugins/tiny-compress-images/ – който ще оптимизира вече качените снимки в WordPress.
В края на статията ще предложим още инструменти за оптимизация/компресиране на изображения.
Тип на файла
Няма строго правило, което да казва, че винаги трябва да се използва JPG вместо PNG или че SVG е модерният стандарт, към който всички трябва да се придържаме. Обикновено типът файл, който ще се използва се свежда до това какво ще правим с него.
JPG
JPG файловете са идеалният тип файл за снимки. Въпреки че този формат не поддържа прозрачен фон, неговата естествена способност да компресира файлове без да се нарушава качеството е идеална за снимки с висока разделителна способност. JPG използва метод за компресиране със загуби (lossy compression), което най-общо казано означава, че ненужните фонови данни се премахват, за да се постигне по-голямо намаляване на размера на файла.
Ако искаш да работиш с по-малки размери на файловете, JPG е форматът, който трябва да използваш.
Друго нещо, на което трябва да се обърне внимание относно JPG, е че има два варианта за това как да се експортират от Photoshop, Lightroom, Gimp или който и да е друг софтуер: базов или прогресивен (baseline or progressive).
Baseline JPG е този, който се състои от един слой. Това означава, че когато се използва в WordPress, ако има някакво забавяне при зареждането на страницата, посетителите ще видят, че изображението бавно започва да се зарежда отгоре надолу.
Progressive JPG, от друга страна, се състои от множество слоеве. Когато посетител се опита да види страница с бавно зареждане с прогресивен JPG, изображението ще се зареди изцяло в рамката, в която трябва да съществува. Първоначално обаче ще бъде малко размазано докато другите слоеве се появят отгоре и така докато изображението не се зареди напълно.
Идеалният вариант за използване в WordPress е прогресивният JPG, тъй като това ще доведе до по-малко натоварване на сървъра (тъй като не се зарежда един единствен слой от изображението наведнъж).
PNG
PNG са по-подходящи за дизайнерски елементи като бутони, рекламени банери, скрийншотове или икони и други, които имат нужда от прозрачен фон.
Подобно на JPG, PNG използва метод на компресия известен като “без загуби” (lossless). Компресирането без загуби, за разлика от компресирането със загуби, запазва всички оригинални данни на изображението. Тъй като не може да се намали размера на файла по този начин, lossless компресията търси начини да разбие изображението на по-малки парчета, които ще улеснят зареждането на страницата.
Въпреки че този тип компресия гарантира по-високо качество при експорт, размерите на файловете са по-големи от тези при JPG. Така че, ако качеството е по-важно за теб или имаш нужда от изображение с прозрачен фон, PNG е файловият тип за теб.
SVG
За този тип файл не се говори често, когато се обсъждат изображения за WordPress, но все пак си струва да се отбележи тук, тъй като минималният дизайн и иконографията стават все по-популярни в уебдизайна.
SVG е мащабируемо супер леко векторно изображение, което го прави може би най-гъвкавият от всички типове изображения. Въпреки това SVG е идеален само за малки елементи, които искате да мащабирате добре – лога, икони и по-опростени визуални елементи.
Докато едно PNG лого може да е с размер около 30kb-50kb, същото, но в SVG формат би било 2-5kb!
WebP
WebP е файлов формат, разработен от Google, за да се намали размерът на изображенията, без да се налага да се жертва качеството. WebP изображенията са създадени, за да направят мрежата по-бърза, с по-малки и по-богати снимки, които разработчиците да използват. Изображенията без загуба (lossless) на WebP са с 26% по-малки от PNG файловете и до 34% по-малки от JPEG файловете със загуби при еквивалентен показател за качество на структурно сходство (SSIM).
GIF
Може, разбира се, да използваш и GIF файлове в WordPress. GIF са хубава алтернатива на видеосъдържанието, тъй като са много по-леки (ако планираш да съхраняваш видео файлове на твоя сървър). С разпространението на социални медии, GIF файловете определено са лесен за употреба тип файл, който да се използва в WordPress, въпреки че ще искате да ги използвате пестеливо.
7 добри безплатни плъгина за оптимизиране на изображения в WordPress ✌️
- EWWW Image Optimizer – https://wordpress.org/plugins/ewww-image-optimizer/
- ShortPixel Image Optimizer – https://wordpress.org/plugins/shortpixel-image-optimiser/
- Smush – Lazy Load Images, Optimize & Compress Images – https://wordpress.org/plugins/wp-smushit/
- Compress JPEG & PNG Images by TinyPNG – https://wordpress.org/plugins/tiny-compress-images/
- Imagify – Optimize your Images & Convert WebP – https://wordpress.org/plugins/imagify/
- Imsanity – https://wordpress.org/plugins/imsanity/
- Optimole – https://wordpress.org/plugins/optimole-wp/
5 добри безплатни онлайн инструмента за оптимизиране на изображения ?
- CompressImage – https://compressimage.toolur.com/
- ImageSmaller – https://www.imagesmaller.com/
- ResizeImage – https://resizeimage.net/
- TinyPNG / TinyJPG – https://tinypng.com/
- Kraken Image Optimizer – https://kraken.io/web-interface
Финални думи
Оптимизацията (или компресирането) на изображения/снимки е важна стъпка към един по-бърз WordPress сайт. Комбинацията от правилна резолюция и намален размер на файла на снимката може да свали ценни секунди от зареждането на страницата, което ще се окаже положително за потребителското изживяване (особено на мобилни устройста), повече продажби и лийдове, повече връщащи се клиенти и не на последно място ще направи всички, включително Google по-щастливи :)
? Научи повече за нашата услуга по Оптимизация за скорост на WordPress и WooCommerce.
