Задать вопрос
  • Оптимизация больших изображений для сайта?

    @pu6elozed
    Bitrix, fullstack
    По пунктам:
    1. Используйте современные форматы изображений - гугл хочет чтобы на сайте использовались более легкие(не всегда, но в большинстве случаев) варианты изображений в формате допустим .webp
    2. Настройте эффективную кодировку изображений - значит что изображения слишком много весят
    4. И самое главное, что влияет на все предыдущие пункты - некорректное соотношение размера отображаемого изображения - его визуальному размеру. К примеру - у вас изображение 2500px, действительно ли его нужно отображать на смартфонах в полный размер. или достаточно превью?
    <article>
      <img srcset="https://dummyimage.com/2560x400/333/fff 2x,
                   https://dummyimage.com/1280x400/333/fff 1x"
           sizes="(min-width: 1280px) 1280px, 100vw"
           alt="A title">
    </article>

    По вышеописанному коду для современных мобильных используется srcset=https://dummyimage.com/2560x400/333/fffтак как у них плотность пикселей 2x. PageSpeedInsights эмулирует отображение на аналогичном смартфоне.
    Для более гибкого подхода в html5 появился элемент picture. Подробнее посмотреть советую у Вадима Макеева в этом же видео подробно разбирается оптимизация графики для сайта.
    На примере вашего кода можно сделать набросок
    <picture>
        <!-- source для браузеров поддерживающих webp, соответственно srcset тоже должен указывать на webp-->
        <source type="image/webp" srcset="https://dummyimage.com/575x150/333/fff 1x, https://dummyimage.com/1150x300/333/fff 2x," media="(max-width: 575px)">
         <!-- source для браузеров не поддерживающих webp -->
         <source srcset="https://dummyimage.com/575x150/333/fff 1x, https://dummyimage.com/1150x300/333/fff 2x," media="(max-width: 575px)">
        ...  <!-- все остальные необходимые размеры, вроде планшетов и т.д. -->
        <!-- fallback для браузеров не поддерживающих элемент picture -->
        <img src="https://dummyimage.com/2560x400/333/fff" alt="A title">
    </picture
    Ответ написан
    1 комментарий
  • Где можно посмотреть размеры элементов в мобильном дизайне?

    globuzer
    @globuzer
    gezgrouvingus progreszive ombusgrander greyderzux
    В гугле забиваете "ios guidelines" - это для ios, "android guidelines" - это для android, и так далее, что интересует. И первой строкой в выдаче будет официальный гайдлайн по дизайну и архитектуре построения приложений на той или иной платформе, там все обычно расписывают вплоть до пиксилей...
    Также посмотрите и блоги, статьи, сайты, что идут в выдаче поиска ниже, после отработки вашего запроса - очень часто попадаются хорошие статьи, в том числе анг+рус версии именитых дизайнеров, где описаны все эти вещи. Ну или даже попадаются шаблоны и примеры. Их куча.
    Главное соответствовать гайдлайнам, тогда будет продукт смотреться на общем фоне данной платформы унифицировано, стандартно, качественно.
    Ответ написан
    1 комментарий