Ръководство Как да компресирате, изрязвате и намалявате снимки онлайн
Всички знаят, че дадено изображение струва хиляда думи и че уеб страница печели много, като има снимки, които го придружават, но да, всичко това е вярно, ако споменатите изображения са добре оптимизирани. Скитайки се из Интернет, откриваме много уебсайтове, които имат своите изображения без оптимизация. Това е, че те тежат твърде много, че са по-големи от акаунта, че форматът не е подходящ. Всички тези проблеми карат мрежата да се зарежда по-бавно и, както вече ви казах в тази публикация, това се отразява на позиционирането, което е голям проблем. Всеки, който се посвети на уеб дизайна в Кордоба или където и да е другаде по света, трябва да контролира този аспект. В този пост ще ви науча как да оптимизирате изображенията на вашия уебсайт, намаляване на размера и теглото на снимките Y. как да преоразмерите изображение така че да има точно размерите, с които по-късно ще се показва на вашия сайт. С този урок ще започнете да се влюбвате в Google, поне що се отнася до оптимизирането на изображенията. Нека го направим 😉
Защо трябва да компресирате изображенията на вашата страница?
Google взема предвид стотици фактори, когато става въпрос за класиране на сайтове на своите страници с резултати. Сред тези фактори има един, който е от основно значение: времето за зареждане. Колкото по-бързо се зарежда уебсайтът ви, толкова по-добре. Въпреки това, очевидно е, че колкото по-малко оптимизирани са вашите снимки, те ще тежат повече и следователно ще отнемат повече време, за да заредят позицията. За щастие е много лесно да преоразмерите изображение и да намалите теглото на вашите снимки и целия ви сайт като резултат.
Размерът на изображенията на уеб страници: пиксели
Какво представляват пикселите
Пикселите са най-малката единица от цифровото изображение. Всяко цифрово изображение е правоъгълник, съставен от определен брой пиксели, всеки един от един цвят. Колкото по-голям е броят на пикселите, толкова по-голямо е изображението. И обратно, колкото по-малко пиксели, толкова по-малко е изображението.
Как да разберете идеалните пиксели за уебсайт
Добре, сега, когато контролирате какво е пиксел, може би се чудите колко пиксела трябва да поставите във вашите изображения, за да изглеждат добре на вашата страница. Лесно е да се разбере. За това можете да използвате разширение на Google Chrome. Нарича се Page Ruler и ще ви позволи да нарисувате правоъгълник на страницата си и да видите неговите измервания. Също така ви помага да измервате интервали или изображения, които вече са вмъкнати в мрежата. На следващото изображение измервам една от снимките, които украсяват публикацията ни в безплатни банки с изображения.
Както можете да видите, изображението е широко 800 пиксела и високо 447 пиксела. Останалите измервания показват местоположението на изображението по отношение на страницата, като горният ляв ъгъл е пикселът 0.0.
Какво е пикселация?
Показвам ви с няколко примера. Следващото изображение е 300 × 300 пиксела:
А следното е 500 × 500 пиксела:
500 × 500 пиксела снимка
Както можете да видите, те изглеждат с добро качество, но сега нека направим тест. Ще взема изображението 300 × 300 пиксела и ще го принудя да го увеличи до 500 × 500 пиксела:
Както можете да видите, той губи качество, възниква това, което е известно като пикселация. Следователно идеалното е да започнете с изображение, което е поне с размера, който искате да използвате. Ако е по-голям, нищо не се случва, защото винаги можем да модифицираме размера на изображението без загуба на качество. И това ще бъде първата стъпка в нашата оптимизация на изображението.
И накрая: проверете реалния размер на снимките
С Page Ruler ще можете да знаете размера, при който изображенията се показват на уебсайт, но това не означава, че изображението всъщност е с този размер. Изображенията понякога се показват по-малки, отколкото са, като се свиват с помощта на HTML или CSS. Това причинява проблема, за който ви казах в началото, изображенията тежат повече, отколкото би трябвало. За да видя размера на изображението, наистина ще ви кажа още едно разширение, което ще бъде много полезно не само за това, но и за хиляди други неща. Истински швейцарски нож, наречен Web Developer. Щракнете тук, за да го инсталирате. След като го получите, трябва да изпълните следните стъпки:
- Кликнете върху зъбното колело, което се появи до вашата адресна лента, след това върху раздела Изображения и след това върху Показване на размери на изображението. Над всяко изображение ще се появи малък плакат с неговите размери.
- Задръжте курсора на мишката върху изображението, чийто размер искате да проверите, и щракнете с десния бутон на мишката.
- Кликнете върху Отвори изображение в нов раздел.
- Повторете стъпка 1 в новия раздел.