Помага за ефективността на вашия уебсайт.
Подобрява визуализацията за потребителя.
Получавате по-добра скорост на зареждане.
Google ви харесва повече.
Както можете да видите, всички са предимства, ако оптимизирате изображенията за вашия уебсайт. Не губите нищо, просто отделете малко време за това. Трябва да направите същото, същия процес, нещо систематично с всичките си изображения.
В моя случай, след като събера всички снимки, които ще използвам в папка, аз ги отварям с инструмента за фотошоп и тогава започвам първата си стъпка за оптимизиране.
За хората, които не използват фотошоп или нямат този инструмент, ще говоря за други алтернативи.
Е, нека да стигнем до него. Започнахме. 🚀
Формат на изображението за мрежата
Със сигурност вече знаете, някои разширения като jpeg, png, gif ... може би не толкова, ако говорим за svg или Wbmp.
За да се обясни по прост начин, първите три са формати на изображения, които използват пиксел (тези цветни квадратчета), всеки формат използва повече или по-малко пиксел.
В случая на SVG това е векторен формат, който използва редове. Обичам този формат за икони, разделители и линейни изображения.
Това е много изчистен и ясен формат, когато го гледате, можете да увеличите каквото искате и той да не губи качество, както в случая на изображения с пиксели.
И напоследък форматът Wbmp е много модерен, което във Photoshop вече ви позволява да използвате, но което според мен и моят собствен опит все още има устройства и браузъри, които не четат този формат и не показват изображението.
Въпросът за оптимизирането на изображенията е да работим по „чист“ начин, да набираме скорост и в крайна сметка, ако оптимизираме, ще бъде добре за нашия потребител, за SEO и за нас самите. Но да, целият процес, на който ще ви науча в рамките на справедлива мярка.
Трябва да намалите размера и пространството на изображенията, без да губите качество или да затруднявате браузърите.
За да го разберете по-добре, ние ще се научим да правим нещо необходимо, аз съм запален по фотографията и когато става въпрос за проектиране особено на мрежата, видях, че работата ми не може да бъде преподавана по този начин с качеството, което направих, защо?
Е, тъй като камерата ми прави снимки с размер 5200px, тоест, за да видите тази снимка заедно 5 компютърни екрана, така че ме разбирате.
Следователно, ако го кача в мрежата, аз го натискам и го поставям в поле, което има ограничение, тъй като в повечето случаи имаме ограничен договор за сървър и че уеб страница, която има капацитет от 1MB, отнема 3 секунди за показване.
Вие го разбирате по-добре така?
Защо да качвате голяма снимка, ако тя ще се гледа на уебсайт с максимална разделителна способност 1200px, ако това е изображение за корицата, ако е за друга секция, 500 px е достатъчно сигурно.
И не е нужно да ги правите с професионален фотоапарат като моя, в днешно време мобилните устройства вече могат да правят снимки до 3000px, така че преди да ги качите, ще ги адаптираме към размера и теглото, от които ще се нуждаем.
И как да разбера размера, от който се нуждаете? Ето пояснително видео, което ви показва как да разберете размера.
След като поставим правилния размер, ще намалим теглото на изображенията.
Оптимизирайте изображенията
Размер
Инфографика на измерванията в px за мрежата
Както можете да видите тук, изображенията имат ширина и височина в изображенията. Ако знаем размера, който ще заеме в мрежата, както обясних в предишното видео, можете да получите идея, като разгледате други уебсайтове.
Или ако сте като мен, който проектирате скицата на мрежата във фотошоп, преди да я прехвърлите в WordPress, вече имате измерванията, от които ще се нуждаем.
След като разберем размера и имаме двойно или тройно изображение. Ще използваме безплатна програма Photoshop или Gimp, която можете да изтеглите от собствения си уебсайт. Тук
Оптимизирайте изображенията с Photoshop
Оптимизирайте изображенията с Gimp
Ако използвате Windows, имате и безплатен инструмент за рисуване, който ви позволява да преоразмерявате изображенията в прозорци, като избирате размера, който искате да приложите към вашите изображения.
Тегло на изображенията
От друга страна, изображенията имат тежест и е много важно за оптимизацията и скоростта на вашата страница, че вие контролирате това тегло, което е това, което заема в дадено пространство. И в този случай влияе много на скоростта на зареждане, при което изображението остава незавършено зареждане.
И всичко това ще накара Google да не оценява уебсайта ви и че потребителят не отнема 30 секунди да чака да се зареди и ще загубите клиенти.
В този раздел няма точно правило за идеалния размер на изображението, всичко е свързано с мястото, което ще заема на страницата. Но ако ви кажа, че мега е дивотия по образ. В моя случай обикновено не им позволявам да тежат повече от 150 kb. Но както ви казах, има и изключения.
За да компресираме изображенията, имаме много инструменти. Както винаги, аз ви показвам този, с когото работя лично, този, когото познавам предварително.
TinyPNG или tinyJPEG. И двете са онлайн и безплатни. Преди поставих идеалния размер във Photoshop, както видяхме в предишните видеоклипове, тъй като този инструмент не ви позволява да качвате много тежки изображения. Най-лошото при този онлайн инструмент е, че ограничава зареждането на 20 изображения.
Размер за различни устройства
Тук имате това изображение, където виждате размера на ширината, използван от устройствата за отваряне на уеб страницата.
Размери на изображенията, които можем да използваме на уеб страницата
В този случай ви оставям шаблона, който използвам с тема GeneratePress, която съм задал на 1140 px на цял екран.
Този нюанс е много важен, тъй като зависи от първоначалния размер, който използваме. Ако не използвате този, можете да получите идея.
Приставка за оптимизиране
Както при всичко, има много плъгини, които помагат за намаляване на теглото на изображенията, дори самият хостинг има такъв, но ще ви кажа за какво работя, което е WP Smush, безплатно е, намира се в хранилището на WordPress.
Този плъгин е да го инсталирате и да забравите за оптимизацията, тъй като той само открива изображенията и ги компресира. Удобно е да погледнете уебсайта по-късно, но в моя случай, особено на уебсайтове на ресторанти, където чиния с храна влиза по-добре през очите и трябва да бъде с добро качество.
В този случай не оптимизирам с tynipng, а само адаптирам размера му във фотошоп и с този плъгин забравям и те остават качествени и скоростта на зареждане не се влошава.
Надявам се, че сте разбрали колко е важно да имате уеб страница, която е добре оптимизирана за своите изображения, че отделяте малко време, задавайки размера, който ще използват. Не е нещо, което трябва да правите всеки ден, веднъж ще е достатъчно. Правете нещата както трябва, които след това се страхуват от наградата си.
Увеличавайте скоростта на вашия уебсайт, оптимизирайте изображенията си и летете първокласно 😂😂😂