Съществуват редица формати на изображения, които могат да се използват в уеб страници. Някои често срещани примери са GIF , JPG и PNG . SVG файловете също са широко използвани на уеб сайтовете днес, което дава на уеб дизайнерите още една възможност за онлайн имидж.
GIF Изображения
Използвайте GIF файлове за изображения, които имат малък, фиксиран брой цветове. GIF файловете винаги се свеждат до не повече от 256 уникални цвята. Алгоритъмът за компресиране на GIF файлове е по-малко сложен, отколкото при JPG файлове, но когато се използва за плоски цветни изображения и текст, той произвежда много малки размери на файловете .
Форматът GIF не е подходящ за фотографски изображения или изображения с градиентни цветове. Тъй като GIF форматът има ограничен брой цветове, градиентите и снимките ще завършат с лента и пикселиране, когато бъдат запазени като GIF файл.
Накратко, бихте използвали GIF само за прости изображения с само няколко цвята, но можете също така да използвате PNG за това (добре за това скоро).
JPG изображения
Използвайте JPG изображения за снимки и други изображения, които имат милиони цветове. Той използва сложен алгоритъм за компресиране, който ви позволява да създавате по-малки графики, като губите част от качеството на изображението. Това се нарича компресия "загуба", защото част от информацията за изображението се губи, когато изображението е компресирано.
JPG форматът не е подходящ за изображения с текст, големи блокове с плътен цвят и прости форми с чисти ръбове. Това е така, защото когато изображението е компресирано, текстът, цветът или линиите могат да се размазат, което води до изображение, което не е толкова рязко, колкото ще бъде запазено в друг формат.
JPG изображенията се използват най-добре за снимки и изображения, които имат много и много естествени цветове.
PNG изображения
PNG форматът беше разработен като заместител на GIF формата, когато се появи, че GIF изображенията ще бъдат предмет на такса за авторски права. PNG графиките имат по-добра скорост на компресиране от GIF изображенията, което води до по-малки изображения от същия файл, запазен като GIF. PNG файловете предлагат прозрачност на алфа, което означава, че можете да имате области от вашите изображения, които са напълно прозрачни или дори използват диапазон от алфа прозрачност. Например, капка сянка използва редица ефекти на прозрачност и би била подходяща за PNG (или може просто да завършите да използваме CSS сенки вместо това).
PNG изображенията, като GIF, не са подходящи за снимки. Възможно е да се заобиколи проблемът с появата на лента, който засяга снимките, запазени като GIF файлове, използващи истински цветове, но това може да доведе до много големи изображения. PNG изображенията също не са добре поддържани от по-стари мобилни телефони и функционални телефони.
Използваме PNG за всеки файл, който изисква прозрачност. Използваме също PNG-8 за всеки файл, който би бил подходящ като GIF, като вместо това използва този PNG формат.
Изображения на SVG
SVG означава "мащабируема векторна графика". За разлика от растерните формати, намиращи се в JPG, GIF и PNG, тези файлове използват вектори за създаване на много малки файлове, които могат да бъдат изобразени на всякакъв размер без загуба на качество на увеличаване на размера на файла. Те са създадени за илюстрации като икони и дори лога.
Подготовка на изображения за уеб доставка
Независимо кой формат на изображението използвате и че уебсайтът ви със сигурност ще използва различни формати на всичките си страници, трябва да сте сигурни, че всички изображения на този сайт са подготвени за доставка в мрежата . Твърде големи изображения могат да причинят забавяне на сайта и да повлияят на цялостната му ефективност. За да се бори с това, тези изображения трябва да бъдат оптимизирани, за да намерят баланс между високо качество и възможно най-малкият размер на файловете на това ниво на качество.
Изборът на правилния формат на изображенията е част от битката, но също така се уверете, че сте подготвили тези файлове, е следващата стъпка в този важен процес на уеб доставка.
Оригинална статия на Дженифър Кринин. Редактиран от Джеръми Жирар.