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

Я был глубоко вовлечен в другую работу и не в силах, совладелец сайта сообщает мне, что сайт не на 100% прав для всех людей. Хотя он не технически склонен по сравнению со мной, это то, что происходит.

Когда я сделал сайт, я сделал настольную версию (для экранов большого разрешения, особенно для настольных компьютеров), в которой отображаются фотографии, которые люди хотят видеть в нормальном размере. Я не получил там никаких жалоб.

Затем я добавил мобильную версию на сайт с изображениями размером до экрана пользователя без необходимости прокрутки по сторонам. Это также соответствует стандартам Google для мобильных устройств.

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

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

Мне также сказали, что люди на мобильном сайте часто используют кнопку загрузки, чтобы получить исходное изображение (которое является целью кнопки), но люди обнаружили, что это неудобно.

Итак, теперь я остаюсь ошеломленным, и у меня есть некоторые варианты с отрицательными последствиями.

вариант 1

Сделайте файлы изображений одинаковыми для обоих сайтов. Если я это сделаю, я буду использовать больше пропускной способности сервера, а клиенты будут использовать большую часть своей полосы пропускания, а затраты растут для всех.

вариант 2

Принудите пользователей, которые не находятся на мобильных устройствах с низким разрешением, на рабочий стол. Если я это сделаю, и пользователь использует необычные веб-браузеры, обнаружение может не работать должным образом.

вариант 3

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

вариант 4

Напишите как текст URL-адрес высококачественного изображения с рабочего стола рядом с изображением на мобильном сайте. Единственная проблема с этой опцией заключается в том, что люди не любят читать, когда все, что они хотят видеть, это картинки.

вариант 5

Обеспечьте активную ссылку на высококачественную картинку с рабочего стола на мобильном сайте. Проблема здесь в том, что если бы я установил связь с тегом привязки, Google подумает, что мой сайт будет менее мобильным, и если я использую кнопку для создания ссылки (сообщение формы), страница будет выглядеть уродливой на более мелких устройствах, потому что Мне нужно сделать ссылку описательной, а кнопки не очень хорошо работают с CSS.

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

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

3 голоса | спросил Mike 13 FebruaryEurope/MoscowbMon, 13 Feb 2017 18:37:11 +0300000000pmMon, 13 Feb 2017 18:37:11 +030017 2017, 18:37:11

2 ответа


1

Bootstrap class="image-responsive", это будет работать?

https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

ответил JustJohn 15 FebruaryEurope/MoscowbWed, 15 Feb 2017 00:38:22 +0300000000amWed, 15 Feb 2017 00:38:22 +030017 2017, 00:38:22
1

Получение изображений для отображения на разных устройствах требует откликов. Это предпочтительнее иметь несколько «сайтов» для разных типов устройств. Он не требует больших изменений пропускной способности. Ключ состоит в том, чтобы использовать отзывчивые изображения, чтобы CSS и браузер работали вместе, чтобы обнаружить тип /разрешение устройства и доступную полосу пропускания, а затем доставить соответствующее изображение. Жидкий веб-дизайн с сетками поможет сохранить все вместе.

Я бы не использовал только 1 размер и качество изображения. Это фактически делает мобильные браузеры более усердными, поскольку у них есть больше для загрузки - процесс - отображение. Используя отзывчивые изображения, вы будете поддерживать качество на разных устройствах.

Помните, что вам не нужно делать все изображения «высокого качества». Человеческий глаз не может отличить большинство корректировок в разрешении. Например, при использовании изображения с высоким разрешением с шириной 600 пикселей и последующего масштабирования (с сохранением пропорций) до 80% качества не приведет к изменению человеческого глаза на стандартных устройствах, и, тем не менее, этот файл будет составлять 14% от его первоначальный размер. Поэтому подумайте о том, чтобы уменьшить разрешение ваших изображений до баланса размера и качества. Изображения будут хорошо выглядеть для клиентов, они и ваш веб-сайт будут загружаться быстрее, и это позволит сэкономить полосу пропускания.

Вы можете использовать <scrset> и <size> атрибутов тега <img>, чтобы ваши страницы отображали различные разрешения ваших изображений. И есть способы динамически манипулировать изображениями и автоматизировать этот размер с помощью общих языков, таких как JavaScript. Вот статья, в которой более подробно описываются теги, используемые в отзывчивых изображениях .

ответил Lena Weber 13 12017vEurope/Moscow11bEurope/MoscowMon, 13 Nov 2017 13:42:15 +0300 2017, 13:42:15

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132