Как сохранить качество изображения в браузере

Question

Я создал изображение в форме стрелки (100 пикселей * 25 пикселей) в Photoshop. Я использую этот образ в фоне ярлыков HTML. Я написал CSS для изменения ширины изображения динамически. Но его резкость меняется при уменьшении ширины меток. Как я могу поддерживать исходное качество по мере изменения ширины.

Answer 1

Вы можете создать несколько версий своего изображения и использовать их по одному с помощью медиа-запросов.

Update: Вот пример:

@media screen and (max-width:1024px) { 
label { 
background-image: url(high-quality-img-url.png); 
/*other rules go here....... */ 
} 

@media screen and (max-width:786px) { 
label { 
background-image: url(medium-quality-img-url.png); 
/*other rules go here....... */ 
} 

@media screen and (max-width:480px) { 
label { 
background-image: url(low-quality-img-url.png); 
/*other rules go here....... */ 
}