Сьогодні ми всебічно розглянемо роботу з зображеннями в Інтернеті. Я знаю, що на цю тему вже все написано, але я спробую доповнити свій погляд та узагальнити різну інформацію.
Чого слід дотримуватися при виборі зображень для Інтернету?
1) Авторське право
Перш за все, авторські права на зображення повинні дотримуватися. На практиці це означає, що якщо у вас немає власних фотографій, вам потрібно використовувати фотографії з фотобанків. У вас є на вибір платний варіант: ви можете просто придбати зображення, або ви можете вибрати з безкоштовних фотобанків ті, які також призначені для комерційного використання. Це комерційне використання, коли ви розміщуєте зображення в рекламі для збільшення продажів. Наприклад, використання одного і того ж зображення у своєму щоденнику є незвичним явищем.
Безкоштовні стокові фотографії:
Ви також можете знайти інший список безкоштовних фотобанків тут: https://jurosko.sk/obrazky-zadarmo/
Платні фотобанки:
Для кожного зображення перевірте, який тип ліцензії воно охоплює.
2) Розмір фотографії
Перш ніж додавати їх в Інтернет, потрібно змінити розмір фотографій. Інструкції щодо зміни розміру фотографій після їх додавання до Інтернету наведені нижче.
Великі зображення в пікселях (досить пейзажу 2000 пікс, на висоту бл 600px макс) має бути макс до 200 - 300кБ для одного.
Менші картинки ідеально мати до 100 кБ і розміром бл 1000x1000px макс.
Обов’язково не розміщуйте на веб-сайті зображень, які у них є 1 Мб і більше. Великі зображення також уповільнюють завантаження веб-сайту, будьте обережні, особливо з мобільними телефонами.
Я рекомендую розміщувати зображення в слайд-шоу (рухомі картинки, що змінюються, які зазвичай використовуються на домашній сторінці/обертачі зображень) однакового розміру, безумовно високого та ідеально широкого. Якщо слайд-шоу не налаштовано на різні варіанти, ви, мабуть, не стрибнете високо. Це створює небажаний ефект, коли веб «стрибає» вгору-вниз відповідно до висоти зображень.
Також доцільно використовувати подібні кольорові зображення в одному слайд-шоу, які одночасно узгоджуються з Інтернетом. Різнокольорові зображення, при цьому одне буде темним, інше світлим і тому подібним не створює ефекту цілісності сторінки, тому добре подумати про це.
Тип: Якщо ви завантажуєте кілька версій зображень в Інтернет і змінюєте їх розмір по-різному, радимо видалити ті, які ви не будете використовувати пізніше, з медіатеки, щоб компенсувати їх. Також буде зрозуміліше, коли вам потрібно щось там знайти, коли немає жодної статті 10. Плюс, принаймні, ви не будете зайво перевантажувати місце на хостингу.
Програми для редагування зображень
Якщо програма редагування зображень, яку ви використовуєте, має опцію Зберегти для Інтернету, обов’язково збережіть її у такому форматі (наприклад, Photoshop).
Він також має розширені можливості редагування зображень Gimp - https://www.gimp.org/ В основному це схоже на Photoshop і це безкоштовно.
Через чіткість розділу тут неможливо проаналізувати програми, тому ми покажемо лише щось простіше і практичніше.
IrfanView
Ви можете завантажити цю програму за адресою: https://www.irfanview.com/
У цій програмі ви можете легко редагувати кілька зображень в одному каталозі. Це означає, що ми не будемо вручну редагувати зображення по одному, але ми встановимо правила, щоб програма автоматично регулювала їх для всіх вибраних зображень.
Спочатку ми поміщаємо зображення, які ми хочемо відредагувати, в один каталог на ПК і готуємо там новий маленький каталог (малюнок №1).
Малюнок No 1 - Підготовка каталогу для зображень.
Відкрийте будь-яке зображення, яке з’явиться в IrfanView, натисніть клавішу B - або виберіть у меню Файл - Пакетне перетворення/Перейменування (малюнок №2).
Малюнок No 2 - Налаштування пакетного перетворення.
Потім ми встановлюємо речі згідно картини №. 3:
Малюнок No 3 - Індивідуальні етапи пакетного перетворення.
Пункт 1 - вибираємо пакетне перетворення та перейменування файлів.
Пункт 2 - позначте файли у вказаному каталозі
Пункт 3 - натисніть на Додати все, він автоматично додасть файли до списку.
Пункт 4 - натисканням на кнопку Параметри ми встановлюємо налаштування пакетного перейменування - та шаблон імені
Згідно з малюнком 4, ми встановлюємо шаблон $ N_sm, що означає, що зменшений файл називається своїм початковим ім'ям і доповнюється "_sm". Важливо зберегти його оригінальну назву, якщо вона залишиться такою. Звичайно, ви можете назвати це по-іншому.
Малюнок No 4 - Перейменування зображень.
Тоді ми встановлюємо вихідний формат та jpg. Клацніть на кнопку Варіанти, Ви можете змінити якість отриманого зображення у відсотках (рис. 5). Ми можемо залишити 100% на початку, ми б дали менше, якщо це генерує все ще великі зображення.
Малюнок No 5 - Встановлення вихідного формату.
Клацніть на кнопку Розширені налаштування та виберіть метод зменшення розмірів (рис. 6). Розмір можна змінювати як у відсотках, так і в пікселях (см або дюйми). У цьому прикладі ми змінюємо розмір до максимального розміру 900 × 900 пікселів. Ми також можемо регулювати значення роздільної здатності зображення - dpi. Для веб-сайту достатньо розміру DPI 72. Нарешті, ми підтверджуємо це натисканням кнопки OK.
Малюнок No 6 - Налаштування розміру зображення.
Ще раз перевіримо шлях до каталогу з меншими фотографіями. Клацніть на Використовувати точний вигляд у каталозі - він завантажить каталог, в якому ми маємо ці фотографії, клацніть на Огляд і виберіть заздалегідь підготовлений каталог для виведення невеликих зображень (рис. 3, пункт 5).
Крім того, ви також можете пограти з налаштуваннями та встановити прапорець із зображення 5 Установити розмір файлу 65,00 КБ (RIOT). Це також зменшить розмір зображень більше в Інтернеті. Вам потрібно перевірити, скільки потрібно змінити, щоб зображення були досить великими в пікселях і досить малими в кБ.
Коли все налаштовано, ми підтверджуємо весь процес, натискаючи кнопку Почати пакетний пакет.
На малюнку № 7 тоді ми бачимо, що фотографії складають близько 100 кБ. Таким чином вони можуть перейти в Інтернет.
Малюнок No 7 - Змінені зображення.
На закінчення я хочу підкреслити, що розміру більшої сторінки приблизно 1000 пікселів достатньо для звичайних зображень в Інтернеті. Ми залишаємо розмір приблизно 1900px в ширину для слайд-шоу на всій площі.
Ви також можете зробити дуже прості коригування типу обрізання та зміни розміру в програмі Paint у Windows. Але ви більше не можете грати з налаштуваннями якості dpi тощо. Але цього достатньо для кількох знімків.
3) Опис зображень
Зателефонуйте на картинки в заголовок, альт a опис Як тільки вони завантажують їх у мультимедіа в Інтернеті - це добре для пошукових систем з точки зору SEO.
Заголовок - це назва зображення, alt - це опис, який робот бачить, коли справа доходить до Інтернету, а опис відображається, коли ви бачите зображення у збільшеному вікні після натискання на нього (це, але також залежить від шаблону або галерея використовується).
У той же час уявіть, як ваш сайт читає сліпий а його комп'ютерна машина читає описи зображень. Як ви думаєте, що ви будете знати, що на малюнку, коли його ім'я DSC1234.jpg або коли воно називається bilje-on-recipe.jpg?
Запишіть Alt, заголовок та опис як текст, тобто з наголосами. Але назви малюнків у іменування файлів писати без діакритики та пробілів, використовуйте лише алфавітні символи, цифри, підкреслення або дефіси.
Не використовуйте одночасно довгі імена (не повинен містити більше 30 символів). Може виникнути проблема переміщення файлів із довгим ім’ям.
Порада для вас: Somstrasnedlhynazov-obrazku-kterýynevie-kedysamaskoncit-acimaestepokracovat-niejeozajuplnefajn-napad.jpg.
Слід встановити підписи до зображень зараз при записі, оскільки в цьому випадку "пізніше" засоби "ніколи".
4) Оптимізуйте зображення безпосередньо в Інтернеті
Якщо у вас вже є зображення, завантажені в Інтернет, ви також можете оптимізувати їх за допомогою плагіна Compress JPEG & PNG images (https://wordpress.org/plugins/tiny-compress-images/)
Однак вам потрібно мати обліковий запис на їх веб-сайті (https://tinypng.com) і пов’язати його з плагіном на вашому веб-сайті.
Якщо вас турбує вхід, можна використовувати плагін Smush, який працює без входу в систему. (https://wordpress.org/plugins/resmushit-image-optimizer/)
Виберіть лише один із запропонованих плагінів. Немає сенсу мати різні плагіни в Інтернеті для однієї операції. Знову ж таки, принцип полягає в тому, що чим більше їх і чим менше плагінів, тим краще.
Сьогодні ми не будемо описувати тему налаштування цих плагінів. Я вірю, що буду поступово обробляти необхідну інформацію, також на основі Ваших коментарів та зауважень, тут або у своїй групі у Facebook.
5) Розміри зображення - обрізання мініатюр у wordpress
Різні шаблони мають різний розмір зображення. Він взагалі не стандартизований, тому кожен дизайнер та розробник може вирішити, які розміри зображень використовуватимуться у шаблонах. У той же час існує 2 способи їх обрізки, один, коли його жорстко вирізають до точного розміру, а інший, де він зменшується лише відповідно до більшої сторони до бажаного розміру попереднього перегляду.
Однак жоден із цих методів не може дати абсолютно приємних поглядів, як нам потрібно. Тому існують плагіни, які можуть допомогти користувачеві в редагуванні ескізів.
Один з них - плагін Кадрування-мініатюри (https://en.wordpress.org/plugins/crop-thumbnails/)
У цьому модулі ви можете встановити та, можливо, вручну обрізати окремі типи використаних зображень за потреби. Не завжди потрібно обрізати всі типи розмірів. Все, що вам потрібно зробити, це вибрати виріз лише під той розмір, який вам не підходить на сторінці.
Малюнок No 8 - Плагін Crop-Thumbnails та налаштування зображення безпосередньо у wordpress.
Це можна зробити безпосередньо в статті, натиснувши кнопку Обрізати Вибране зображення. Якщо ви перебуваєте у списку мультимедіа, ви можете також зробити це для кожного зображення окремо (рис. 8). З'явиться вікно з вибором, який тип розміру ви хочете змінити (Рисунок 9). Вибравши його, ви зможете редагувати розмір праворуч. Потім ви вибираєте відповідну частину зображення для обрізання. Клацніть для підтвердження цієї операції Зберегти урожай і нарешті, оновіть статтю.
Малюнок No 9 - Плагін Crop-Thumbnails - обрізати зображення
Для того, щоб зміна набрала чинності, необхідно відобразити веб-сайт, що використовується Ctrl + F5. У більш складних випадках необхідно очистити кеш за допомогою кнопок Ctrl + Shift + Del а також очистити кеш.
6) Галереї в wordpress
Галереї добре обробляти через Imagely https://www.imagely.com/ - базова версія - це безкоштовний плагін на веб-сайті https://wordpress.org/plugins/nextgen-gallery. Або сміливо використовуйте інший плагін галереї.
Питання зображень дуже широке. Ми не встигли торкнутися таких питань, як: як додати зображення в редактор, як додати посилання для збільшення окремого зображення, як створити галереї за допомогою мультимедіа wordpress або окремо відповідно до каталогів, наприклад через галерею Nextgen плагін, як створити ефект лайтбокса стосується лише окремого зображення тощо ...
Я буду обговорювати ці теми в блозі.
У наступних статтях я готую рішення для поширених проблем, таких як: як працювати з ftp, що робити, якщо на веб-сайті порожній екран або фатальна помилка тощо. Як варіант, не соромтеся надсилати мені те, що вас цікавить, і я із задоволенням відповім.