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

Ето защо, една от основните задачи преди стартиране на вашия уеб сайт е да имате добре оптимизирани вашите изображения.

Какво е лошо оптимизирано изображение?

За да се обясни концепцията за оптимизация на изображението за уеб, Мисля, че е по-лесно да се обясни, когато снимката е лошо оптимизирана:

  • Кога имаме много по-голяма картина (по ширина или височина) от мястото, където ще се вижда.
  • Когато изображението се показва деформиран в мрежата.
  • Когато файлът съдържа много повече информация, отколкото е необходимо (Знаете ли, че снимките включват скрита информация като камерата или мястото, където са направени?).
  • Кога ние използваме формат, който не е подходящ (погледнете тази публикация за JPG и PNG).

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

И трябва да го отстраните спешно.

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

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

Тегло/размер ...

Лошо оптимизираното изображение винаги ще има прекомерно тегло и/или размер за своята функция. И това засяга две области:

  1. Сървърът където хоствате в мрежата, ще ви е необходимо повече място за хостване на вашите ненужно големи снимки.
  2. Навигаторът при които бъдещите ви клиенти ви посещават, ще трябва да работят повече, за да покажат снимките в правилния размер.

Скорост на зареждане:

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

Потребителски опит:

Знаете ли, че уебсайт, който отнема повече от 3 секунди, се губи 53% от посещенията си? Мисля, че това е най-важната причина да оптимизирате изображенията на вашия уебсайт: не плашете клиентите си.

В моя опит в уеб разработката съм виждал случаи, при които е постигнато оптимизиране на снимки намалете теглото на изображенията с 60% (намаляване на част от техния размер с 96%) и подобряване на времето за зареждане от мобилни телефони със 70% точно с тази промяна.

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

Squoos.app, инструмент "всичко в 1" за оптимизиране на вашите снимки

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

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

Как можете да направите тази оптимизация? Има много инструменти като Compressor.io или TinyJPG, които са много лесни за използване. Но от известно време този, който използваме най-много в MrKii, е Squoss.app.

Squoosh.app е инструмент, разработен от Google за оптимизиране на уеб изображения, пълен с инструменти и изключително лесен за използване.

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

В горния пример можете да видите acпрактическа асоциация със заглавната снимка на тази статия:

  • Размер при записване от Photoshop: 296Kb.
  • Размер след оптимизиране с Squoosh: 76.3Kb (74% по-малко)

Какво можете да направите със Squoosh?

Броят на инструментите, с които разполага Squoosh, е много широк. И ако съм честен, не мисля, че съм използвал дори 40% от това, което предлага.

Освен всичко друго, с Squoosh можете:

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

И за изрязване на уеб изображения?

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

В тези случаи, ако не искате да използвате Photoshop, можете да изтеглите друг безплатен онлайн инструмент като imageresize.org:

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

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

Сега идва големият въпрос: Коя е най-добрата настройка за оптимизиране на снимка? И отговорът, както можете да си представите, е относителен: зависи.

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

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

Уеб лого

  • Размер: със сигурност се показва най-много с ширина 250-300 пиксела.
  • Уверете се, че не го качвате в гигантски размер.
  • Резолюция: 72ppp, въпреки че можете да стигнете до 300, за да сте сигурни, че изглежда висококачествено на всички устройства.
  • Качество: Играйте Squoosh с ниско тегло, без да губите качество.
  • Тегло: под 50Kb, идеално, ако получите 20Kb.

Големи изображения, за заглавки или фонове

  • Размер: Широчина 1280 пиксела (1980 пиксела, ако снимката има голяма известност)
  • Резолюция: 72 dpi.
  • Тегло: винаги под 100Kb.

Изображения в съдържанието

  • Размер: 450 - 500 пиксела в ширина, ако се показва заедно с текст.
  • Резолюция: 72 dpi
  • Тегло: винаги под 100Kb

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

Знаете ли Squoosh? Обикновено ли оптимизирате снимките на вашия уебсайт, преди да ги качите? Оставете вашето мнение в коментарите.