WebSite X5Help Center

 
Olga S.
Olga S.
User

Wbmp и webp  ru

Author: Olga S.
Visited 1865, Followers 2, Shared 0  

Коллеги, кому-то удалось использовать форматы wbmp и webp? Если да, то каким образом удалось реализовать в WebSite X5 Pro?

<img src="images/name.webp" alt="описание" /> не работает. Галереи и слайдеры эти форматы тоже не видят

Posted on the
26 ANSWERS - 2 USEFUL
R2 - D2
R2 - D2
User
Best User of the month RU

Названные вами форматы мало где используются на сайтах, поэтому если у вас некоторые изображения именно в этих форматах, то проще будет их конвертировать массой онлайн-конвертеров, в один из этих форматов

Read more
Posted on the from R2 - D2
Evgenij G.
Evgenij G.
User
К У
Названные вами форматы мало где используются на сайтах

Гугл рекомендует эти форматы, но почему-то х5 их не поддерживает.

Read more
Posted on the from Evgenij G.
R2 - D2
R2 - D2
User
Best User of the month RU
Evgenij G.
Гугл рекомендует эти форматы, но почему-то х5 их не поддерживает.


Wbmp - растровый формат монохромного (черно-белого) изображения, много лет назад использовался в основном при передаче через WAP черно-белых изображений на древних сотовых телефонах, его Гугл рекомендует? ))

Read more
Posted on the from R2 - D2
Olga S.
Olga S.
User
Author

К УUser, форматы, которые вы перечислили - для web прошлый век.
Сейчас в приоритете скорость загрузки графики и видео.
К примеру, скорость загрузки WebP на 25–34% выше обычных форматов
https://developers.google.com/speed/webp

Read more
Posted on the from Olga S.
R2 - D2
R2 - D2
User
Best User of the month RU
Olga S.
К УUser, форматы, которые вы перечислили - для web прошлый век. Сейчас в приоритете скорость загрузки графики и видео. К примеру, скорость загрузки WebP на 25–34% выше обычных форматов https://developers.google.com/speed/webp


Так это вы изначально назвали очень древний формат Wbmp, а не я.

Read more
Posted on the from R2 - D2
Olga S.
Olga S.
User
Author

Дорогие коллеги, делюсь радостью.

Мне удалось разобраться с форматом webm и вставить его в WebSite X5.
Результат потрясающий, всё загружается мгновенно.
Чтобы самой не забыть и с вами поделиться, сделала 2 странички с подробным описанием.
Пример последовательности действий ЗДЕСЬ (Пример встраивания webm в WebSite X5)
А адаптивный плеер с автозапуском и зацикливанием ЗДЕСЬ

Если коротко, то надо сделать и встроить отдельный html проигрыватель, а видео или гиф конвертировать в webm и сжать.

Ссылки:

P.S. теперь предстоит весь сайт переделывать...foot-in-mouth

Read more
Posted on the from Olga S.
Olga S.
Olga S.
User
Author

Проблему со вставкой изображений в формате webp тоже решила. 

Посмотреть пример реализации и подробное описание можно ЗДЕСЬ.

Алгоритм действий:

  1. Сжимаем здесь: https://www.iloveimg.com/ru/compress-image
  2. Конвертируем в webp здесь: https://convertio.co/ru/jpg-webp/
  3. Грузим файл webp на сайт
  4. На нужной странице вставляем код:

<picture>

  <source srcset="//images/name.webp" type="image/webp">

  <img src="//images/name.webp" alt="описание" />

</picture

Результат: исходный файл  405 КБ уменьшен до 53 КБ

Нужна помощь. Я плохо разбираюсь в коде html. 

После вставки этого кода, образуется глюк: Нарушается структура страницы и текст, если вставить после изображения, съезжает в подвал или в бок. 

Поэтому на странице Примера, текст пришлось вставить перед изображением.

Read more
Posted on the from Olga S.
Olga S.
Olga S.
User
Author

К УUser и Evgenij G, сорри, конфуз, оЧЕПятка - конечно webm и webp surprised

Read more
Posted on the from Olga S.
Evgenij G.
Evgenij G.
User
Olga S.
После вставки этого кода, образуется глюк: Нарушается структура страницы и текст, если вставить после изображения, съезжает в подвал или в бок.  Поэтому на странице Примера, текст пришлось вставить перед изображением.

Если несколько фото вставить тоже самое, все съезжает.

Read more
Posted on the from Evgenij G.
Olga S.
Olga S.
User
Author

Проблему webp решила через вставку фреймом. Таким образом, решена проблема с нарушением структуры страницы.Как сделать и коды здесь

Все красиво и быстро, однако, нет в жизни совершенства, картинка не адаптивна.

Модераторы, помогите сделать адаптивный код.

Read more
Posted on the from Olga S.
Olga S.
Olga S.
User
Author

Коллеги, возможно кто-то сталкивался с проблемой исчезновения меню в Edge и Опере?

На одном из мои компов, в этих браузерах пропадает меню! Прикрепляю видео скрин. 

Глюк меню в Edge

Read more
Posted on the from Olga S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

(It > Ru) ...... во всяком случае, для тех, кто еще не знает! ... в программе они всегда были возможны! используйте все дополнительные форматы, например SVG, WEBP, JPEG2000, ... просто выберите изображения в своей папке следующим образом:
* .svg
* .webp
* .jp2
* .j2f

*. * ... ... (для всех) ...
...

... или для объекта изображения используйте параметр URL с «абсолютной» ССЫЛКОЙ или «относительной» ССЫЛКОЙ ...

.

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Olga S.
Olga S.
User
Author

Вы правы, KolAsim ‪ ‪Moderator, видео формат webm в WebSite X5 есть. Однако нет функции петли (зацикливания) и автовоспроизведение отображается далеко не во всех браузерах. Для преобразованных гифок, такой вариант не подходит. 

А вот WEBP я не вижу и URL тоже не срабатывает, разве что для каждого такого изображения, отдельную страничку делать.

Форматы изображений в WebSite X5

Видео форматы в WebSite X5

Read more
Posted on the from Olga S.
Olga S.
Olga S.
User
Author

Дорогие коллеги, я его (webp) победила!

Теперь картинка стала адаптивной и нет никаких глюков со структурой страницы.

Пример и подробное описание ЗДЕСЬ

1. Чтобы изображение стало адаптивным, вставляем в свойства страницы код:

<meta name="viewport" content="width=device-width, initial-scale=1"><style>.responsive { width: 100%;   height: auto;}</style>

2. В тело страницы вставляем:

<picture>  <source srcset="//ваш сайт/путь к картинке.webp" type="//ваш сайт/путь к картинке.webp ">
  <img src="//ваш сайт/путь к картинке.webp" alt="Описание"class="responsive" width="600"  />
</picture>

Вопрос решен. Тему закрываю. Спасибо, что были со мной.

Пользуйтесь на здоровье, скоростных вам сайтов!

Read more
Posted on the from Olga S.
Evgenij G.
Evgenij G.
User
Olga S.
1. Чтобы изображение стало адаптивным, вставляем в свойства страницы код: <meta name="viewport" content="width=device-width, initial-scale=1"><style>.responsive { width: 100%;   height: auto;}</style>

А Вы ссылкой пробовали вставлять, как описывает  KolAsim? Я попробовал все работает, также и в адаптивном режиме.

Read more
Posted on the from Evgenij G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
Evgenij G.
... ... А Вы ссылкой пробовали вставлять, как описывает  KolAsim? Я попробовал все работает, также и в адаптивном режиме.
 ...... фактически , ... этот метод также работал со старыми версиями...wink...

ciao

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Olga S.
Olga S.
User
Author

KolAsim ‪ ‪Moderator и Evgenij G. User, было сказано: плохо разбираюсь в html. И я не одна такая, вся система рассчитана на готовые кубики, на тех, кто с кодом не дружит.   Поэтому, если вы знаете решение, то опубликуйте реальный код или метод, который можно применить изменив под себя, а не высокомерно делать намеки демонстрируя  какие вы сверх знатоки. Дайте скрины и метод. Что за звездочки? Как должен выглядеть код для корректной вставки webP на страницу? Как вставить несколько webP, чтобы не нарушалась структура страницы?  Как можно использовать webP в фоне (стиль полос)?

Read more
Posted on the from Olga S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
Olga S.
  ... ... ...  плохо разбираюсь в html.  ... ... ... 
... вы использовали это в своем предыдущем посте
Olga S.
... ... ...  а не высокомерно делать намеки демонстрируя  какие вы сверх знатоки. ... ... ... 

... Извините, кто знает, что вы понимаете, но уж точно ничего высокомерного и ничего сверхэксперта ...
... он также предоставляется программой, ... для объекта изображения вам просто нужно вставить URL-адрес, как я сказал ранее:

 ‪ KolAsim ‪ ‪
... ... ...  ... или для объекта изображения используйте параметр URL с «абсолютной» ССЫЛКОЙ или «относительной» ССЫЛКОЙ ... ... ... 
...+... или для дополнительных изображений, перечисленных выше, вы можете использовать простой и базовый базовый код html в объекте HTML-кода, таком как этот, похожий на тот, который вы уже использовали раньше:
<img src = "files/filename.svg" width = "100" />

 ... когда вы знаете, как это сделать становится просто даже для неопытного...
... все остальное будет зависеть только от вас...
... и чтобы избежать проблем, использовать предоставленные ресурсы, в настоящее время общие и совместимые...

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Olga S.
Olga S.
User
Author

KolAsim. ‪ ‪как можно использовать webP в фоне (стиль полос)? Там нет возможности вставки кода

Read more
Posted on the from Olga S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

(It > Ru)... в настоящее время у меня нет ПК, и я не могу попробовать, ... но вы пытаетесь сделать это (*.webp):

...!... в противном случае, чтобы провести быстрый тест с моим ДОПОЛНИТЕЛЬНЫМ кодом:
1) ... создать простой одностраничный проект с одной строкой;
2) ... для фона строки используйте любое изображение *.jpg, не очень тяжелое, размером в несколько КБ;
3) ... экспортировать в сеть и разместить здесь ССЫЛКУ;
4) ... также экспортируйте свое изображение WEBP в сеть (*), а также разместите его ССЫЛКУ здесь;
... а потом я расскажу вам остальное по ДОПОЛНИТЕЛЬНОМУ коду...

(*) ... с FTP Filezilla и т. д., Server FilesManger и т. д.

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Vlad S.
Vlad S.
User
Olga S.
KolAsim. ‪ ‪как можно использовать webP в фоне (стиль полос)? Там нет возможности вставки кода

В стиль полос вставляется как обычная картинка, без кода и все показывает.

Read more
Posted on the from Vlad S.
Vitaly S.
Vitaly S.
User
Vlad S.
Olga S. KolAsim. ‪ ‪как можно использовать webP в фоне (стиль полос)? Там нет возможности вставки кода В стиль полос вставляется как обычная картинка, без кода и все показывает.

У меня не вставляется. Не видит этот формат.

Read more
Posted on the from Vitaly S.
Vlad S.
Vlad S.
User
Vitaly S.
У меня не вставляется. Не видит этот формат.

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

Вам будут показаны варианты.

Жмете на имя файла и открыть, все.

Read more
Posted on the from Vlad S.
Vitaly S.
Vitaly S.
User
Vlad S.
Vitaly S. У меня не вставляется. Не видит этот формат. При выборе картинки, зайдите в папку где находится картика и начните вводить имя нужного вам файла. Вам будут показаны варианты. Жмете на имя файла и открыть, все.

Спасибо. Все получилось.

Read more
Posted on the from Vitaly S.
Денис С.
Денис С.
User

Загрузить изображение в корень сайта, или в папку. Открыть объект изображения - файл из интернет - вашсайт/файл или вашсайт/папка/файл

Read more
Posted on the from Денис С.