Є таке прислів'я "Одна картинка говорить більше, ніж тисяча слів". Цей вираз особливо виправдано у Веб-сфері, де концентрація уваги розсіяна, і тому правильний образ може залучити або відлякати відвідувача. Привертаючи уваги, варто звернути користувача в правильне русло, для того щоб користувач досяг поставленої вами целі.Так що на веб-сайті, зображення дійсно можуть коштувати більше тисячі слів!
З урахуванням важливості використання зображень, давайте розглянемо ситуацію, коли зображення є на сайті, але не загружаеться. Це може статися, якщо у вас є вбудовані зображення, які є частиною HTML або фонових зображень, застосованих за допомогою CSS. Актуально і те, що тепер Google зменшує файли JPEG на 35% за допомогою нового алгоритму Guetzli, докладніше тут .
Суть в тому, що, коли графічне зображення не завантажується на сторінці, це змушує дизайн виглядати зламаним і в деяких випадках може повністю зруйнувати призначений для користувача інтерфейс на сайті.
Давайте розглянемо деякі з поширених причин, за якими зображення можуть не відображатися на сайті, а також те, що ви повинні перевірити під час тестування веб-сайту. Для конвертації зображень використовуйте спеціальні програми , Які спростять вашу роботу з картинками і з їх подальше розміщення на сайті.
Чи не правильний шлях
Коли ви додаєте зображення в HTML або CSS-файл сайту, ви повинні створити шлях до цього у вашій структурі каталогів, де знаходяться ці файли. Цей код вказує браузеру звідки показувати зображення. У більшості випадків картинки находяться в папці «images». Якщо шлях до цієї папки і файли всередині неї невірні, зображення не будуть завантажуватися належним чином, тому що браузер не зможе отримати правильні файли.
Браузер буде слідувати вказаним шляхом, і в разі відсутності відповідного місце зображення буде порожнім.
Налагодження проблем із завантаженням зображень полягає в перевірці правильності шляху до зображення. Можливо, ви вказали правильну каталог або неправильно вказали шлях до цього каталогу. Якщо це не так, у вас може бути інша проблема, яку ми розглянемо далі!
Чи не правильна назва файлу
Після того як ви переконалися, що шлях до файлу правильний, перевірте правильність зазначеного назви зображення. У нашій практиці найбільш частою причиною помилки відображення зображення є помилка в назві або неправильно вказана назва зображення. Пам'ятайте, що браузери не розуміють помилок, навіть якщо ви опечатали всього в одній букві зображення завантажуватися не буде.
Чи не правильне розширення файлу
У деяких випадках вказуючи правильне ім'я файлу і путя, помилка з'являється при неправильному розширенні файлу. Якщо ви завантажили картинку в .jpg, а в HTML вказано формат .png виникне проблема. Перевірте чи відповідає формат зображень із зазначеним форматом в коді.
Також слід звернути увагу на те, що якщо ви використовуєте .JPG (всі великі літери), а в назву .jpg (маленькими), то деякі веб-сервера можуть не вантажити зображення. Ми рекомендуємо зберігати назву зображень без використання великих літер, це допоможе уникнути помилок при завантаження картинок.
Помилка при завантаженні
Якщо ви правильно вказали шлях ім'я, а також розширення файлів, а зображення все одно не відображається, варто перевірити завантажено дане зображення на сервер без помилок.
Недбала завантаження файлів на сервер при запуску сайту є поширеною помилкою, яку легко втратити. Як виправити цю проблему?
Завантажте потрібні зображення, поновіть свою веб-сторінку, і вона повинна відразу відобразити файли. Ви також можете спробувати видалити зображення на сервері і повторно завантажити його. Це може здатися дивним, але це дійсно працює. Іноді файли пошкоджуються, тому цей метод «видалити і замінити» може допомогти.
Сервер з картинками недоступний
Ви зазвичай зберігайте майже всі картинки на своєму сервері, але також є картинки, які розміщені на інших серверах. Так, що якщо інший сервер буде недоступний, то картинки можуть не відображатися.
Проблеми з відображенням
Незалежно від того, завантажений чи файл зображення із зовнішнього домену або з вашого власного, завжди є ймовірність, що може виникнути проблема з відображенням цього файлу, коли він запитується браузером. Це нечасте явище (якщо це так, вам може знадобитися новий хостинг-провайдер ), Але це може відбуватися час від часу.
Неприємна сторона цієї проблеми полягає в тому, що насправді ви нічого не можете з цим вдіяти, так як це проблема поза вашим контролем. Доброю новиною є те, що тимчасова проблема часто вирішується досить швидко. Наприклад, коли хтось бачить зламану сторінку і оновлює її, це саме по собі часто усуває проблему і правильно завантажує зображення. Якщо ви бачите зламане зображення, поновіть браузер, щоб побачити, можливо, це була проблема передачі - ваш початковий запит.
Ну і наостанок ...
Коли ви думаєте про використання зображень, потрібно пам'ятати про дві речі, які необхідно враховувати: правильне використання тегів ALT, швидкість сайту і загальна продуктивність.
ALT (альтернативний текст) - текст який відображається, якщо зображення не загрузилось. Він також є важливим компонентом створення для веб-сайтів, які можуть використовуватися людьми з обмеженими можливостями. Кожне вбудоване зображення на вашому сайті повинно мати відповідний тег ALT. Зверніть увагу, що зображення, що застосовуються з CSS, не мають цього атрибута.
Що стосується продуктивності веб-сайту, завантаження занадто великої кількості зображень або навіть декількох зображень гігантів, які неправильно оптимізовані, нададуть також негативний вплив на швидкість завантаження. З цієї причини не забудьте перевірити вплив будь-яких зображень, які ви використовуєте в дизайні вашого сайту, і зробіть будь-які кроки, які необхідні для підвищення продуктивності цього сайту, при цьому створюючи загальний зовнішній вигляд, відповідний для вашого інтернет-проекту.
Даний матеріал є перекладом з сайту www.thoughtco.com.
Також важливо оптимізувати картинки на вашому сайті. Для чого це потрібно? Більш детально читайте в наступній статті .
33627 раз (а) 65 Сьогодні переглянуто раз (а)
Як виправити цю проблему?Для чого це потрібно?
