Як використовувати фотографії на сайті
У народі кажуть: «Текст без картинок – ознака дурня». У попередній частині матеріалу про використання фотографій та зображень на сайті ми розповіли, де їх знайти, та які формати використовувати в інтернеті. У цій статті ви дізнаєтеся, якими повинні бути розміри картинок для Інтернету, як відредагувати фото та як оптимізувати картинки для пошукових систем.
До картинок, які ви використовуєте при створенні сайтів, існує й ряд технічних вимог. Найважливішими з них є формат і обсяг файлу, розмір і якість зображення.
Кожен графічний файл має розмір (ширину та висоту в пікселях) та обсяг файлу (вимірюваний у байтах). Для зручності ми називатимемо перший параметр «розміром», а другий «вагою» зображення.
Стандартна ширина області вмісту веб-сторінки становить до 984 пікселів (залежить від ширини монітора на пристрої перегляду), тому рекомендується для публікацій обрізати або зменшувати великі зображення приблизно до 600-800 пікселів завширшки.
Розміщення занадто великих файлів зображень може призвести до збільшення швидкості завантаження сторінки. У цьому випадку на сторінці з'явиться текст, а замість зображень будуть порожні місця, що створить враження неякісного сайту. Також це негативно позначиться на швидкодії самої сторінки: доки картинки не довантажаться повністю, будь-які дії (прокручування сторінки, клікабельність кнопок, заповнення полів) будуть "пригальмовувати".
Зображення з цифрових камер або бібліотек фотографій можуть бути дуже великими як за розміром (до 4 000 пікселів завширшки), так і за вагою (від 2Мб до 10Мб).
Цих проблем можна уникнути, якщо заздалегідь підготувати зображення до завантаження на сайт. Підготовка зображень передбачає їх зменшеннярозміру та ваги. Правильно зменшена картинка може виглядати так само добре, як і якісний вихідний код, але не уповільнювати відображення сторінки.
Як визначити розмір та вагу
Щоб визначити розмір і вагу зображення, достатньо навести на нього мишу у файловому менеджері або клацнути правою кнопкою миші, вибрати "Властивості - Детально" . Наприклад, на зображенні нижче зображення має розмір 1024х768 пікселів і вага 873 Кб.
Розмір також можна дізнатися, натиснувши на іконці файлу правою клавішею миші і вибравши з меню функцію «Властивості».
Якщо ви плануєте повноекранне відображення ваших картинок і фото, тоді ви можете використовувати зображення шириною 1024 пікселя і навіть більше.
Крім того, є спеціальні інструменти для оптимізації зображень перед публікацією їх на сайті, наприклад FastStone або PIXresizer для Windows. Обидві програми безкоштовні.
Але і 200 Кб - це занадто велика вага для картинки на сайті. Його можна зменшити, стиснувши зображення у два, і навіть у чотири рази, без втрати якості. Для цього можна використовувати конвертери зображень, наприклад, Irfanview або Imagemagick. Можна, звісно, скористатися і фотошопом. Після редагування зображення достатньо зберегти його як таке, що дозволяє публікацію в інтернеті. Для цього в меню Файл потрібно вибрати функцію Зберегти для Web. ».
Крім того, є спеціальні інструменти для оптимізації зображень перед публікацією їх у блозі або на сайті.
Редактор зображень Irfanview
Редактор пропонує широкий спектр інструментів для роботи із зображеннями: обрізати, повернути або відобразити (горизонтально/вертикально), налаштувати кольори, змінити яскравість та контраст, додати текст аборамку, прозорість, чіткість, розмитість, змінити пропорції картинки, додати водяний знак та багато іншого.
Наприклад, змінимо пропоноване зображення, перетворивши його чорно-біле. Для цього на меню «Image» виберемо функцію «Convert to Grayscale».
А тепер додамо рамку, вибравши в тому ж таки меню функцію «Add border/frame». Із запропонованого набору вибираємо тип рамки і в діалоговому вікні, що з'явилося, налаштовуємо її.
Ось що в нас вийшло:
Залишилось зберегти результат роботи на комп'ютері. При цьому програма пропонує зберегти файл у заданій якості і навіть обмежити його розмір. У меню "File" вибираємо вкладку "Save as ...", вказуємо шлях збереження і в додатковому вікні - спеціальні можливості - якість та розмір.
Початковий обсяг файлу був 111 Кб. Внаслідок перетворень його розмір скоротився до 25 Кб.
Це простий та зручний інструмент для оптимізації зображень перед їхньою публікацією на сайті. Він дозволяє зробити всі необхідні перетворення картинки: обрізати, змінити розмір, повернути, додати різні ефекти. Крім того, до зображення можна додати рамку, текст, змінити колірну гаму, яскравість і контраст.
Ось як виглядатиме фотографія, яку ми взяли як приклад, з використанням ефекту під назвою «Мрії».
Іноді зображення достатньо лише зменшити у розмірах. Для цього існують спеціальні сервіси стиснення компресори.
Онлайн-компресор зображень Optimizilla
Онлайн-компресор зображень JPEGmini
Цей сервіс здатний зменшити розмір зображення до 5 разів при збереженні якості. У наведеному прикладі вихідне зображення було стисло зі 137 Кб до 98 Кб - тобто в 1,4 рази. У робочому вікні сервісу, де видно картинку до та після стиснення, наочно показані результати його роботи – ви можете побачити, що результат роботи сервісу дійсно не змінює якість зображення.
Онлайн-компресор зображень PunyPng
Це хороший безкоштовний сервіс, який чудово підійде для обробки зображень для сайтів. Він призначений для стиснення файлів JPG, GIF, PNG-форматів і дозволяє завантажити до 20 файлів максимальним об'ємом до 500 Кб кожен. Оброблені зображення можна завантажити як архів.
Онлайн-компресор зображень TinyPNG
TinyPNG за своїми функціями аналогічний до попереднього сервісу. Його відмінність у тому, що він дозволяє завантажувати до 20 файлів форматів JPG і PNG, обсяг кожного їх повинен перевищувати 5 Мб. Результати роботи можна завантажити архівом або зберегти в DropBox.
Якщо вам доводиться працювати з картинками в офлайні, тоді краще використовувати програми для настільних комп'ютерів, наприклад FastStone або PIXresizer для Windows. Обидві програми безкоштовні.
Як оптимізувати фото для пошуку?
Зображення, як і інші елементи сайту впливають на позиції у видачі пошукових систем. Щоб малюнки та фотографії працювали на вас, достатньо виконувати кілька нескладних дій при додаванні новихзображень на сайті.
Правильно називайте файли зображень
Заповнюйте alt та title зображення
Правильно заповнені alt і title зображення позитивно позначаться на SEO-оптимізації та дозволять потрапити зображенням з вашого сайту у видачу пошукових систем за картинками. Розберемося якнайшвидше, що є що.
Alt - це альтернативний опис того, що зображено на зображенні. Якщо при завантаженні сторінки у користувача виникнуть неполадки з інтернетом і сторінка завантажиться не вся, на місці зображень буде текст, який ви задали в alt.
Title - додатковий опис фотографії. Воно з'являється при наведенні курсору мишки на зображення і докладніше пояснює, що відбувається.
Ось невелика підказка, як заповнити alt та title на сайті, створеному на сервісі 1С-UMI.
Крок 1. Перейдіть до режиму редагування сайту (натиснувши F2 або вкладку на панелі керування вгорі сторінки).
Клацніть мишкою в полі з текстом та натисніть кнопку «Вставити зображення».
Крок 2. Виберіть завантажене зображення або завантажте нове.
Крок 3. Пропишіть alt.
Натисніть правою кнопкою миші на завантажене зображення та виберіть "Вставити зображення".
У вікні, введіть опис зображення. Це буде alt зображення. Краще обмежитися 2-3 словами, що точно описують, що на картинці, оскільки пошукові системи враховують 50-60 символів.
Крок 4. Пропишіть title.
Заповнювати title не так важливо, як alt, але зайвим не буде. На перший погляд, здається, що це складніше, але зробивши один раз, далі ви легко зможете це повторити. А якщо що, то завжди можна повернутися до нашої інструкції!
УВ режимі редагування відкрийте «вихідний код» області, натиснувши на відповідну кнопку:
Знайдіть рядок, який відповідає за картинку. Вона виглядатиме приблизно так: .
У цей рядок потрібно ввести вручну текст title=”опис зображення”. У лапки слід укласти текст, який описує, що зображено на фото, до якого ви прописуєте title.
У прикладі виходить так: .
Натисніть кнопку «Ок» і не забудьте зберегти всі зміни. Готово!