L; изкуство г; оптимизирайте изображенията за уеб избора на формат, компресия и най-добри практики

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

оптимизирайте

Тази статия е посветена на оптимизирането на изображения за мрежата. Разделихме го на няколко части. Първо ще се върнем към трите основни формата на изображения в мрежата: JPEG, GIF и PNG. Какви са характеристиките на всеки от тези формати? Кога да предпочитате едното пред другото? Какви са ограниченията, свързани с всеки формат? Ние отговаряме на всички тези въпроси.

След това даваме три съвета, за да запазите изображенията си в мрежата и да намалите теглото им и да оптимизирате работата на уебсайта си (по отношение на скоростта на зареждане). И накрая, накратко обсъждаме някои техники за намаляване на броя на HTTP заявки, свързани с изображения при зареждане на вашите уеб страници (спрайтове, CSS3, URI данни).

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

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

Изберете правилния формат за вашите изображения: JPEG или GIF или PNG ?

В интернет има три основни формата за изображения: JPEG формат, GIF формат и PNG формат. Това са единствените три формата, които се показват правилно във всички браузъри. Ще ви представим основните силни и слаби страни на всеки от тези формати, техния контекст на използване, съвети за тяхното добро използване и как да оптимизирате вашите изображения в тези различни формати.

JPEG формат (високо качество, ниско свиваемо)

Форматът JPEG е създаден през 1986 г., което го прави най-старият формат. Този формат е идеален за снимки (този формат се използва от повечето цифрови фотоапарати) и по-общо за изображения, използващи много широк спектър от цветове и контрасти (управлявани са над 16 милиона цвята). От друга страна, компресирането на JPEG води до загуба на информация (за разлика от PNG формата). Когато JPEG изображение е с ниско качество, тъй като е твърде компресирано, то се показва (пикселирано и размазано изображение). JPEG форматът губи качеството си доста бързо при компресия. Освен това алгоритъмът, използван за дефиниране на информацията, която трябва да бъде изтрита в случай на компресия, не е много ефективен. Потисната информация често се избира в области с нисък контраст на изображението. Ако вашето изображение съдържа големи разлики в контраста между пиксели към пиксели, изобразяването ще бъде лошо: някои области ще останат непокътнати при компресията, а други ще имат много забележима загуба на информация като последица. Които изведнъж създават контраст и нежелани ефекти. Колкото по-различни цветове и цветове съдържат вашите изображения, толкова по-малко е сгъстимото тегло на JPEG.

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

Оптимизирането на изображенията на вашия уеб сайт е една от основните техники за намаляване на времето за зареждане на страниците на вашия сайт. За да отидете по-далеч и ако вашият сайт е под WordPress, открийте 9 техники за подобряване на скоростта на зареждане на вашия WordPress сайт.

Препоръчваме ви да използвате функцията "Запазване за мрежата" на Photoshop, за да тествате разликата в качеството между вашите JPEG изображения в зависимост от избрания от вас размер и ниво на компресия. Всъщност, когато записвате изображение в Photoshop, имате избор между „Запазване като“ и „Запазване за мрежата“. Ако кликнете върху „Запазване за мрежата“, Photoshop ви предоставя функции за оптимизиране на вашето изображение и настройка на качеството. Функцията за предварителен преглед ви позволява веднага да видите резултата от вашите оптимизации. Целта на функцията „Запазване за мрежата“ е да успее да съчетае добро качество и намалено тегло.

Трябва също да знаете, че повечето JPEG файлове в интернет са прогресивни JPEG файлове. Това означава, че изображението започва да се показва с лошо качество на страницата, преди да се появи в нормалното си състояние. Това позволява на страницата да се зареди по-бързо. Всички браузъри поддържат прогресивни JPEG, но някои отнемат много време за показване на изображения. Възпроизвеждането или не на прогресивен JPEG също зависи от устройствата за възпроизвеждане (и техния процесор). Например прогресивните JPEG файлове (до момента) не работят с Mobile Safari, браузърът по подразбиране, използван за iPhone и iPad. Въпреки тези няколко проблема с поддръжката, прогресивният JPEG все още е добър начин да оптимизирате потребителското изживяване и да компресирате JPEG, без да губите информация.