В тази публикация Ще изброим видовете изображения за уебсайтове. Това е проблем, на който трябва да се обърне внимание, тъй като влияе върху времето, необходимо за зареждане на страниците и дисковото пространство на сървъра. Това е прологът към друг, в който ще споменем инструментите на Linux за подготовка на изображенията.
Преди няколко дни ви казах, че по молба на стар приятел временно възобнових уеб разработката (дейност, която изоставих, защото не понасях клиенти) и използвам това, за да ви разкажа за различни решения с отворен код.
Видове изображения за уебсайтове
Един сайт има два вида основно съдържание, текстово и мултимедийно. Информацията за това съдържание се движи по мрежата в битов формат и браузърът я реконструира отделяне на думи от изображения, видео или звук.
В случай на изображения, Използват се различни формати, които съдържат информация за местоположението на пикселите, цветовете, размерите и алгоритъма за компресия.
Най-използваните графични формати в уебсайтовете са:
- APNG: Той е разработен от Mozilla, за да даде възможности за анимация на PNG формата. Идеален за анимации, които не са синхронизирани с други ресурси, като например звук. Работи с много по-широка цветова палитра от GIF.
- AVIF: Не трябва да се бърка с видео формата AVI. Името му е акроним за AV1 Image Format и кодира AV1 потоци от битове в контейнера HEIF (High Efficiency Image File Format). Има по-добра компресия със загуби от JPG и PNG и по-добра компресия без загуби от WebP. Поддържа анимации и прозрачност. Като отрицателен момент трябва да се отбележи, че изображението трябва да бъде изтеглено изцяло, за да бъде гледано, въпреки че това се компенсира от по-краткото време за изтегляне.
- bmp: Споменавам класическия формат за изображения на Windows, само за да ви кажа, че никога не трябва да го използвате. Въпреки че има някои начини за намаляване на размера им, те обикновено са доста тежки изображения.
- GIF: Това е формат, създаден за компресиране на 8-битова графика без загуба. Той е идеален за прости анимации и изображения на уебсайтове, предназначени за места с бавни връзки, тъй като ви позволява да покажете цялото изображение, но с по-ниско качество, когато не е приключило изтеглянето.
- JPEG: Това е формат за компресия със загуби, който се използва широко за снимки, въпреки че не се препоръчва за графики или диаграми.
- PNG: Също така широко използван, той предлага компресия без загуби, отлично управление на прозрачността и по-широка цветова палитра от GIF.
- svg: Вместо пиксели, този формат дефинира изображенията с поредица от команди, които ги изграждат. Той е идеален за графики и диаграми, които изискват прецизно представяне.
- TIFF: Това не е широко използван формат, тъй като генерира много тежки изображения. Въпреки че може да бъде полезно, ако това, което искате да вградите в сайта, са сканирани изображения. Можете да съхранявате няколко изображения в един файл.
- WebP: Този формат за неподвижни изображения и анимации създава по-малки файлове със или без компресия от JPEG и PNF. Може да се използва и за създаване на анимации. Въпреки че се поддържа от всички съвременни браузъри, по-старите не са съвместими.
Какво изображение да използвате за всеки случай
- Фотография: Идеалното е да използвате JPEG или WebP. В случай, че размерът е критичен, по-добре е да използвате втория, ако искате да осигурите съвместимост с по-стари браузъри, първия.
- Икони: Най-доброто съотношение на съвместимост и размер се предлага от PNG. Може да се използва и WebP (като се има предвид, че само съвременните браузъри го поддържат) ИЛИ SVG, ако искаме да използваме векторно изображение, което ще покажем увеличено на друго място в сайта.
- Екранни снимки: Като се има предвид, че при този тип изображения е необходимо текстът да се вижда, най-добре е да използвате изображение с компресия без загуби, като PNG или WebP. Можете да тествате как изглежда с помощта на JPEG.
- Диаграми и графики: Тук без съмнение най-добрият вариант е SVG, въпреки че можем да поставим изображение в PNG формат като резервно копие.