оптимизация

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

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

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

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

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

Един от основните фактори, който трябва да се вземе предвид, е форматът. Днес форматите .jpg и .png са широко известни, но как да различим кой формат е най-подходящ за всяко изображение? Нека видим сравнение на тези два формата, толкова широко използвани на ниво компресия и прозрачност.

PNG срещу JPG: Компресия

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

  • JPG форматът е добър вариант при оптимизиране на нашите уеб изображения, тъй като ни позволява да компресираме до 10 пъти теглото на изображението.
  • JPG форматът помага за запазване на изображения с много цветови нюанси при много лек размер на файла, което го прави идеален за уебсайтове с високо визуално съдържание.
  • Имайки предвид, че това е компресиран формат, е необходимо да се приеме по-голяма или по-малка загуба на качество при конвертиране на изображението в споменатия формат. В зависимост от степента на компресия, която използваме, ще претърпим по-голяма или по-малка загуба.
  • Обичайната препоръка е да не се използват оптимизации под 70% качество. Ще се стремим да получим изображения с тегло под 150KB и с достатъчно качество, за да бъде гледано от всяко устройство, от което има достъп до мрежата.
  • На свой ред PNG е формат на изображението без загуби. Колкото и да запазваме изображението отново и отново, то поддържа броя на оригиналните цветове, така че да не губи качество, освен ако не премахнем количеството на гореспоменатите цветни пиксели.
  • Това е най-широко използваният некомпресиран цветен информационен формат при уеб разработката. Много е полезен за плоски цветни фонове, икони или графики.
  • Обикновено не се препоръчва за показване на снимки, тъй като методът му за оптимизиране без намаляване на информацията за цветовете кара изображенията да тежат повече в този формат.

PNG срещу JPG: Прозрачност

  • JPG форматът не поддържа прозрачно фолио. Фонът на изображение във формат .JPG винаги ще има цвят.
  • Форматът PNG е най-подходящ за изображения с прозрачност. Той може да съдържа 8 допълнителни бита информация във всеки пиксел, което е оптимално за създаване на графики без специфичен цветен фон.
  • Не забравяйте, че прозрачните изображения заемат повече KB, защото те винаги ще бъдат изображения с по-голямо тегло в битове. От своя страна JPG форматът не поддържа прозрачност.
  • Това е оптимален формат за изображения, които съдържат текстови символи. Методът му на компресия без загуби го кара да зачита ръбовете на шрифтовете, без да смесва цветове със съседни пиксели. Също така в този формат изображенията с текст тежат много по-малко, отколкото в .JPG.

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

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

TinyJPG + TinyPNG

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

В допълнение към уеб интерфейса, те имат платен плъгин, който ви позволява да оптимизирате изображения в Photoshop и плъгин WordPress, който ви позволява да направите същото в най-използваната CMS в света.

  • Оригинално изображение: 55,57 KB (56 907 байта)
  • Оптимизирано изображение 15,03 KB (15 391 байта)

Кракен

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

  • Загубени: Интелигентна оптимизация на изображението, която обикновено намалява теглото на изображението с 60%. Той е проектиран да произвежда изображения с много добро качество, без забележима загуба на качество. Това е режимът, който те препоръчват за по-голямата част от потребителите.
  • Без загуби: Този режим позволява да се намали възможно най-голямото тегло на файла, без да се докосва нито един пиксел. Тоест позволява малко по-малко намаляване на теглото от режима на загуба, но изображенията няма да загубят никакво качество.
  • Експерт: Този режим за по-напреднали потребители ще ви позволи да установите различни нива на качество за оптимизиране на изображението, като съхранявате EXIF ​​данните на същото.
  • Оригинално изображение: 55,57 KB (56 907 байта)
  • Оптимизирано изображение: 15,15 KB (15 512 байта)

Въпреки че имат безплатен интерфейс за използване, техният бизнес модел е по-насочен към пакетна оптимизация на изображенията в техните платени планове. За това те имат API за оптимизация и специална инфраструктура, както и приставки за WordPress и Magento.

Компресор.io

Този инструмент ни позволява да оптимизираме изображенията и има поддръжка за 4 различни типа файлове: JPEG, PNG, GIF и SVG. С два вида компресия: Без загуби или със загуби

  • Оригинално изображение: 55,57 KB (56 907 байта)
  • Оптимизирано изображение: 16,18 KB (16,573 байта)

Списък на компресорите на изображения

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

    1. Squoosh: https://squoosh.app/
    2. SVG: https://vecta.io/nano
    3. SVG компресор: https://vecta.io/nano
    4. Компресиране на JPEG: https://compressjpeg.com/
    5. Компресиране на PNG: https://compresspng.com/
    6. Compress Studio: https://compress.studio/
    7. Compressor.io: https://compressor.io/
    8. ILoveImg: https://www.iloveimg.com/compress-image
    9. Компресор на изображения: https://imagecompressor.com/
    10. Компресор на изображения: https://smallseotools.com/image-compression/
    11. ImageResize: https://imageresizer.com/image-compressor
    12. JPEG оптимизатор: http://jpeg-optimizer.com/
    13. Kraken: https://kraken.io/
    14. Малко JPG: https://tinyjpg.com/
    15. Малко PNG: https://tinypng.com/
    16. Toolur: https://compressimage.toolur.com/

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

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

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

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