8 Грешки в образа, които трябва да се избягват на вашия уебсайт
Големите изображения, галерии и фото-тежки дизайни са голяма тенденция в уеб дизайна. За да се възползвате максимално от тази естетика, искате да сте сигурни, че всяко изображение на вашия уебсайт отговаря на дисплея и добре представя вашата марка.
Има много грешки, които дизайнерите правят по пътя, от технически проблеми до качество на изображението. Но не е нужно да попадате в някой от тези капани, когато работите с изображения на уебсайтове. Тук ще разгледаме грешките в изображението и как да ги коригираме или избягваме напълно. (Като бонус в тази публикация, ние представяме колекция от забавни и страхотни изображения от смъртта до последната колекция от обекти на Stock Photo.)
Грешка: Качване на огромни файлове
Изображенията в пълен размер са красиви (и необходими), когато става въпрос за задания за печат, но могат да имат проблеми, когато става въпрос за интернет. Големите изображения се зареждат бавно; бавното време на зареждане кара потребителите да изоставят вашия сайт.
За съжаление, в това е лесен капан. Много бекенд програми позволяват качването на големи изображения и освен ако не обърнете внимание, може дори да не знаете, че се качват файлове с невероятни размери. Различните изображения при различни приложения изискват различни спецификации на изображението. Обърнете се към ръководството за вашата марка или уебсайт, за да знаете какви са размерите на общите области на изображението на вашия сайт.
Когато мислите за изображения, типът файл също има значение. Моля, не използвайте tiff за мрежата. Най-често срещаните и използваеми файлови формати са PNG (генерирани от компютър изображения като диаграми или лога или когато е необходима прозрачност), JPG (снимки) или GIF (анимации).
Решение: Простото решение е да оразмерите изображения за размерите на рамката, където те ще се показват при правилна уеб резолюция. Но има още малко в това. Запазете всяко изображение за оптимално използване на вашия сайт и за социално споделяне. (Широчината на изображението на Pinterest например е 600 пиксела; ако искате изображението да бъде сменяемо, то трябва да е този размер.)
Грешка: Забравяне на изрязването
Докато използването на огромни файлове може да заблуди сайт, така може да се използват изображения в цял кадър, които са скрити на екрана. Изрязването помага за показване на визуалните изображения, които искате да виждат потребителите, като създава определена фокусна точка, която може да не е там с изображение в цял кадър.
Липсата на изрязване на изображение също може да създаде по-малко динамичен стек от визуализации, които всички имат еднакви форми и съотношения. Използването на множество култури и интересни форми за изображения може да добави визуална интрига към уебсайт.
Решение: Изрязвайте изображенията в подходящ размер или измерение, преди да го качите, така че всяко изображение да се изобрази по желание.
Грешка: Забравяйки за миниатюрите
Има редица начини да се справите с оразмеряването и оразмеряването на миниатюрите. (Много от тях зависят от възможностите ви в заден план, така че няма да спорим достойнствата на всеки.) Но трябва да помните, за да актуализирате и да обърнете внимание на най-малките изображения на вашия сайт.
Твърде често дизайнерите забравят, че миниатюрите, визуализациите на изображения и фаворитите ще трябва да бъдат актуализирани с промени в съдържанието на уебсайта.
Другата основна грешка? Използване на лошо изображение в размер на миниатюрата, защото това е толкова голямо, колкото може да бъде. Ако изображението е лошо, просто не го използвайте. Никое изображение не е по-добро от лошо изображение.
Решение: Уверете се, че премахнете стари миниатюри или визуализации, когато изображенията се променят и дали фавиконът ви е актуален.
Грешка: Неизследвани имена и метаданни
Цифровите камери спестяват много информация в различни мета полета, която не се превежда в мрежата. Съблечете тази информация от изображения и я разменете за използваеми данни. Търсачките не могат да четат съдържанието на изображенията, така че за да могат да ги търсят изображения, трябва да включват описателни думи в заглавието, маркерите и заобикалящото ги съдържание.
Примери за некачествени имена на изображения:
- picture1.jpg
- DSCN00023.jpg
- очила% и% watch.jpg
Много по-доброто име на изображение включва няколко описателни думи като очила-и-гледай-и-растение.jpg. Справочникът на етикета за изображението трябва да включва подобно описание, например „предмети на гишета, часовник и растение“. (И не забравяйте да пишете правилно думи.)
Решение: Използвайте силни конвенции за именуване за всички изображения на уебсайтове и сдвойте изображения със съдържание, което е свързано с всеки визуален. Имената на изображенията трябва да включват описателни думи, разделени от тирета.
Грешка: неправилно мащабиране или разтягане
Нищо не изглежда по-странно, че човек с изпънато лице или изображение, което е неправилно мащабирано. Разтягането или непропорционалното мащабиране на изображенията (което може да бъде особено често при промяна на тема или заден край) е не-не. Всяко изображение трябва да бъде мащабирано със съотношение 1 към 1, вертикално и хоризонтално. Всичко друго накърнява целостта на снимката.
Решение: Гледайте внимателно всички пропорции на мащабиране и периодично проверявайте сайта си.
Грешка: Не се планира за множество размери устройства
Отзивчивите дизайнерски рамки имат някои последствия за изображенията. Промяната във формата или размера от устройство към устройство или по ориентация прави важно да се диктува как изображенията ще се изобразяват на устройства.
Една от най-често срещаните практики е да използвате медийни заявки, за да планирате тези промени по устройство. CSS позволява да се прилагат специфични стилове към изображения въз основа на размерите на екрана и помага на изображенията да се разлепят добре, без да се „нарушава“ дизайна.
Решение: Използвайте медийни заявки за отзивчиви рамки и тествайте изобразяването на изображения на редица устройства.
Грешка: Игнориране на екраните на ретината
Имаше време не толкова отдавна, когато стандартното изображение с ширина 600 пиксела при 72 ppi беше всичко, което ви трябва за уебсайт. Но екраните се подобряват със скорост, при която това просто вече не е така.
В зависимост от вашата рамка, всяко изображение всъщност може да включва множество изображения, записани за различни размери и разделителни способности на екрана, включително дисплеи на ретината. (Разделителната способност на дисплеите на ретината може да варира в зависимост от устройството, но е значително по-висока от стандартните дисплеи.)
Решение: Включете файлове и медийни заявки, които са специално за дисплеи на ретината. (CSS-триковете могат да помогнат.)
Грешка: Прекалено използвано или родово изкуство
Сток фотографията може да бъде много бързо поправяне, но може да доведе до някои нежелани последствия. Снимките, които се използват на твърде много уебсайтове или просто имат общ облик и усещане към тях, няма да създадат визуален, който установява връзка с потребителите. (Не искате вашият уебсайт да изглежда като всеки друг там, нали?)
Ако планирате да използвате стокова фотография, помислете за изображения, с които можете да редактирате или да работите по интересни начини. Избягвайте изображения, които приличат на неща, които сте виждали на други места (вижте изображенията за всички конкуренти или подобни сайтове).
Решение: Помислете да наемете фотограф, който да създаде страхотен файл с изображения, специфичен за вашия уебсайт. Включете визуализации, които са свързани с вашата компания или марка и отразяват вашия сайт по правилния начин.
заключение
Изборът и създаването на изображения за проект на уебсайт може да бъде една от най-забавните части на процеса на проектиране. Внимавайте с всяко изображение и пиксел, за да гарантирате, че сайтът ви работи добре и включва изображения, които ще ангажират потребителите.
Имате ли някакви съвети или трикове, когато става въпрос за използване на изображения за проекти на уебсайтове? Бихме искали да знаем какви са те. Споделете ги в коментарите.
