Автоматическое указание высоты и ширины картинки

Здравствуйте
На сайте резиновый дизайн, имею трудности с ресайзом изображений и их физическим размером.
Картинки весьма крупные, на разных мониторах и мобильных устройствах смотрятся нормально, но имею проблему с размером этих картинок под мобильные устройства, пример:
Оригинальное изображение 608px × 400px = 91кб
На мобильном устройстве картинка будет смаштабирована до 280px × 184px и все теже 90кб
PageSpeed Insights от Гугла для мобильных устройств говорит 62 / 100:
Оптимизируйте следующие изображения, чтобы уменьшить их размер на 460,6 КБ (76 %).
При этом для ПК результат 92 / 100
Как можно реализовать автовывод width=«ХХ» и height=«ХХ» в атрибутах картинки в зависимости от разрешения картинки в данный момент, что бы после этого применить ресайз phpthumbof

Или какие вообще существуют решения?
MatrixID
MatrixID
11 марта 2015, 11:13
modx.pro
5 219

Комментарии: 13

Сергей Шлоков
Сергей Шлоков
11 марта 2015, 18:02
Я бы посоветовал глянуть на ms2Gallery
    MatrixID
    MatrixID
    11 марта 2015, 18:14
    У меня обычный новостной сайт, в статье/материале 1-2 картинки думаю галерея мне не к чему, может есть еще какие варианты?
    Илья Уткин
    Илья Уткин
    11 марта 2015, 18:29
    А как насчет DirectResize?
      MatrixID
      MatrixID
      11 марта 2015, 19:11
      По ссылке: 3 разные версии от 3х авторов
      DirectResize представляет собой плагин, способный применять выбранный Lightbox к изображениям на сайте. Плагин включает в себя Highslide, ColorBox или prettyPhoto.
      Лайтбокс не сильно то и нужен.
      Пример, на сайт заходят 3 человека:
      1) разрешение монитора 1920х1080
      2) разрешение монитора 1280х1024
      3) разрешение мобильного устройства 320х480
      Сейчас картинки маштабируются через CSS и все устраивает, кроме того что на мобильниках, малюсенькие картинки весят дофига.
      На всех 3х устройствах картинка должна получить свои атрибуты width=«ХХ» и height=«ХХ» и изображение не просто масштабированное, а ресайзнутое.
      По DirectResize мало документации на русском, толком не встречал на примерах принцип его работы, может кто подсказать?
        Alexander V
        Alexander V
        20 марта 2015, 11:36
        У меня с этими плагинами постоянно какие-то проблемы вылезали. Что-то обязательно работало не так, как хотелось.
      MatrixID
      MatrixID
      12 марта 2015, 04:57
      Может снипетом можно выводить атрибуты width и height?
      Если есть у кого наработки — поделитесь плиз!
        Василий Наумкин
        Василий Наумкин
        12 марта 2015, 06:11
        Ты путаешь причину и следствие.
        Как можно реализовать автовывод width=«ХХ» и height=«ХХ» в атрибутах картинки в зависимости от разрешения картинки в данный момент, что бы после этого применить ресайз phpthumbof

        Это атрибуты width и height указывают клиенту, какое разрешение у картинки и бронируют место на странице для неё.
        То есть, выводится пустой прямоугольник для картинки с указанными размерами, в который загружается изображение. Если атрибуты не соответствуют картинке — она будет растянута или скукожена до них.

        width и height не влияют на реальный размер или разрешение файла, они только говорят клиенту, как отобразить его.
        Если атрибуты не указать, то страница будет «дергаться» после полной загрузки файла. Вот и всё.

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

        Но я думаю, что у тебя просто «резиновая» верстка и картинки отображаются по-разному, в зависимости от разрешения экрана. То есть, никакого реального ресайза нет. Файлы одинаковые и для ПК, и для мобильного, отображение файла меняется уже на клиенте.

        Так что, нужно или сделать реальный ресайз изображений для мобильников на сервере (фактически, мобильную версию сайта) или просто оставить как есть и не переживать про циферки в Гугле.
          MatrixID
          MatrixID
          19 марта 2015, 07:20
          сделать реальный ресайз изображений для мобильников на сервере (фактически, мобильную версию сайта)
          ок, если идти этим путем, может есть готовый сниппет определяющий с какого устройства заходит клиент (с ПК или мобльного устройства), и чтобы этот сниппет выводил два вида чанков — одни для мобильной версии, и другие для обычных ПК (не хочу использовать поддомен для этих целей).
          Такое возможно?
        Сергей Фещуков
        Сергей Фещуков
        19 марта 2015, 08:27
        Можно попробовать выводить изображение так:
        <img src="image-for-pc.jpg" data-mobile="image-for-mobile.jpg" />
        Затем с помощью JS подставлять в src малое изображение, если пользователь зашел с мобильного устройства. К примеру:
        if ( isMobile() ) {
    $('img').each(function() {
        $(this).attr('src', $(this).data('mobile'));
    });
}
        Только надо иметь jQuery и определить функцию isMobile. Думаю, идея понятна.
          Виталий Валерьевич
          Виталий Валерьевич
          19 марта 2015, 12:19
          Зачем же так все усложнять, подобное уже успешно и давно реализуется с помощью CSS Media Queries, JS тут абсолютно не нужен.
            Ганин Роман
            Ганин Роман
            24 марта 2015, 02:57
            По умолчанию JS блокирует загрузку страницы (если не обозначен атрибут async). Т. е, пока не загрузится скрипт, рендер DOM останавливается. Вы, по всей видимости, используете jQuery, то есть в худшем случае должен будет сначала загрузится и он (в лучшем — взяться из кэша). Если запускать ваш скрипт на DOM.ready, то велика вероятность, что картинка начнет грузится (лишний запрос к серверу). Потом вы указываете на загрузку новой картинки, которая меньше по размеру…



            Вообще у этой задачу есть несколько решений: вычисление User-Agent перед отдачой файла, LazyLoad, трюк с HighResolution-изображением (>3k px), но высокой степенью сжатия. Можно даже извратиться и использовать media queries, как предлагает Виталий. Все зависит от семантики.
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          13