ZeroMoment маркетингова оптимизация на изображението

оптимизация

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

  • 1 Оптимизиране на изображението: размери
  • 2 Оптимизиране на изображението: тегло
  • 3 Оптимизиране на изображения: формати
    • 3.1 PNG срещу JPG: Компресия
      • 3.1.1 .JPG
      • 3.1.2 .PNG
    • 3.2 PNG срещу JPG: Прозрачност
      • 3.2.1 .JPG
      • 3.2.2 .PNG
  • 4 Компресори на изображения: Оптимизиране на изображения за мрежата
    • 4.1 TinyJPG + TinyPNG
    • 4.2 Kraken
    • 4.3 Компресор.io
  • 5 Списък на компресорите на изображения
  • 6 Проблеми с оптимизирането на вашите изображения или скоростта на зареждане?

Оптимизация на изображението: размери

Когато говорим за оптималната разделителна способност на изображение, важно е да се отбележи, че един от основните проблеми, които откриваме в много уебсайтове, е, че изображенията се показват с по-малък размер от «действителни размери»На самото изображение. Това означава, че ако например покажем изображение на екрана на 100 * 100px, но изображението наистина е 200 * 200px (и претегля това, което този размер заема), ще загубим значителна възможност за намаляване на теглото.

Нека разгледаме по-добре графичен пример:

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

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

Изображението има 600 * 499 пиксела "действителен размер или размер". Но трябва ли да има тези размери, за да заеме целия контейнер, в който е вкаран? Нека разследваме малко повече:

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

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

Имаме една последна точка за проверка.
Колко място заема «контейнер за изображения«?

Използвайки инспектора на елементите на браузъра за пореден път, открихме следното:

"Размерът на контейнера" ​​е по-малък от "действителния размер на изображението":

Контейнер = 467 * 388 пикселаСРЕЩУ.
Действително измерение = 600 * 499 пиксела

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

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

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

Оптимизиране на изображението: тегло

По отношение на теглото: изборът на подходящ формат за изображенията е от съществено значение. В този смисъл Google препоръчва формати, които нарича "следващо поколение" в самия инструмент. PageSpeed ​​Insights

Форматите JPEG 2000, JPEG XR и WebP компресират изображения по-добре от форматите PNG или JPEG, което ги кара да се изтеглят по-бързо и да консумират по-малко данни.

Google PageSpeed ​​Insights

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

  • JPEG 2000
  • JPEG XR
  • WebP

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

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

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