<
  • Главная
Статьи

Адаптація зображень по Retina екрани

Junior Member   Join Date: Jul 2014   Posts: 4   Добрий день

Junior Member

Join Date: Jul 2014

Posts: 4

Добрий день. Як всі знають Retina екрани мають велику щільність пікселів. Тому для того, щоб в нормальній якості відобразити картинку 200 на 200 пікселів, необхідно довантажувати картинку з реальним дозволом 400 на 400, а вже засобами CSS зменшувати його в 2 рази. Так я і роблю при завантаженні зображень категорій і товарів. Але проблема в тому, що ecwid при розподілі зображень, наприклад, категорій, по екрану бере їх реальну ширину, і там де має розміститися 4 категорії в ряд, уміщається тільки 2. За допомогою CSS як я зрозумів це не вирішити, тому що картинки кладуться в осередку (td) таблиці, а їх кількість в рядку визначається ґрунтуючись на ширині картинки, а не самої комірки. Питання як вирішити цю проблему? Проблема серйозна, бо на всіх сучасних iOS пристроях сайти будуть виглядати дуже погано.

Проблема серйозна, бо на всіх сучасних iOS пристроях сайти будуть виглядати дуже погано

Junior Member

Join Date: Jul 2014

Posts: 4

Ауу ???

Ауу

Ecwid Team

Join Date: Jun 2014

Posts: 1,021

Quote:

Добрий день. Як всі знають Retina екрани мають велику щільність пікселів. Тому для того, щоб в нормальній якості відобразити картинку 200 на 200 пікселів, необхідно довантажувати картинку з реальним дозволом 400 на 400, а вже засобами CSS зменшувати його в 2 рази. Так я і роблю при завантаженні зображень категорій і товарів. Але проблема в тому, що ecwid при розподілі зображень, наприклад, категорій, по екрану бере їх реальну ширину, і там де має розміститися 4 категорії в ряд, уміщається тільки 2. За допомогою CSS як я зрозумів це не вирішити, тому що картинки кладуться в осередку (td) таблиці, а їх кількість в рядку визначається ґрунтуючись на ширині картинки, а не самої комірки. Питання як вирішити цю проблему? Проблема серйозна, бо на всіх сучасних iOS пристроях сайти будуть виглядати дуже погано.

Доброго дня,
Вибачаюсь за затримку з відповіддю.
Розповім трохи про взаємини Еквіда і того сайту, куди вставляється код інтеграції. При вставці коду інтеграції на сайт, Еквід займає весь виділений йому простір. І оскільки Еквід має адаптивний дизайн, вітрина автоматично підлаштовується під ті умови, які є. Тому вітрина буде виглядати чудово на будь-яких пристроях, з будь-якою шириною. Якщо Еквід "бачить", що якісь елементи не вміщаються, він змінить відображення.
Наприклад, ви розміщуєте категорії по 3 в ряд, але при цьому розмір зображення категорії 300 пікселів, а контейнер, всередині якого знаходиться магазин, - 700. У цьому випадку Еквід залишить в ряду 2 категорії, а 3 категорію перенесе на наступний рядок, щоб не порушувати і не розривати сайт по ширині. Якщо ви не хочете, щоб порушувався порядок рядів, то це можна вирішити, вказавши максимальний розмір зображення категорії в своїй Панелі управління-> Настройки> Дизайн-Розміри ескізів. При зміні розмірів зображень у категорій необхідно заново їх завантажити.
При відкритті магазину з мобільного пристрою Еквід також адаптує магазин під екран телефону, роблячи процес покупки простим і зручним.
Сумісність з retina пристроями дуже важлива, безумовно. На даний момент ми працюємо над вирішенням для Еквіда. Таким рішенням по роботі з retina ready зображеннями товарів може бути описане мною вище вказівка: максимальне розміру ескізів категорій і товарів (Панель управління-> Настройки> Дизайн-> Розміри ескізів).

Таким рішенням по роботі з retina ready зображеннями товарів може бути описане мною вище вказівка: максимальне розміру ескізів категорій і товарів (Панель управління-> Настройки> Дизайн-> Розміри ескізів)

Junior Member

Join Date: Jul 2014

Posts: 4

Ви мабуть не зрозуміли мене. Щоб на РЕТІНА екрані якісно відображалися картинка в 300х300 пікселів, потрібно завантажити картинку 600х600, а засобами CSS стиснути її до 300х300. Це я і роблю. Ставлю в налаштуваннях 600 і завантажую, потім правлю CSS. Але проблема в тому, що ecwid все одно вважає, що розмір відображуваної картинки 600х600, і там де має вміститися в ряд 4 картинки, він уміщає тільки 2. Виходять величезні відстані між картинками. В даному випадку адаптація під різні розміри екрану взагалі ні до чого.

В даному випадку адаптація під різні розміри екрану взагалі ні до чого

Ecwid Team

Join Date: Jun 2014

Posts: 1,021

Quote:

Ви мабуть не зрозуміли мене. Щоб на РЕТІНА екрані якісно відображалися картинка в 300х300 пікселів, потрібно завантажити картинку 600х600, а засобами CSS стиснути її до 300х300. Це я і роблю. Ставлю в налаштуваннях 600 і завантажую, потім правлю CSS. Але проблема в тому, що ecwid все одно вважає, що розмір відображуваної картинки 600х600, і там де має вміститися в ряд 4 картинки, він уміщає тільки 2. Виходять величезні відстані між картинками. В даному випадку адаптація під різні розміри екрану взагалі ні до чого.

Я розумію, про що ви говорите, і так, на жаль, зменшення зображень за допомогою CSS не працює. Як ви знаєте, збільшена щільність пікселів тягне за собою збільшення обсягу файлу. І при роботі з мобільною версією магазину будуть довантажуватися великі за обсягом файли зображення, що може уповільнити роботу Еквід вітрини. А якщо у користувача повільний інтернет, це ускладнить процес покупки. Ми не хочемо цього. Одна з наших основних цілей - робити вітрини Еквід швидше і ефективніше. Тому поки готового рішення картинок для retina дисплеїв немає. Ми шукаємо способи вирішення, щоб покупець не відчував труднощів з завантаженням ретина зображення, при цьому враховуючи різні гаджети (і швидкість мобільного інтернету), з яких може виробляти покупки покупець.

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

Junior Member

Join Date: Jul 2014

Posts: 4

Ви перебільшуєте. Зараз є можливості навіть дуже великі картинки оптимізувати, щоб вони легко відкривалися при середньому мобільному інтернеті. Та й мені здається, це справа власника магазину які картинки завантажувати. Якщо він вважає, що велика частина його потенційних клієнтів ще сидить на діал апі, то він вантажить дрібні картинки, якщо у нього аудиторія дозволяє собі швидкісний інтернет, то вантажить великі картинки. Все просто, всім не догодити. Ніяких по суті нововведень для цього не треба, просто в розрахунку ширини блоку використовувати розмір відображуваної картинки, а не завантаженою.
І ще пара питань:
1. У мене гумова верстка на всю ширину екрану. Ecwid виводиться через плагін Wordpress. У його настройках коштує 5 товарів в ряд. Розмір мініатюри товару на сторінці категорії 150 пікселів. Але чому то навіть при ширині екрану 1600 пікселів, все одно виводиться 3 товара в ряд. В чому проблема?
2. Для мого бізнесу ідеальна наступна схема замовлення та оплати: клієнт вибирає товар, робить замовлення, далі менеджер зв'язується з клієнтом уточнює певну інформацію і якщо клієнт підтверджує замовлення, йому на пошту приходить індивідуальна посилання на оплату замовлення. Чи можливо це реалізувати?

Чи можливо це реалізувати

Ecwid Team

Join Date: Jun 2014

Posts: 1,021

Quote:

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

Безумовно ви маєте рацію, є різні способи оптимізації зображень для сайтів, але тут ми намагаємося досягти наступної мети: наш клієнт не повинен замислюватися про ці речі, ми хочемо автоматизувати процес. Припустимо, заливається retina ready картинка до товару, і Еквід самостійно, в залежності від звертається до нього пристрої, показує покупцеві зображення потрібної ширини і якості, як це вже зроблено в нашому адаптивному дизайні. При цьому нам потрібно враховувати ті багато і багато магазинів, які вже існують і працюють, і цими змінами не зіпсувати наявне безліч CSS стилів і налаштувань у наших клієнтів. Через це процес обмірковування і розробки рішення такої копіткий. Наша мета - ввести поліпшення так, щоб жоден з Еквід магазинів не помітив, в хорошому сенсі.

Quote:

1. У мене гумова верстка на всю ширину екрану. Ecwid виводиться через плагін Wordpress. У його настройках коштує 5 товарів в ряд. Розмір мініатюри товару на сторінці категорії 150 пікселів. Але чому то навіть при ширині екрану 1600 пікселів, все одно виводиться 3 товара в ряд. В чому проблема? Швидше за все це пов'язано з тим, що переплутані поля в плагіні, поміняйте значення місцями в налаштуваннях зовнішнього вигляду вітрина у виду "Сітка"? нашого плагіна "Wordpress". Спасибо большое, що вказали на це. Ми доопрацюємо цей момент.

Quote:

2. Для мого бізнесу ідеальна наступна схема замовлення та оплати: клієнт вибирає товар, робить замовлення, далі менеджер зв'язується з клієнтом уточнює певну інформацію і якщо клієнт підтверджує замовлення, йому на пошту приходить індивідуальна посилання на оплату замовлення. Чи можливо це реалізувати? Це можливо при створенні відповідного офлайнового методу оплати, при якому сам факт оплати відбувається вже поза Еквід. Наприклад, таким видом оплати може стати "Phone Order" (замовлення по телефону): в панелі управління-Настройки-Оплата-Способи оплати вказуєте інструкцію для своїх покупців про процес покупки, включаєте його і зберігаєте.
Якщо ви поділіться тим, яку саме інформацію (наприклад, розмір кільця, кількість, доставка) буде уточнювати менеджер у покупця, можливо, я зможу запропонувати вам більш зручний варіант оплати.
2 Posting Rules

You may not post new threads

You may not post replies

You may not post attachments

You may not edit your posts

HTML code is Off



All times are GMT. The time now is 8:33 PM.

Powered by vBulletin® Version 3.8.11. Copyright © 2000 - 2019, Jelsoft Enterprises Ltd.

Питання як вирішити цю проблему?
Питання як вирішити цю проблему?
В чому проблема?
Чи можливо це реалізувати?
В чому проблема?
Швидше за все це пов'язано з тим, що переплутані поля в плагіні, поміняйте значення місцями в налаштуваннях зовнішнього вигляду вітрина у виду "Сітка"?
Чи можливо це реалізувати?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью