Всички знаят, че дадено изображение струва хиляда думи и че уеб страница печели много, като има снимки, които го придружават, но да, всичко това е вярно, ако споменатите изображения са добре оптимизирани. Скитайки се из Интернет, откриваме много уебсайтове, които имат своите изображения без оптимизация. Това е, че те тежат твърде много, че са по-големи от акаунта, че форматът не е подходящ. Всички тези проблеми карат мрежата да се зарежда по-бавно и, както вече ви казах в тази публикация, това се отразява на позиционирането, което е голям проблем. Всеки, който се посвети на уеб дизайна в Кордоба или където и да е другаде по света, трябва да контролира този аспект. В този пост ще ви науча как да оптимизирате изображенията на вашия уебсайт, намаляване на размера и теглото на снимките Y. как да преоразмерите изображение така че да има точно размерите, с които по-късно ще се показва на вашия сайт. С този урок ще започнете да се влюбвате в Google, поне що се отнася до оптимизирането на изображенията. Нека го направим 😉

Защо трябва да компресирате изображенията на вашата страница?

Google взема предвид стотици фактори, когато става въпрос за класиране на сайтове на своите страници с резултати. Сред тези фактори има един, който е от основно значение: времето за зареждане. Колкото по-бързо се зарежда уебсайтът ви, толкова по-добре. Въпреки това, очевидно е, че колкото по-малко оптимизирани са вашите снимки, те ще тежат повече и следователно ще отнемат повече време, за да заредят позицията. За щастие е много лесно да преоразмерите изображение и да намалите теглото на вашите снимки и целия ви сайт като резултат.

Размерът на изображенията на уеб страници: пиксели

Какво представляват пикселите

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

Как да разберете идеалните пиксели за уебсайт

Добре, сега, когато контролирате какво е пиксел, може би се чудите колко пиксела трябва да поставите във вашите изображения, за да изглеждат добре на вашата страница. Лесно е да се разбере. За това можете да използвате разширение на Google Chrome. Нарича се Page Ruler и ще ви позволи да нарисувате правоъгълник на страницата си и да видите неговите измервания. Също така ви помага да измервате интервали или изображения, които вече са вмъкнати в мрежата. На следващото изображение измервам една от снимките, които украсяват публикацията ни в безплатни банки с изображения.

Както можете да видите, изображението е широко 800 пиксела и високо 447 пиксела. Останалите измервания показват местоположението на изображението по отношение на страницата, като горният ляв ъгъл е пикселът 0.0.

Какво е пикселация?

Показвам ви с няколко примера. Следващото изображение е 300 × 300 пиксела:

намалявате
300 × 300 пиксела снимка

А следното е 500 × 500 пиксела:

500 × 500 пиксела снимка

Както можете да видите, те изглеждат с добро качество, но сега нека направим тест. Ще взема изображението 300 × 300 пиксела и ще го принудя да го увеличи до 500 × 500 пиксела:

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

И накрая: проверете реалния размер на снимките

С Page Ruler ще можете да знаете размера, при който изображенията се показват на уебсайт, но това не означава, че изображението всъщност е с този размер. Изображенията понякога се показват по-малки, отколкото са, като се свиват с помощта на HTML или CSS. Това причинява проблема, за който ви казах в началото, изображенията тежат повече, отколкото би трябвало. За да видя размера на изображението, наистина ще ви кажа още едно разширение, което ще бъде много полезно не само за това, но и за хиляди други неща. Истински швейцарски нож, наречен Web Developer. Щракнете тук, за да го инсталирате. След като го получите, трябва да изпълните следните стъпки:

  1. Кликнете върху зъбното колело, което се появи до вашата адресна лента, след това върху раздела Изображения и след това върху Показване на размери на изображението. Над всяко изображение ще се появи малък плакат с неговите размери.
  2. Задръжте курсора на мишката върху изображението, чийто размер искате да проверите, и щракнете с десния бутон на мишката.
  3. Кликнете върху Отвори изображение в нов раздел.
  4. Повторете стъпка 1 в новия раздел.

Ако размерите съвпадат, поздравления, имате това изображение с правилния размер. Ако не, имате проблем, който трябва да разрешите, но не се притеснявайте, за това е тази публикация 🙂

Снимката в мрежата и снимката в нов раздел. Размери съвпадат.

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

Как да преоразмерите изображение

Първото нещо, което трябва да направите, е да проверите дали изображенията на вашия уебсайт са с правилния размер или не. Жизненоважно е всички те да имат правилните размери. Както вече ви казах, няма да се налага да правите нищо с тези, които са добри (в тази стъпка), но ще трябва да преоразмерите снимките, които са по-големи от размера, с който се показват. Ще направите това с ILoveIMG, уебсайт, който позволява намалете размера на изображението онлайн безплатно.

Преоразмеряване на изображения с ILoveIMG е много лесно. Трябва само да кликнете върху синия бутон „Избор на изображения“ и да изберете тези, които искате да промените. Можете да направите промяната по партиди, ако всички те ще имат еднаква ширина или височина. Чрез въвеждане на едно от двете измервания, другото ще бъде адаптирано пропорционално на всяко изображение, което сте качили. Например, ако искам всички изображения в публикациите ми в блога да са с ширина 500 пиксела, мога да ги кача всички и да избера тази ширина. Автоматично ще преоразмерява до 500 пиксела ширина и съответната височина според пропорцията на изображението. Ако не искаме пропорцията да бъде спазена, можем да махнем отметката от квадратчето „Поддържане на пропорцията“. Можете също така да предотвратите увеличаването на изображения, които са по-малки от въведения размер, за да не загубят качество. Можете да направите това, като поставите отметка в квадратчето „Не увеличавай, ако оригиналът е по-малък“.

Опции за преоразмеряване

Друг вариант е намаляване на снимките по размер по процент. В този случай ви дава три възможности: 25% по-малка, 50% по-малка и 75% по-малка. Както можете да видите, в този случай нямате възможност да увеличите изображението, можете само намалете размера.

Преоразмерете чрез процент

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

Как да компресирате изображения онлайн

За компресиране на снимки онлайн Ще препоръчам две страници, които ви позволяват и двете понижете качеството на снимката. Единият отново е ILoveIMG, а другият е TinyPNG. Защо препоръчвам две? Много просто, в тестовете, които направих, ILoveIMG даде по-добра производителност, оптимизирайки PNG файлове. Въпреки това, TinyPNG е спечелил по отношение на загубата на JPG тегло. Следователно, за компресиране на PNG изображения Препоръчвам ILoveIMG и за компресиране на JPG изображения Препоръчвам TinyPNG. В случай, че искате да оптимизирате изображение в GIF формат, ще трябва да го направите и с ILoveIMG, тъй като TinyPNG не поддържа този формат.

Тази панда изяжда килобайтите, което е хубаво 😀

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

Как да изрежете снимки онлайн

Въпреки че не е нещо присъщо на оптимизацията, искам да ви кажа, че в ILoveIMG имате възможност и за изрежете снимките си онлайн. Процесът е толкова прост, колкото всеки от тези, които вече ви обясних по-рано.

Просто щракнете върху бутона Избор на изображения и можете да качите вашите снимки и да ги изрежете интуитивно. Ще се появи син правоъгълник с манипулатори в ъглите и в средата и можете да изберете изреза, който ви харесва най-много.

Изрязване на снимка с ILoveIMG

Докато режете, ще имате панел вдясно с измерванията, които ще има полученото изображение. Това служи като ориентир, ако искате крайният размер да бъде определен размер в пиксели. Можете дори да позиционирате и преоразмерите правоъгълника на ръка и по-късно да въведете точното измерване, което трябва да има. Правоъгълникът ще се адаптира автоматично към това измерване.

Опции за изрязване на ILoveIMG

Как да компресирам изображения с помощта на приставка (WordPress)

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

Нашата приятелка от WPSmush чака да хвърлим нейните снимки

Препоръчвам ви WP Smush. Трябва само да го инсталирате и да започнете да оптимизирате вашите изображения. Ако използвате безплатната версия, ще трябва да го направите „на ръка“. Трябва да отидете в панела на приставката и да оптимизирате по партиди от 50 на 50, докато не оптимизирате всички, които вече имате качени. След това можете да проверите опцията за автоматично оптимизира изображенията качвате се нагоре, така че никога повече няма да се тревожите за това.

Проверката на тези опции автоматично ще оптимизира изображенията при качването им.

Все пак ще получите по-добри резултати, ако намалите теглото на снимките, преди да ги качите, използвайки средствата, които съм обяснил в предишните стъпки. WP Smush за оптимизиране на изображения в WordPress е добре, ако вече сте качили много и като опция в случай, че в даден момент се загубите и качите няколко некомпресирани снимки, но добрата практика е да качите вече оптимизирани снимки.

Изображенията в тази публикация преди и след оптимизиране

Както виждаш, оптимизирайте вашите изображения онлайн за мрежата Това не е нещо сложно и запазено за специалисти, това е нещо, което можете лесно да направите сами. Просто трябва да знаете как да го направите, търпение и постоянство, за да извършите процеса с всички снимки, преди да ги качите на вашата страница. Надявам се тази публикация да ви е харесала и да ви е била полезна. Ако е така, оценете го с 5 звезди, споделете го, така че да достигне до повече хора и ми оставете коментар, ще се радвам да знам, че ви е служил 🙂