Як поліпшити зображення в WordPress

Як поліпшити зображення в WordPress


Минуло давно, коли зображення були чимось занадто великим, щоб завантажуватись через Інтернет. Сьогодні веб-сайти не можуть існувати без них. Незважаючи на те, що швидкість Інтернету різко зросла з роками, важливо дбати про фотографії в своєму блозі.

Тільки тому, що завантажувати зображення на ваш сайт легко, це не означає, що ви повинні робити це без будь-якої підготовки. Неоптимізовані зображення можуть насправді нашкодити вашому сайту; від впливу на те, як відвідувачі думають про вас, до швидкості вашого веб-сайту та рейтингів SEO. Якщо ви ще не думали про це, ми тут, щоб показати вам кілька способів покращення зображень у WordPress.

У цьому посібнику ми збираємось показати вам:

  • Як оптимізувати зображення для WordPress, щоб пришвидшити ваш сайт та покращити SEO
  • Змініть спосіб стиснення WordPress зображень JPEG
  • Найпопулярніші плагіни для оптимізації зображень для WordPress
  • Додайте ледаче завантаження для своїх відео та зображень
  • Відображати зображення до і після привабливо
  • Як створювати інтерактивні зображення – малюйте, додайте описи та посилання
  • Як відновити додаткові розміри зображень
  • Видаліть атрибути зображення ширини та висоти за допомогою jQuery
  • Як створити власні розміри зображень у програмі Media Uploader
  • Створіть автоматичний скріншот будь-якого веб-сайту та опублікуйте його як зображення у своєму дописі

Contents

Як оптимізувати зображення для WordPress, щоб ви прискорили свій сайт та покращили SEO

Чому слід оптимізувати зображення для WordPress? Якщо ви докладете зусиль, ви можете очікувати наступного:

  • Швидше сайт
  • Краще SEO
  • Менші резервні копії
  • Менше використання пропускної здатності
  • Користувачі більш щасливі

Також слід знати, що існують різні етапи, на яких можна оптимізувати зображення. Ви можете піклуватися про фотографії ще до того, як завантажуєте їх у блог, або можете це робити після завантаження.

Швидко тестуйте зображення на своєму сайті

Перш ніж почати працювати над оптимізацією, ви можете швидко перевірити свій сайт на швидкість та ефективність. Використовуючи будь-який інструмент зі списку, ви швидко дізнаєтесь, у якій формі розташовані зображення на вашому сайті.

Ми любимо використовувати GTmetrix що навіть покаже точні зображення, через які ваш сайт завантажується повільніше.

Оптимізуйте зображення для WordPress перед завантаженням

Під час ведення блогів більшість людей не вживають усіх необхідних заходів для оптимізації своїх зображень. Зазвичай люди просто фотографують зі своєї камери чи смартфона, завантажують її з Інтернету або створюють за допомогою комп’ютерного програмного забезпечення.

Вони не думають ні про формати, ні про розміри зображень, ані про назви файлів. Якщо картинка виглядає добре, вони просто припускають, що вона готова до Інтернету. Якщо ви не перевіряєте свої зображення, ви рухаєтесь до катастрофи.

Змініть розмір зображень

Змініть розмір зображень

Не завантажуйте зображення на веб-сайт WordPress, перш ніж перевіряти ширину та висоту кожного зображення. Наприклад, якщо ви показуєте зображення з максимальною швидкістю 700 пікселів, завантажувати більш широку картину немає потреби. Якщо ви зробите це, у вас буде більший файл, який зробить ваш сайт повільнішим, тоді як вихід буде таким же. WordPress створить додатковий розмір, але це не привід не готувати зображення до завантаження.

Змінення розміру зображень швидко та просто. Існує багато безкоштовних інструментів, таких як Microsoft Paint, які допоможуть вам у цьому. Ви навіть можете знайти безкоштовні онлайн-інструменти для зміни розміру зображень на кшталт Легкий розмір.

Розміри зображення залежать від теми до теми. Якщо ви не впевнені, яку саме з них вам слід використати, ознайомтеся детальніше з вашою темою WordPress та огляньте зображення, знайдіть документацію або зверніться до служби підтримки.

Зміна якості

Після зміни розмірів слід розглянути можливість зміни якості зображень. Залежно від програмного забезпечення існують різні способи зміни якості зображень. Наприклад, завжди популярний Photoshop дозволяє зберігати зображення в Інтернеті. Ця опція дозволить вам зберігати зображення нижчої якості, але вони будуть оптимізовані для вашого сайту.

Крім того, якщо ви вирішите зберегти зображення як JPEG, Photoshop попросить вас вибрати рівень якості. У цьому випадку зниження якості з 12 до 8 різко зменшить розмір зображення, тоді як різниця в якості не буде такою великою.

Якщо ви все ще не використовуєте жодного програмного забезпечення для зміни якості своїх фотографій, ви можете спробувати безкоштовно в Інтернеті Крихітні PNG інструмент. Просто завантажте зображення і подивіться, яку різницю він може змінити.

Виберіть правильний формат

Навіть після зміни розміру та якості слід розглянути можливість зміни формату. Для початку, лише вибравши потрібний формат, ви можете зняти кілька кілобайт з зображення, якщо не більше.

Формати зображень

Загальне правило дуже просте. Якщо у вас є фотографія, зробіть її JPEG. Якщо у вас є логотип, векторне зображення або дуже проста графіка, створена на комп’ютері, перейдіть за допомогою PNG. Якщо у вас дійсно невелике зображення без градієнтів або ви хочете показати просту анімацію, як показана вище, ви можете використовувати GIF. Як правило, зображень у форматі PNG буде значно більше, ніж у форматі JPEG, і ви можете отримати користь від зміни формату.

У багатьох випадках переформатування зображень не призведе до значних відмінностей у якості, хоча можна розраховувати на різницю в розмірах. Наступного разу перед завантаженням фотографії PNG, сфотографуйте та спробуйте зберегти її як JPEG, щоб побачити різницю. Для отримання більш детального пояснення, будь ласка, ознайомтесь із різниця між PNG, JPEG, GIF та SVG.

Подбайте про назви файлів

Хоча ім’я файлу може звучати неважливо, це насправді, що ви повинні дуже знати. Ім’я вашого файлу зображень містить цінну інформацію для SEO. Якщо ви хочете, щоб інші могли знайти ваше зображення в Google та інших пошукових системах, вам слід надати йому належне ім’я.

Ми пропонуємо вам називати зображення без використання пробілів. Не забудьте включити ключові слова, якщо ви хочете, щоб сторінка та зображення були рейтинговими. Наприклад, якщо ви завантажуєте зображення Ferrari California, назва файлу має бути “ferrari-california.jpg.” Якщо ви використовуєте плагін SEO для WordPress, ви вже знаєте, що він перевіряє ваші альти-теги на ключові слова. Так, насправді це важливо мати правильне ім’я зображення.

Оптимізуйте зображення для WordPress після завантаження

Підготувавши зображення на комп’ютері, можна продовжити завантаження. Сподіваємось, ваші зображення мають саме потрібний розмір та якість. Ви переконалися, що формат та ім’я файлу правильні. Після завантаження WordPress попросить вас отримати додаткову інформацію. Не пропускайте метаінформацію; заповніть інформацію про свої зображення, щоб ви могли легко їх упорядкувати та підготувати до SEO.

Заголовок, опис, текст alt та підпис

Дбаючи про технічні характеристики, ви не повинні забувати про SEO. Завжди додайте назву та опис до своїх носіїв інформації. Це допоможе вам у управлінні медіа WordPress, а також працюватиме над покращенням SEO. Також не забудьте тег alt, який відображатиметься для відвідувачів, які не можуть правильно переглянути ваше зображення. Це не тільки стане корисним для ваших користувачів, але й допоможе вам у SEO. Ваша сторінка стане кращою, і користувачі зможуть легше знайти ваші нові зображення.

Хоча вам не знадобляться підписи постійно, обов’язково додайте їх для зображень, які потребують додаткових пояснень (наприклад, знімки екрана).

Редагуйте зображення за допомогою WordPress

Якщо ви усвідомлюєте, що зображення все ще потребує подальшого редагування, ви повинні знати, що WordPress дозволяє це робити навіть після завантаження файлу. Змініть зображення обертання, обрізання та масштабування ви вже завантажили Ви можете навіть редагувати мініатюру або всі інші розміри. Народний редактор WordPress дуже простий, але ви можете економити час від часу.

Відновіть усі мініатюри

Більшість попередніх методів допоможуть вам у створенні нових файлів зображень, які ви ще збираєтеся завантажити. Але що робити, якщо у вас на сайті WordPress вже завантажені сотні, якщо не тисячі файлів? Не хвилюйся; ви все одно можете оптимізувати ці зображення та змінити їх розміри.

Для швидкого виправлення вас може зацікавити безкоштовний плагін Regenerate Thumbnails, який використовувався більше мільйона користувачів. Якщо ви хочете отримати більший контроль над зображеннями, слід ознайомитись з найкращими плагінами WordPress для оптимізації зображень, які ми збираємось показати вам у наступних рядках цієї статті.

Як відновити додаткові розміри зображень

Використовуйте плагіни WordPress

Звичайно, є десятки плагінів WordPress, які допоможуть вам оптимізувати зображення на вашому сайті. Прокрутіть униз, щоб побачити найкращі плагіни WordPress для оптимізації зображень.

Коли потрібно, завантажуйте зображення

Іноді якість знімків буде набагато важливішою, ніж їх розмір. В основному це стосується фотографів, які хочуть, щоб їх фотографії були першокласними. Вони не можуть ризикувати зменшенням розміру або якості файлів. Однак це не означає, що слід забувати про оптимізацію. Для оптимізації зображень для WordPress в цьому випадку слід врахувати ледачу завантаження.

Ледаче навантаження – це техніка, яка завантажує зображення лише тоді, коли користувачі їх потребують (прокрутіть до них). Наприклад, якщо ви завантажили двадцять високоякісних фотографій в одну статтю, вони надзвичайно сповільнить ваш сайт. Але якщо ви ледаче завантажуєте зображення, стаття буде блискавично, а фотографії завантажуватимуться лише в разі потреби – у той момент, коли користувач потрапить до них.

Майте чуйні зображення

Хоча більшість тем WordPress чуйні, це не означає, що і ваші зображення також чуйні. Оскільки ви не хочете, щоб велике зображення завантажувалося на маленький екран, вам потрібно буде зареєструвати додаткові розміри зображень для свого сайту. Якщо ваша тема не використовує чуйні зображення, подумайте про те, як найняти професіонала для роботи – це не так просто, як це може здатися.

Оптимізуйте зображення для соціальних мереж

Якщо ви хочете переконатися, що ваші зображення добре виглядають у соціальних мережах, вам доведеться зробити додатковий крок та оптимізувати метатеги та розмітку схеми.

Якщо ви використовуєте плагін SEO, наприклад Yoast, не забудьте перевірити налаштування. Наприклад, Yoast дозволить вам налаштувати кілька речей, пов’язаних із соціальними медіа. Отже, перейдіть до SEO -> Social і введіть інформацію у Facebook, Twitter, Google+ та Pinterest.

Якщо ви хочете більше і хочете оптимізувати зображення для додаткових веб-сайтів у соціальних мережах, ознайомтесь WPSSO – Точна мета-теги + Розмітка схеми для оптимізації соціального обміну та плагінів SEO.

Змініть спосіб стиснення WordPress зображень JPEG

Якщо ви завантажуєте купу зображень JPEG на свій веб-сайт WordPress, можливо, ви помітили, що вони втрачають свою первісну якість. Якщо ви задумалися, чи винен WordPress, тепер ви отримаєте свою відповідь – так, це так!

Після завантаження зображення у форматі JPEG, WordPress автоматично змінює стиснення і вирішує, що ви хочете, щоб зображення втрачало якість. Щоб бути більш конкретним, WP використовує 90% стиснення ваших JPGE. Це чудово, якщо ваші зображення використовуються лише як ескізи допису або показуються у публікації, але якщо ви завантажуєте свої фотографії, ви хочете, щоб вони були якнайкраще, правда?

На щастя, вам знадобиться лише один рядок коду, щоб змінити це.

Зупинення стиснення зображень JPEG:

Якщо ви не хочете стискати зображення у форматі JPEG, просто скопіюйте та вставте наступний код у файл function.php:

add_filter ('jpeg_quality', функція ($ arg) {return 100;});

Не забудьте зберегти зміни, і ви готові завантажувати нові зображення.

З іншого боку, образи можуть бути для вас не такими великими. Таким чином, ви можете захотіти їх ще більше стиснути і заощадити час на завантаження вашого сайту. Якщо ви зміните останнє число у цьому рядку коду, ви зміните якість нещодавно завантажених зображень.

Ще більше стискайте зображення JPEG:

Чим менше число, тим більше зображень буде стиснено. Наприклад, щоб ще більше стиснути ці JPEG, вам знадобиться цей код:

add_filter ('jpeg_quality', функція ($ arg) {return 80;});

Не забувайте; рівень стиснення за замовчуванням – 90.

Важливо: Це вплине лише на зображення, які ви завантажуєте після того, як ви вставили код у function.php. Щоб змінити розмір і якість зображень, які ви вже маєте в бібліотеці, вам знадобиться плагін. Подивіться, як відновити додаткові розміри зображення.

Найпопулярніші плагіни для оптимізації зображень для WordPress

На початку цієї статті ми говорили про те, як оптимізувати зображення для WordPress, щоб ви прискорили свій сайт та покращили SEO. Як ви могли бачити, ви можете використовувати кілька різних методів. Важливо подбати про зображення ще до того, як ви завантажуєте їх у свій блог. Але коли фотографії вже розміщені на сайті, можливо, повторно оптимізувати кожне зображення окремо, а потім завантажити їх ще раз.

Не хвилюйся; ніхто не очікує, що ви зробите це в першу чергу. Будьте з нами протягом наступних хвилин, коли ми збираємось показати вам найпопулярніші плагіни для оптимізації зображень для WordPress.

Для оптимізації зображень вам доведеться просто вибрати плагін зі списку. Вам доведеться налаштувати його та вибрати те, що плагін зробить для вас. Після цього ви зможете розслабитися та делегувати роботу на свій плагін, тоді як ви можете розпочати організацію своїх медіа-файлів.

Наступні плагіни допоможуть вам стиснути зображення на будь-якому веб-сайті WordPress. Вони зроблять завантаження сайту швидшим і в кінцевому підсумку допоможуть вам покращити SEO.

WP Smush

ЦІНА: Безкоштовно

Маючи понад 700 000 активних установок, WP Smush повинен бути одним з найкращих плагінів оптимізації зображень для WordPress. Він може швидко оптимізувати зображення, використовуючи різні методи стиснення. Чудова річ у стисканні зображень за допомогою програми WP Smush – це те, що зображення не втратять на якості. Ви нам не вірите? Перевірте плагін.

Коли ми говорили про підготовку зображень для WordPress, ми згадували, що зміна розміру є важливою частиною процесу оптимізації. З цим плагіном вам не доведеться турбуватися про це, оскільки WP Smush дозволяє встановлювати максимальні розміри. Після цього всі великі зображення автоматично зменшуватимуться, перш ніж додавати їх у бібліотеку.

Цей фантастичний плагін може працювати з файлами JPEG, GIF та PNG. Він працює з усіма вашими каталогами, автоматично піклується про вкладені файли і навіть працює на багатосайтових сайтах. Ви можете вручну працювати над кожним зображенням або редагувати п’ятдесят з них масово. Якщо ви хочете ще кращих результатів та більше варіантів, перегляньте WP Smush PRO.

EWWW Оптимізатор зображень

ЦІНА: Безкоштовно

За кумедною назвою стоїть один із найпопулярніших плагінів для оптимізації зображень для WordPress. Як і раніше згадуваний, оптимізатор зображень EWWW може стискати ваші зображення, не впливаючи на їх якість. Коли ви задумаєтесь про те, що плагін може пришвидшити ваш сайт за лічені секунди, ви вже будете на шляху завантаження. Після цього ви зможете оптимізувати зображення масово, а галереї, такі як GRAND FlaGallery, NextCellent та NextGEN, навіть отримають власні сторінки масової оптимізації..

Усі зображення, які використовують клас WP_Image_Editor в WordPress, будуть автоматично оптимізований, тоді як ви можете вручну працювати магією над усіма іншими. Нам подобається, що ви можете вибрати папки, які ви хочете оптимізувати. Щоб отримати детальнішу інформацію про це та які плагіни використовують клас, будь ласка, відкрийте офіційну інформацію Сторінка оптимізатора зображень EWWW у сховищі WordPress.

Стискайте зображення JPEG та PNG

ЦІНА: Безкоштовно

Крихітні стискають зображення

Якщо мила маленька панда з логотипом WordPress не означає, що ви хочете дізнатися більше про цей плагін, ми не знаємо, що буде. І якщо панда виглядає звично, це тому, що саме те саме допомагає вам стискати зображення на веб-сайті TinyPNG. Так, здається, тварина є більш універсальним, ніж ми думали спочатку. Але зосередимось на плагіні.

Якщо ви перейдете з цим плагіном, Panda автоматично оптимізує ваші зображення. Щоразу, коли ви завантажуєте новий, плагін перейме на себе та зробить свою роботу. Тим не менш, ви можете оптимізувати окремі фотографії або зробити це оптом, просто перейшовши до медіатеки.

Стиснення зображень JPEG та PNG навіть підтримує анімовані PNG, прекрасно працює на багатосайтовій платформі, це сумісний з WooComerce і не матиме проблем із WP Offload S3.

Чудова річ у плагіні полягає в тому, що він дозволяє встановлювати максимальні атрибути ширини та висоти для всіх зображень. Якщо ви турбуєтесь про те, що це зробить метадані, не хвилюйтеся; панда збереже всю інформацію недоторканою.

Обмежень розміру файлів немає, ви можете встановити віджет приладної панелі, і він навіть працює з мобільним додатком WordPress. Оскільки в усьому цьому, зображення Compress JPEG і PNG мають понад 100 000 активних встановлень і заслуговують на місце у списку найкращих плагінів для оптимізації зображень для WordPress.

Безсмертність

ЦІНА: Безкоштовно

Безсмертність

Хоча зображення обкладинки для цього плагіна може вас відлякати, зачекайте секунду та ознайомтеся з усіма особливостями Imsanity. О, навіть назва плагіна звучить шалено, правда? Як тільки ви все з іменем плагіна, ви побачите, що він може запропонувати багато.

Imsanity може автоматично масштабувати зображення, дозволяє встановлювати максимальні розміри, і навіть він має опцію масового розміру. Це важливо, якщо у вашому блозі вже є сотні знімків, які потребують оптимізації.

Цей безкоштовний плагін – це чудовий варіант, якщо ви не хочете багато боротися з налаштуваннями плагіна. Все, що потрібно – це встановити та активувати Imsanity, встановити кілька варіантів, і ви можете забути про це; він керує власним шляхом до оптимізації зображення.

Нам сподобався варіант, який дозволяє конвертувати BMP-зображення в JPG. На всякий випадок, якщо у вас багато файлів BMP, які ви помилково завантажили якийсь час тому, це буде рятівником.

Оптимізатор зображень ShortPixel

ЦІНА: Безкоштовно

Оптимізатор зображень ShortPixel

Маючи понад 30 000 активних встановлень, ShortPixel Image все ще є одним з найпопулярніших плагінів оптимізації зображень для WordPress. Плагін укомплектований функціями, і він стане обов’язковим для сайтів, які мають багато зображень для оптимізації.

Оптимізатор зображень ShortPixel не лише оптимізує документи JPG, PNG, GIF та PDF для вас, але й дозволить вам конвертувати будь-які зображення JPEG, PNG або GIF у WebP. Плагін добре працює з іншими плагінами галереї, і це не важливо, якщо ваш сайт використовує HTTP або HTTPS. Це дозволить вам видалити EXIF ​​дані із зображень (те, що фотографи люблять мати).

Плагін розпізнає зображення, які він уже оптимізував, тому він буде пропускати їх при необхідності. Ви можете дозволити або заборонити автоматичну оптимізацію, і зробите багато, набагато більше з цим фантастичним плагіном. Перегляньте офіційну сторінку в сховищі, щоб побачити всі функції.

Optimus – оптимізатор зображень WordPress

ЦІНА: Безкоштовно

Оптимус

Як і раніше згаданий плагін, Optimus оптимізує ваші зображення під WordPress, і це зробить, не впливаючи на якість ваших знімків. Ви можете дозволити плагіну автоматично розбирати речі, а ви можете вимкнути опцію та оптимізувати зображення лише за потреби.

Optimus працює на багатосайтових сайтах, це не дивно для веб-сайтів електронної комерції WordPress, і він повністю оптимізований для мобільних додатків WordPress та Windows Live Writer. Це пришвидшить ваш сайт, без того, щоб торкатися рядка коду. Плагін пропонує набагато більше, але вам доведеться включити преміум-версію. Щоб дізнатися більше, перейдіть на офіційну сторінку сховища плагінів WordPress.

Додайте ледаче завантаження своїх відео та зображень у WordPress

Як тільки ви почнете додавати на свій веб-сайт багато відео та графічних матеріалів, очевидно, що воно почне завантажуватися повільніше. Незалежно від того, звідки вони беруться, відео та великі зображення виконуватимуть велику вагу на вашому веб-сайті та змусять відвідувачів чекати набагато довше, ніж потрібно для завантаження всього вмісту. З WordPress це не повинно бути великою справою, і ось як ви можете легко виправити ситуацію.

Якщо ви знаєте свій шлях навколо PHP, є чудова стаття про додавання ледачого завантаження для зображень та нескінченного прокрутки, написаного нашими колегами на Елегантні теми.

Якщо ні, то в наступних рядках ми згадаємо про деякі найпопулярніші плагіни для ледачих завантажень, які будуть зробіть швидше завантаження вашого сайту. І вам навіть не доведеться багато чого робити, крім того, щоб встановити плагін і налаштувати його в кілька швидких кроків.

Ледаче завантаження для відео

ЦІНА: безкоштовно

Ледаче завантаження для відео

Якщо у вас багато відео з Youtube і Vimeo, варто розглянути можливість встановлення цього плагіна. Після налаштування плагін розмістить зображення на вашому відео, і через це ваш веб-сайт завантажиться набагато швидше. Як тільки відвідувач прокручує відео, це зображення буде показане кнопкою «відтворити» над ним. Після натискання відео почне завантажуватися та відтворюватися. На сайті розробника можна переглянути просту демонстраційну версію.

WP YouTube Lyte

ЦІНА: Безкоштовно

WP YouTube Lyte

Цей плагін зробить свою роботу швидким та простим способом. Після його встановлення просто додайте посилання на своє відео на Youtube або використовуйте короткий код, щоб додати його. Ви можете вибрати додавання звичайного відео, списку відтворення або лише аудіо з вибраного відео. Після цього ваші відео на YouTube отримають над ним зображення, яке дозволить ледаче завантажувати. Просто натисніть на зображення, щоб розпочати відео чи аудіо.
Перегляньте демонстрацію на сайті розробника.

a3 Ледача навантаження

ЦІНА: Безкоштовно
DEMO 1
DEMO 2

a3 Ледача навантаження

Цей присвячений вашому мобільному сайту. Якщо у вас є багато зображень та / або відео, які ви хочете показати своїм відвідувачам на мобільних пристроях, варто поглянути на a3 Lazy Load. Це дозволить вам додавати ледаче завантаження до своїх зображень та відео, а плагін навіть дозволить вам вибрати ефекти переходу, які з’являтимуться користувачам під час прокручування вмісту, який завантажується.

У області адміністратора ви можете легко включати та вимикати вміст, який ви бажаєте ледаче завантажувати. Для тих, хто увімкнено, вміст завантажуватиметься лише тоді, коли відвідувач прокручує ту частину вмісту.
Існує чудово показана демонстрація, в якій розміщено 1000 зображень – кожне завантажується лише після прокрутки до неї. Оскільки цей плагін ліниво завантажує відео, також є демонстрація відео, яку ви можете побачити, натиснувши посилання вище.

BJ Lazy Load

ЦІНА: Безкоштовно

BJ Lazy Load

Якщо вам не потрібна підтримка відео, і ви хочете, щоб ваші зображення ледаче завантажувались, перевірте цей плагін WP. Після встановлення та налаштування він замінить ваші зображення, ескізи, зображення Gravatar та навіть рамки кадрів на заповнювач. Подібно до раніше згаданого плагіна, він завантажуватиме вміст лише після того, як користувач підходить до нього.

Незалежно від того, чи це зображення або відео, які ви хочете ледаче завантажувати, один із вищезгаданих плагінів допоможе вам за секунду. Усі вони безкоштовні, тому немає приводу для того, щоб не спробувати хоча б один із плагінів і побачити, яка вага ваших плечей займе. Звичайно, є багато інших плагінів з тією ж функцією, і ви можете переглядати та спробувати всі їх.

Відображати зображення до і після привабливо

Ми впевнені, що ви вже бачили багато прикладів зображень до / після. Не знаємо про вас, але перше, що ми маємо на увазі, коли бачимо фразу «до і після», це програма фітнес-тренувань, де люди показують своє тіло до і після тренувальної програми.

Якщо ви подумаєте над цим, більшість веб-сайтів використовують простий підхід, щоб продемонструвати відмінності – вони роблять обидва зображення та розміщують їх одне поруч або навіть одне над іншим. Якщо ви хочете такого ж результату, ви б не читали цю статтю, оскільки ви вже знаєте, як це зробити.

Що робити, якщо ми сказали вам, що існує візуально приголомшливий спосіб вирішити цю проблему до / після проблеми, і це просто досягається вашою рукою? Що ж, є і після налаштування ви похвалите розробників, адже кінцевий результат справді дуже здоровий.

Двадцять двадцять

ЦІНА: безкоштовно

Двадцять двадцять

Twenty Twenty – це назва цього дивовижного плагіна, який ви можете безкоштовно завантажити у сховище плагінів WordPress.

Плагін дозволить вам розмістити одне зображення над іншим і дозволить вам грати повзунком, щоб ви могли приховати / розкрити зображення. Перегляньте демонстрацію, і ви побачите, про що ми говоримо.

Гаразд, тепер, коли ви підключили цей маленький плагін, давайте подивимося, як створити цей приголомшливий ефект. Хоча відновити демонстраційний ефект відносно просто, вам все одно потрібно знати свій шлях навколо основного HTML. Ходімо:

  1. Створіть нову публікацію або відкрийте існуючу
  2. Вставте два зображення в пост. Якщо ви працюєте у візуальному редакторі, ви повинні побачити зображення одне над іншим. Якщо ви працюєте в текстовому редакторі, ви повинні побачити код, подібний до цього:
  3. 
    
    
    
  4. Введіть тег [двадцять двадцять] перед першим зображенням
  5. Після другого введіть тег [/ двадцять двадцять]
  6. У вашому текстовому редакторі ви повинні щось подібне:

    [двадцять двадцять]
    
    
    
    [/ двадцять двадцять]
    
  7. Переконайтесь, що ваші фотографії однакового розміру для досягнення найкращих результатів
  8. Попередньо перегляньте або опублікуйте свою публікацію і насолоджуйтесь своїм візуально приголомшливим до та після фотографій

Як створювати інтерактивні зображення – малюйте, додайте описи та посилання

Сьогодні важко запустити веб-сайт без мультимедіа. Зображення, відео та музика є частиною практично кожного веб-сайту. Середній користувач Інтернету сильно залежить від візуальних стимулів, тому вам потрібно подбати про візуальні та інтерактивні частини вашого сайту. Статті з зображеннями отримують На 94% більше переглядів ніж ті, хто без одного. Крім того, уже відомий факт, що мультимедіа на веб-сайтах може підвищити рентабельність контент-маркетингу.

Ми сподіваємось, що не потрібно переконувати вас піклуватися про зображення на вашому сайті. Навіть якщо ви не використовуєте зображення у статтях (які ви повинні), ви використовуєте пропоновані зображення, правда? Існує досить багато плагінів галереї, які можуть допомогти вам керувати зображеннями на вашому сайті WordPress, ви можете мати теми, пов’язані з фотографією, підключити Instagram до свого сайту WordPress та зробити багато іншого. Але що робити, якщо ви хотіли створити більш інтерактивний контент?

Для початку вам може бути цікаво додати ефект після зображення, який сподобається вашим користувачам. Не забувайте про віртуальну реальність у WordPress, яка стає все популярнішою після автоматичного введення VR в WordPress.com. Але все-таки щось не вистачає. Чи можна робити інтерактивні зображення із деталями, які можна натискати? Так, це можливо, і ми збираємось показати вам, як це весело і легко.

Звернути увагу

ЦІНА: Безкоштовно
DEMO

Перше, що вам сподобається у цьому плагіні, це те, що він повністю безкоштовний! Як і будь-який інший плагін із сховища WordPress, ви можете завантажити, встановити та активувати його за лічені хвилини. Безкоштовна версія дозволить вам працювати з одним інтерактивним зображенням. Якщо ви хочете більше, вам доведеться увімкнути PRO-версію, але про це ми поговоримо пізніше.

Плагін чуйний, і вам не потрібно турбуватися про правильне відображення інтерактивних зображень на будь-якому пристрої. Мало того, що зображення буде масштабуватися відповідно до розміру екрана, але воно буде працювати в більшості сучасних та старих браузерів (настільних і мобільних). Зверніть увагу, використовуючи елементи полотна, коли вони відображаються в нових браузерах, тоді як вони будуть повертатися до карт зображень, якщо ви завантажуєте їх у більш старий.

Особливості

Перш ніж перейти до прикладу, який покаже вам, наскільки потужним є цей простий плагін, давайте подивимося, чого очікувати від Draw Увага:

  • Малюємо – Після завантаження зображення ви отримаєте шанс намалювати на ньому фігури. Виберіть будь-яку частину зображення, яку можна вибрати / натискати
  • Кольори – Налаштуйте кольори так, щоб ви могли зробити точкові точки під дизайн вашого сайту
  • Виділіть на наведення курсора – Покажіть іншу частину зображення, якщо користувач наводить курсор на обрану частину
  • Показати більше інформації – Відобразить додаткову інформацію про вибрану частину зображення
  • Перейдіть за URL-адресою – Перенаправлення користувачів на будь-яку URL-адресу, якщо вони натискають на вибір

Намалюйте налаштування уваги

Приклад – Інтерактивна карта Гаваїв

Ми будемо використовувати приклад з демонстраційного сайту, щоб показати вам, що саме ви можете зробити із залученням уваги. Отже, давайте подивимося, як виглядає інтерактивна карта Гаваїв, створена разом із плагіном.

Перше, що вам доведеться зробити – це знайти зображення островів Гаваї. Після переходу до Зверніть увагу -> Редагувати зображення, ви повинні завантажити зображення в область правої бічної панелі. Як тільки зображення завантажується, забава може розпочатися.

Тут ви можете вибрати кольори для яскравих кольорів (колір, облямівка, непрозорість і т. Д.), Накреслити “поле інформації” (зображення, заголовок, колір тексту тощо). Якщо ви не хочете вибирати кожен колір для зображення вручну, ви можете швидко вибрати колірну схему з правої бічної панелі.

Зверніть увагу - як створювати інтерактивні зображення в WordPress

Найбільш магічна частина трапляється в Області гарячої точки екран налаштувань. Тут ви отримаєте ваше зображення завантажене в повний розмір. Все, що вам потрібно зробити зараз, – це почати малювати та створити нову точку доступу. Ви можете додати скільки завгодно балів, а це означає, що ви можете створювати вичерпні виділення, скільки хочете. Ви можете створити стільки точок доступу, і кожен може мати свої власні налаштування.

Отже, у цьому прикладі слід вибрати один з островів. Виберіть заголовок для острова, додайте опис та додаткове зображення, яке відображатиметься, коли користувач наводить точку доступу (права частина зображення GIF, показане вище).

Ви повинні повторити процес для кожного з островів, які ви хочете бути інтерактивними. Після того, як ви підготуєте гарячі точки, просто скопіюйте короткий код з правого боку. Вставте короткий код у публікацію, сторінку, віджет або куди ви хочете показати свою нову інтерактивну карту, і ви все готові! Якщо ви хочете перенаправити користувачів на будь-яку іншу сторінку, як тільки вони натиснули на вибрані, вам просто потрібно вибрати URL, а не опис. Легко як це!

PRO версія

Хоча безкоштовна версія буде ідеальною, якщо вам потрібно лише одне зображення, PRO версія дозволить вам мати на своєму сайті стільки інтерактивних зображень, скільки вам потрібно. Хоча це буде найважливішим, що слід врахувати, версія PRO отримає у вас навіть більше, ніж кілька зображень.

Функція “Параметри макета” дозволить показати більше інформації про вибрані частини зображення. Наприклад, ви побачите інформацію в лайтбоксі або на простій панелі інструментів, яка з’явиться після того, як користувач навести курсор на обрану частину зображення.

Також є двадцять заздалегідь визначених кольорових піддонів, тому вам не потрібно налаштовувати кожен колір вручну. Версія PRO обійдеться вам у 74 долари за ліцензію на один сайт, але якщо вам потрібно більше ніж одне інтерактивне зображення, це буде непродуманий.

Як відновити додаткові розміри зображень

Реєстрацію нових розмірів зображень у вашій темі WordPress порівняно легко. Після того, як ви сказали вашій системі, наскільки великими повинні бути ваші зображення, назвали їх і вирішили як їх обрізати, ви можете розповсюджувати зображення куди завгодно. А як же старі образи?

Якщо ви використовували одну з прийомів, яку ми вам показали, ви підготували дернину для нових зображень. Чи використовуєте ви нещодавно зареєстровані розміри зображень для ескізів публікацій чи дозволяєте авторам використовувати їх у публікаціях, нові правила застосовуються лише до зображень, завантажених після внесення змін у файлі function.php. Для зміни старих зображень пропонуємо використовувати плагін Regenerate Thumbnails.

Відновити мініатюри:

ЦІНА: Безкоштовно
  1. Йти до Плагіни-> Додати нове
  2. Шукати “Відновити мініатюри”
  3. Встановіть та активуйте плагін
  4. Перейдіть до Інструменти-> Regen.Thumbnails

Якщо ви хочете змінити розмір усіх своїх зображень, просто натисніть кнопку “Відновити всі мініатюри” і дочекайтеся, коли плагін виконає важку роботу.

Як відновити додаткові розміри зображень

Якщо ви хочете побачити зображення, які будуть змінені, або якщо ви хочете змінити розмір лише деяких зображень, перейдіть до своєї бібліотеки медіа, де ви знайдете нову опцію в розділі “Масові дії” та одне біля кожного зображення у вікні галерея.

Хороша річ у плагіні, що він не видаляє вихідні зображення. Він створить нові розміри зображень, які ви можете використовувати у своїй темі, тоді як оригінальні залишатимуться ними пізніше або видалити вручну, якщо ви вирішите, що вони вам не потрібні..

Це воно. Насолоджуйтесь новими ескізами або перевіряйте Прості розміри зображень плагін, який може зробити те ж саме.

Видаліть атрибути зображення ширини та висоти за допомогою jQuery

Додаючи зображення в пост WordPress, система автоматично додає зображення до атрибутів висоти та ширини. Це зазвичай добре, але бувають випадки, коли тобі не сподобається, що кожне зображення отримує ці атрибути.

Якщо ви хочете зняти атрибути прямо в момент завантаження, це можна зробити за допомогою простої функції, яку ми вам показували минулого разу.

Але якщо ви прочитали статтю або спробували цю функцію самостійно, ви помітили, що вона впливає лише на зображення, завантажені після встановлення функції у вашу WP-систему. Якщо у вас вже є база даних, повна публікацій із вставленими зображеннями, вищезгадана функція не допоможе вам у великій кількості зі своїми старими атрибутами зображення.

Оскільки ви, мабуть, не можете переглядати кожне зображення вручну та видаляти ширину та висоту по одному, вам, мабуть, потрібна інша функція, яка зніме ці атрибути для всіх наявних зображень, вбудованих у ваші публікації. У цьому випадку ви знаходитесь у потрібному місці, тому що ми збираємось показати вам простий спосіб автоматичного видалення атрибутів зображення ширини та висоти за допомогою кількох рядків коду jQuery. Не лякайтеся попередньої фрази – вам навіть не потрібно знати, що таке jQuery, просто виконайте наступні три кроки, і ви все зробите як мінімум.

Видалити атрибути зображення ширини та висоти:

  1. Відкрийте файл header.php у папці тем
  2. Скопіюйте та вставте цей код десь між ними і теги:
  3.  
  4. Зберегти зміни

І ви зробили! Код зробить свою магію після того, як ви відкриєте допис, який містить зображення, і видалить з нього теги ширини та висоти.

Як створити власні розміри зображень у програмі Media Uploader

Якщо ви використовуєте Media Uploader для обробки зображень у WordPress, ви, мабуть, бачили численні варіанти зображень. Між багатьма, ви можете вибрати розмір зображення, який ви можете надіслати у вашу статтю.

Тут можна вибрати мініатюри, середні, великі та повнорозмірні, але всі ці параметри мають заздалегідь задані значення. Тож, якщо ви користуєтеся власною темою, частіше за все вам заново стикаються зі зміною ширини та висоти для кожного зображення.

Насправді, не потрібно цього робити. Існує акуратна маленька функція, яка називається add_image_size (), яка є чудовим інструментом для розробників. І після цієї статті ви також знайдете її корисною.

Скажімо, ваша тема має власну ширину, і ви хочете легко вставляти зображення, щоб вони ідеально вміщувалися. Скажімо, що ширина становить 666 пікселів (ми не будемо вникати, чому ви встановили ширину на це число, це ваш вибір). Для цього вам потрібно додати додатковий перемикач до програми для завантаження медіа. За допомогою наведеного нижче коду ви додасте ще один розмір, що є половинним розміром від початкового.

  1. Відкрийте файл function.php
  2. Скопіюйте та вставте цей фрагмент коду:
  3. функція custom_image_sizes () {
    add_image_size ('один розмір', 333, 333, правда);
    add_image_size ('інший розмір', 666, 666, правда);
    }
    
    добавлення ('init', 'custom_image_size');
    
    функція show_image_sizes ($ розміри) {
    $ size ['one-size'] = __ ('Спеціальний розмір 1', 'isitwp');
    $ size ['Another-size'] = __ ('Користувацький розмір 2', 'isitwp');
    повернути розміри $;
    }
    
    add_filter ('image_size_names_choose', 'show_image_size');
  4. Зберегти зміни
  5. Спробуйте додати зображення із Медіа-завантажувача, де ви побачите нові параметри розміру в розділі “Налаштування відображення вкладених файлів”

Створіть автоматичний скріншот будь-якого веб-сайту та опублікуйте його як зображення у своєму дописі

Якщо ви хочете показати мініатюру веб-сайту, вам доведеться зайти на веб-сайт, надрукувати його на екрані або зробити знімок екрана з програмою або додатком до браузера. Тоді вам потрібно буде змінити зображення, вирізати його до потрібного розміру і завантажити його на ваш WordPress, щоб ви могли використовувати знімок екрана в публікації.

Якщо вам не доведеться робити цей знімок раз у раз, це не буде проблемою, але якщо ви частіше використовуєте скріншоти різних веб-сайтів, ви будете раді почути, що існує чудова функція, яка буде заощадите ваш час і нерви.

У цій частині посібника ми збираємось показати вам повну функцію, яка створює короткий код, який ви можете використовувати для зйомки будь-якої веб-сторінки, яку ви хочете.

Створіть автоматичний знімок екрана:

  1. Відкрийте функції.php
  2. Скопіюйте та вставте такий код:
  3. функція wp_webscreen ($ atts, $ content = NULL) {
    витяг (shortcode_atts (масив (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => "wploop",
    "w" => '600', // ширина
    "h" => '450' // висота
    ), $ atts));
    
    $ img = ''. $ alt '';
    повернути $ img;
    }
    add_shortcode ("екран", "wp_webscreen");
  4. Змінення змінних за замовчуванням у масиві
  5. Зберегти зміни

Ця функція створює короткий код, який ви можете легко використовувати будь-де на своєму веб-сайті WordPress. Якщо ви хочете використовувати скріншот веб-сторінки у публікації, віджеті бічної панелі чи колонтитула, наприклад, просто c / p короткий код у потрібному місці:

[screen url = ”http://www.firstsiteguide.com” alt = “fsg” w = ”600 ″ h =” 450 ″]

Що найкраще в цій функції, це те, що вона зберігає зображення як динамічну URL-адресу, що означає, що як тільки ви створите знімок із коротким кодом, він автоматично оновиться в майбутньому і завжди покаже поточний вигляд веб-сайту, вказаний у шорт-коді.

Зауважте, що ви можете змінювати параметри короткого коду безпосередньо з нього. Вам не потрібно змінювати код у файлі function.php, якщо ви хочете зробити знімок іншої URL-адреси або зробити знімок в іншому вимірі.

Приклад:

Скажімо, ви хочете зробити знімок екрана Google і зробити його величиною 200 × 400 пікселів:

[screen url = ”http://www.google.com” alt = “Google” w = ”200 ″ h =” 400 ″]

Ви можете зробити все ще простіше, зберігаючи короткий код у кнопку, щоб ви могли вставити його в допис одним натисканням кнопки..

Висновок

Вам не потрібно встановлювати всі плагіни та функції, про які ми згадували, щоб покращити зображення на вашому сайті WordPress. Але ми сподіваємось, що ви знайшли принаймні кілька порад, які допоможуть вам оптимізувати зображення або будь-яким чином покращити їх.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map