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

Ето съдържанието с всичко, което ще видите в статията 👇👇 .

Съдържание

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

Тук ви оставям цялата публикация, обобщена във видео.

📺 Видео урок

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

Първата стъпка за оптимизиране на изображенията е да ги преоразмерите.

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

Не качвайте снимките си в «Full HD» с извинението, че «- Това е, за да изглежда добре».

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

Практически случай:

Ако искам да поставя изображение в страничната лента на моя блог, първо трябва да разбера колко широка е страничната лента.

Да предположим, че страничната лента има ширина 250 px.

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

За разберете какви размери да използвате Препоръчвам да използвате «Element Inspector» на Chrome. Във видеото ви показвам как се прави.

След като знаете размерите, можете да ги преоразмерите с програми като Paint, Photoshop или Gimp. Във видеото обяснявам как да го направя с Photoshop.

🔹 Инструменти за масово преоразмеряване на изображения

Ако работите с много изображения, като например създавате продуктов каталог или галерия, преоразмеряването им едно по едно ще отнеме много време.

За да преоразмерявате изображенията масивно, препоръчвам някои от тези инструменти.

JPEG Resizer 2.1

загуба

JPEG Resizer 2.1 е безплатна програма за Windows, която не изисква инсталация. Просто трябва да го стартирате.

Позволява ви да преоразмерявате изображенията според:

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

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

Снимки в насипен размер

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

Преоразмерете изображенията в мрежата с Photoshop

Следвай тези стъпки:

Отворете снимката, която искате да компресирате, и отидете на «Файл» -> «Запазване за мрежата»:

Ще видите следния прозорец.

Тук можете да направите няколко неща:

  • Променете размерите на изображението. Препоръчвам да направите това, преди да го запазите за мрежата.
  • Изберете формата: jpeg, png или gif.
  • Регулирайте качеството на изображението.

Препоръчвам да запазите изображенията в JPEG форматВ с качество приблизително 70 и за изображения, които се нуждаят от прозрачност тъй като логата използват PNG формат.

🔨 Инструменти за оптимизиране на изображенията онлайн

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

🔹 Kraken.io

Използвам този инструмент, откакто го открих.

  • Компресирайте изображения, без да губите качество. Можете да компресирате всички изображения, които искате, стига размерът на файла да не надвишава 1 mb
  • Можете да изберете три формата за компресия и да импортирате снимки от DropBox, Google Drive и Box.
  • Той има приставка за WordPress
  • Премиум версията ви позволява да преоразмерявате изображенията, да оптимизирате всички изображения на уебсайт, просто като въведете URL адреса му. Kraken ще отговаря за изтеглянето и оптимизирането им.

Недостатъци:

  • Не ви позволява да правите никакви корекции на качеството, всичко е автоматично. Въпреки че не е необходимо, тъй като полученият резултат е доста добър.
  • Размерът на изображението не може да надвишава 1MB.

🔹 TinyPNG

Предимства на този инструмент:

  • Това е безплатен инструмент, който ви позволява да компресирате до 20 изображения наведнъж с максимален размер от 5 mb на изображение.
  • Компресията на изображенията е много добра и загубата на качество не се забелязва.
  • Можете да компресирате изображения в PNG формат, без да губите прозрачност.
  • Възможно е този инструмент да се интегрира във Photoshop чрез приставка, която те са разработили.

Недостатъци:

  • Няма никакви настройки за компресия, просто качвате и изтегляте вече оптимизираното изображение.

🔹 Компресирайте Jpeg

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

Някои от неговите предимства:

  • Това е напълно безплатно
  • Качете до 20 снимки
  • Компресирайте файлове в JPG, PNG или дори PDF формат.
  • Изтеглете компресираните изображения поотделно или групирани в ZIP файл.
  • Можете да регулирате нивото на компресия, което други инструменти не предлагат.

🔹 PunyPNG

Работи добре, но ограничението на размера може да е неудобно.

Предимство

  • Подобно на други инструменти, той ви позволява да оптимизирате до 20 файла едновременно, без да губите качество.
  • Работи с файлове в JPEG, PNG или GIF формат.
  • Ако се регистрирате, получавате разширени настройки за компресия.

Недостатъци

  • Не можете да качвате изображения, по-големи от 500KB.

✅ WordPress плъгини за оптимизиране на изображения и снимки

Ако искате да оптимизирате изображенията, които вече сте качили в WordPress, имате две възможности: оптимизирате ги ръчно (лудост) или използвате един от следните приставки, за да го направите автоматично.

Оптимизатор.io

Това е безплатен плъгин, разработен от хостинг компанията Webempresa. Хубавото на този плъгин е това не използва вашите сървърни ресурси за оптимизиране на изображенията.

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

🔹 WP Smush

Безплатна приставка, която компресира изображенията, които вече сте качили от 50 на 50 с безплатната версия. Компресирайте всяко изображение, когато ги качвате в WordPress.

🔹 EWWW Image Optimizer

Позволява ви да оптимизирате масово всички изображения във вашата библиотека «Media».

🔹 Компресирайте JPEG и PNG изображения

Това е версията на WordPress на онлайн инструмента, за която споменах по-рано. За да го използвате, трябва да се регистрирате и да получите API ключа.

Можете да оптимизирате до 500 изображения на месец безплатно. Предлага добра връзка между компресията и качеството

🔹 Оптимизатор на изображения на ShortPixel

Приставка за компресиране на файлове в JPEG, PNG, GIF и PDF формати в WordPress. Максимум 100 изображения на месец.

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

Той е съвместим с WooCommerce, можете да избирате между компресия със загуби и без загуби. Работи добре както на HTTPS, така и на HTTP уебсайтове.

🔹 Kraken Image Optimizer

Това е приставката за онлайн инструмента Kraken.io. Тя ви позволява да оптимизирате снимките, които вече имате във вашата медийна библиотека, и когато ги качвате. Безплатната версия е ограничена до 100mb на месец.

Той поддържа файлове в JPEG, GIF и PNG формат с максимален размер 32mb. Компресията се извършва на техните сървъри, така че трябва да се регистрирате и да получите API ключа.

Imagify Image Optimizer

Това е приставка с добра репутация, която подобно на останалите ви позволява да компресирате изображенията на вашия WordPress. С безплатната версия можете да компресирате до 25mb на месец.

Той има три нива на компресия: нормално, агресивно и ултра. Той е съвместим с WooCommerce и NextGen Gallery.

👉 Резюме за оптимизиране на изображения

Надявам се, че с това, което обясних в този пост, вече знаете как да оптимизирате изображенията в мрежата.

Процесът отнема много време, но е важно да го направите, ако не искате скоростта на вашата уеб страница да бъде засегната.

Това биха били стъпките, които трябва да следвате:

  1. Открийте идеалния размер за използване.
  2. Създайте или преоразмерете изображението с тези размери.
  3. Използвайте някой от инструментите за компресиране онлайн или настолен.
  4. Качете изображенията на вашата страница.