Скоротіть і назвіть свої зображення для швидкого та оптимізованого веб-сайту
Це буде корисно для користувача Інтернету та для вашого SEO.
Пошукові системи дуже добре виглядають на добре побудованих і швидких сайтах, це зручність для користувача Інтернету, а також жест для природи, легкий сайт, що споживає менше енергії.
Правила розміщення фотографій на веб-сайті:
- Мінімізуйте їх розміри.
- Стисніть їх
- Назвіть їх
- Заповніть тег alt
◄ Ця фотографія (*) розміром і стиском має ширину 210 пікселів і вагу 20 Кб
Якщо ви робите фотографію за допомогою камери, розмір зображення зазвичай становить 2000 пікселів у ширину, іноді навіть більше. Фотографія шириною 2000 пікселів важить 12000 КБ (12 МБ). Якщо на сторінці ви помістите 5 фотографій розміром 2000 пікселів, вихідні, їх буде автоматично змінено, але їх вага залишатиметься незмінною, у вас буде сторінка, яка "важить" 60 000 КБ (60 Мб) просто для фотографій, що є величезний час завантаження і відлякати будь-якого користувача Інтернету.
Поклавши фотографії правильні розміри та стискання їх, вага цих 5 фотографій буде важити не більше 100 Кб, що набагато швидше !
1- Розмістіть свої фотографії в потрібних розмірах
Нижче наведено міні-посібник для зменшення розміру фотографій за допомогою Photoshop або Gimp2
Підручник із зменшення розміру фотографій за допомогою Photoshop
Попередньо ви відкрили фотографію для зменшення за допомогою програмного забезпечення Photoshop
- Клацніть на вкладці "Зображення"
- Клацніть на рядок "Розмір зображення", відкриється нове вікно
- Змініть ширину на бажаний розмір
- Поле "зберігати пропорції" має бути встановленим, тоді добре, і все готово !
Клацніть на фотографії, щоб збільшити
Підручник із зменшення розміру фотографій за допомогою GIMP 2
Заздалегідь ви відкрили фотографію для зменшення за допомогою програмного забезпечення GIMP 2
- Клацніть на вкладці "Зображення"
- Клацніть на рядок «Масштаб і розмір зображення», відкриється нове вікно
- Змініть ширину на бажаний розмір, пропорції зберігаються
- Потім натисніть на "Масштаб", і все готово !
Клацніть на фотографії, щоб збільшити
2- Стисніть зображення
Що робити:
Збережіть свою фотографію за допомогою команди:
- "Зберегти для Інтернету або пристроїв": Photoshop
- "Експорт": GIMP2
- «Зберегти для робочого столу»: Corel
Виберіть формат фотографії:
Ви можете зберігати свої фотографії у декількох форматах: Jpg - Png - Gif
Зображення у форматі png прозоре знизу
Зображення у форматі jpg, синій фон
Виберіть якість:
- Від низького до максимального (або від 0 до 100) для фотошопу
- Від o до 100 для GIMP2 або Corel
Нижче підручника з міні-фотографій для стиснення фотографій за допомогою Photoshop або Gimp2
Підручник із стиснення зображення за допомогою програмного забезпечення PHOTOSHOP
По-перше, ви відкрили фотографію для стиснення за допомогою програмного забезпечення Photoshop
- Клацніть на вкладку ФАЙЛ
- Клацніть на рядок РЕЄСТРАЦІЯ ДЛЯ МЕРЕЖА ТА ПРИСТРОЇВ: Відкриється нове вікно
- Виберіть формат: JPG - PNG - GIF
- Виберіть якість: від НИЗЬКОГО до МАКСИМАЛЬНОГО
- Вага вашої фотографії відображається відповідно до ваших налаштувань
- Клацніть на ЗБЕРЕГТИ
Клацніть на фотографії, щоб збільшити
Підручник із стиснення фотографії за допомогою програмного забезпечення GIMP 2
Попередньо ви відкрили фотографію для стиснення за допомогою програмного забезпечення Gimp2
- Клацніть на вкладку ФАЙЛ
- Клацніть на рядок ЕКСПОРТ: Відкриється нове вікно
- Дайте фотографії назву
- Виберіть формат: JPG - PNG - GIF
- Клацніть на ЕКСПОРТ: Відкриється нове вікно
- Виберіть якість (зазвичай 60)
- Вага вашої фотографії відображається відповідно до ваших налаштувань
- Клацніть на ЕКСПОРТ
Клацніть на фотографії, щоб збільшити
Приклад стиснення:
Нестиснута фотографія правильних розмірів, збережена за допомогою команди "зберегти як". 96 Кб
Стиснута фотографія, з хорошими розмірами, з невеликим зниженням якості. Збережено за допомогою команди "зберегти для Інтернету" Вага: 15Ко
Ці дві фотографії показують, що стиснення не впливає на візуальне, і ми переходимо від фотографії 96 КБ (нестиснуте) до 15 КБ (стиснене)
3- Назвіть фотографії
Коли ви зберігаєте свою фотографію (після того, як ви його розмірили і стислили, див. вище), не робіть це з іменем, як FU8740002.jpg, а навпаки з назвою, що описує зображення.
Приклад: ратуша-де-мец.jpg.
Ця назва не повинні містити акценти та пробіли.
Якщо залишити акценти, це призведе до конфліктів з браузерами, а фотографії не з’являться, якщо залишити пробіли, вони будуть замінені на% у вашій URL-адресі, і користувачеві або вам буде важко їх розпізнати.
Приклад: їдальня буде називатися: їдальня.
4- Заповніть тег "alt" кожного зображення чи фотографії
alt тег використовується перш за все для інваліди по зору та сліпі.
Браузери (Internet Explorer, Chrome, Mozilla та ін.) Не можуть побачити і зрозуміти, що являє собою зображення, і заповнюючи цей тег написом (наприклад, "Вхід до Музею в Меці"), ви заповнюєте у браузері, і він може доставити інформацію розмовною мовою людям, які її потребують. Ви можете побачити тут, як людина з вадами зору користується комп’ютером (джерело знайдено в Alsacréations)
До створення вашого сайту а в наступні місяці, якщо ви не будете робити активне посилання, лише зображення Google принесе вам відвідувачів, балувати.
Тег alt і WordPress
У WordPress ми розміщуємо текст, що описує фотографію (тег), в "альтернативний текст"
Як заповнити тег alt у Prestashop
У Prestashop ми розміщуємо текст, що описує фотографію (тег), у "caption"
Правка від 24.10.2015
Тег alt і Prestashop версії 1.6
Тег Alt для зображення товару в Prestashop 1.6.
Заходимо в каталог, потім товари, вставляємо тег у "Легенду"
Тег Alt для зображення на сторінці Prestashop 1.6 CMS.
Ми переходимо до налаштувань, а потім cms, у текстовому редакторі натискаємо "вставити зображення", тег alt заповнює "опис зображення"
Тег alt у HTML
У HTML також потрібно вказати розміри фотографій (ширина = "900 ″ висота =" 220 ″)
Ці статті можуть вас зацікавити:
Comleweb:
7 коментарів:
Привіт, дякую за цю статтю та велику допомогу сьогодні вранці.
Дякую за статтю. Дуже чітке, добре популяризоване ... дуже корисне ...
дякую за цей дуже легкий для читання та дуже добре пояснений підручник. Тепер я розумію, чому моя домашня сторінка виглядає як ксерокс
Хороша стаття, добре представлена і дуже зрозуміла. Публікація, яка виділяється серед багатьох інших, яких дуже боляче читати ... Ця стаття заслуговує на те, щоб її уважно прочитали, щоб зрозуміти контрпродуктивний ефект важких та негабаритних фотографій, опублікованих на сайті чи в блозі ... Важливо освоїти їх дані, особливо коли ви запускаєте сайт каталогу або блог, який хочете прикрасити безліччю фотографій. Ця інформація також стосується тих, хто хоче надсилати фотографії електронною поштою> завжди зменшуйте розмір і вагу ваших зображень.
веб-сайт
Щиро дякую за цю дуже вичерпну статтю!
Тепер я знаю, чому показ мого сайту триває так довго. Мене чекає довга робота, щоб відновити всі свої фотографії шириною 4000 пікселів!
Ви можете автоматизувати все за допомогою Photoshop, тобто застосувати таку ж процедуру до партії фотографій. Це вбудований сценарій, де ви встановлюєте потрібні розміри, стиск, і цей сценарій застосовується до всіх відкритих фотографій. Дуже практично, щоб заощадити час ...
Щодо Gimp2, я також вважаю, що це можливо, але вам доведеться шукати підручник в Інтернеті.
Дякуємо за цю повну та зручну для доступу статтю !