𝔹𝕝𝕦𝕣𝕣𝕖𝕕 𝕀𝕞𝕒𝕘𝕖𝕤 𝔸𝕣𝕖 𝔼𝕧𝕖𝕣𝕪𝕨𝕙𝕖𝕣𝕖

Нямахме проблеми с остротата на изображението в първите години на интернет, защото не ни беше необходимо да показваме уебсайтове на мобилни устройства.

Днес наблюдаваме огромен ръст в мобилното сърфиране в мрежата. Толкова много, че тази година той дори изпревари трафика на настолни компютри.

Повечето клиенти се опитват да създадат отзивчив интерфейс за своите уебсайтове, така че да са лесно достъпни от всякакъв вид устройства. И не изглежда странно, че много разработчици на оформление са започнали да използват

img {
    ширина: 100%;
    височина: авто;
}

за техните изображения. Така те безпроблемно работят във всяка резолюция на прозореца на браузъра, мащабирайки до наличното пространство.

Концептуално всичко изглежда добре. Дизайнерите създават хубави големи изображения, а разработчиците използват тези изображения за всяко устройство. В някои случаи разработчиците създават множество версии на едно и също изображение, така че по-малко изображение се изтегля за мобилни екрани, а по-голямо изображение за настолни компютри.

За съжаление Chrome не иска да преоразмерява изображенията по начина, по който правят добрите редактори на изображения. Вместо това, той поставя изображението с не същата или подобна острота като първоначалното изображение.

Основната причина за това може да е изпълнението. Когато дадена уеб страница има много изображения и процесорът на устройството не е много продуктивен, допълнителната обработка на изображения може да доведе до по-големи закъснения в изобразяването на страниците, така че Chrome пропуска този процес като не е от решаващо значение за крайните потребители.

Ще ви покажа няколко примера с браузъра Chrome, а след това с други браузъри. Ето изображение, намалено до 1000 px във Photoshop:

Същото изображение, качено в оригиналния размер и намалено от браузъра. Сравнете остротата на очите на кучето

Photoshop:

Браузър:

Нещата стават още по-лоши, когато добавите острота във Photoshop след намаляване на размера. Но снимките в този случай са по-прости, тъй като обикновено нямат много остри ръбове. Проблемите с всякакви векторни илюстрации, запазени като .png изображения, са много по-забележими. Чести случаи - лога на уебсайтове.

Лого на Асана, начален файл:

Преоразмерен във Photoshop:

Направено в браузър:

Лого на Wecan, начален файл:

Преоразмерен във Photoshop:

Направено в браузър:

И няколко допълнителни лого на браузъра:

Намерих най-забавните сравнения на замъглени изображения на уебсайтове, свързани с UX. Раздел за работа Smashingmagazine в браузъра:

В Photoshop:

Nielsen Norman Group, статия за съпровождане на емпатия, изобразена графика:

Използване на размера на Photoshop:

Трябва да призная, че този проблем е само Chrome. IE прави много по-добре; забележимо е, че някои тънки линии са пикселирани, което е добре за текст:

Firefox също има добро изобразяване; изглаждането прави текста малко по-малко четим, отколкото в IE, но е по-добър за лога:

Това, което разработчиците трябва да направят в момента, е да включат собствеността за автоматично рязкост на webkit:

img {
    изобразяване на изображение: -webkit-оптимизиране-контраст;
}

Това бихме получили, ако беше включено:

Така че, преди най-популярният браузър в света да приложи добър алгоритъм за намаляване на извадката на изображението, можем да използваме свойството webkit-optimize-контраст, което позволява на посетителите на нашите сайтове да се насладят на нашите снимки, да разберат подробности за артикулите в нашия онлайн магазин и да оценят. четимост на нашите екранни снимки и диаграми. Но бъдете внимателни, в някои случаи това може да доведе до пикселирани резултати.