Как да настроите уебсайта си за изображения, готови за ретина

Съдържание:

Anonim

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

Ето какво трябва да знаете за възможностите да направите работата си най-добра на дисплеите на Retina. Добрата новина е, че, колкото и страшно да изглежда, наистина не е толкова сложно.

$config[code] not found

Предварително подготвяне на уебсайта ви за готови за ретина изображения

Двойно забавление

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

CSS актуализациите, от които се нуждаете, ще варират в зависимост от целевите ви браузъри, но добрата новина е, че вече не е много сложна и става по-лесна. Ще оставим действителното кодиране на друг ден.

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

SVG

Друг подход е SVG или Scalable Vector Graphics. Както подсказва името, те са ограничени до векторни графики и няма да работят с фотографски изображения, но SVG графиката елиминира необходимостта от два файла с изображения за всяка графика на сайта Ви. Отново има вариации от браузър до браузър, така че ще искате да направите допълнителни изследвания в зависимост от вашите нужди.

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

Груба сила

Разбира се, можете просто да изхвърлите файловете с ниска разделителна способност и просто да покажете готовите за Retina изображения. Ние препоръчваме това само за употреби с много строго определена аудитория. Ако знаете, че честотната лента няма да бъде проблем, това може да е правилният път, но със сигурност не е добра практика

Други решения за кодиране

В другия край на усилието и елегантността са включени методи за кодиране, които разчитат на някои промени на сървъра (като.htaccess файлове), заедно с PHP и Javascript кодиране.

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

Като цяло, подходът, който ще предприемете, ще зависи от аудиторията ви, от характера на визуализацията на сайта ви и от нивото на техническа експертиза на вашия екип за развитие. Има добро решение за всяка ситуация. Единственото лошо решение е игнорирането на дисплеите на Retina изцяло.

NASDAQ Photo чрез Shutterstock