Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.

Растерни и векторни изображения

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Най-важното: кога да използваме растерни и кога векторни изображения

Растерните изображения (PNG, JPEG) са изградени от пиксели и изглеждат най-добре в своята оригинална (native) резолюция или когато се намаляват. При увеличаване те се размиват, защото браузърът разтяга пикселите.
Векторните изображения (SVG) са изградени от математически криви и могат да се мащабират без загуба на качество. Ако трябва да уголемявате изображение, използвайте SVG.

Демонстрация с `background-size` в CSS

В урока се използва CSS свойството background-size, за да се промени размерът на фоново изображение в контейнер.

Задайте растерно изображение (например PNG) като фон.
Добавете background-size, например 100px auto.
Увеличете стойността (например 200px auto) и наблюдавайте замъгляването.
Намалете размера (например 20px auto) и вижте, че изображението остава рязко.
Заменете PNG с SVG версия на същата иконка.
Увеличете размера отново – ще забележите, че SVG остава напълно рязко.

Използвани CSS свойства

background-size – контролира ширината и височината на фоновото изображение; може да приема конкретни стойности (напр. 100px 100px) или комбинация с auto за запазване на пропорциите.
background-image – задава изображението, което ще се използва за фон (PNG, JPEG, SVG и др.).

Практическо правило: избягвайте да увеличавате растерни изображения. Ако се налага мащабиране нагоре, изберете SVG.