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