1

Суть вопроса такова: как будет лучше для браузера, поисковика, кода и вообще в целом, как лучше вставлять мелкие элементы - как картинку или как css код? В качестве примера приведу такие фото с отзывов (но примеров может быть тысячи)

Пример.

Здесь можно и элементарный код для border и box-shadow написать или же целиком вырезать и вставить как картинку.

4
  • Если у Вы делаете проект, который в перспективе будет расти. То можно предположительно рассчитать, сколько будут весить эти картинки, а сколько будет весить код. По вашему картинка будет больше весить? Или Вам не важна скорость загрузки?
    – Kyper
    12 авг 2018 в 12:29
  • Это обычный лендинг для бизнеса. Проект расти не будет. Но нужно сделать всё красиво с большой скоростью загрузки.
    – Стас
    12 авг 2018 в 13:00
  • Так проверьте сами, здесь работы на 5 мин.
    – E_K
    12 авг 2018 в 13:27
  • Но мне не нужен конкретно этот пример. Я имею ввиду в целом, если на сайте будет 50 таких моментов, где можно вырезать и картинкой и чистым css написать. И так и так будет красиво выглядеть, но как лучше будет для скорости загрузки, браузера, поисковиков?
    – Стас
    12 авг 2018 в 13:36

2 ответа 2

2

Хорошим тоном в верстке сайта является уменьшение объема графики. Удалите ненужные изображения. Там, где это возможно, используйте текст вместо заведомо более тяжёлой графики.

Вы можете использовать одно масштабируемое изображение, но оно будет занимать много места и тормозить загрузку страницы. Лучше использовать несколько изображений, адаптированных под разные устройства, чтобы браузер загрузил нужное — это можно сделать при помощи плагина Imager. Он заменяет плейсхолдеры прозрачными изображениями, подтягивает к каждому атрибут src и назначает нужный размер, после чего вам остаётся только загрузить несколько вариантов изображения разных размеров.

0

В данном примере стоит делать версткой.

Т.к. у вас фотография, обычный jpeg будет весить достаточно мало, jpg с такой рамкой потребует более высокого качества и будет больше весить + только 2+x. Плюс она будет на непрозрачном фоне, а png с фотографией будет весить уже в десятки раз больше.

Поэтому самый оптимальный вариант квадратная аватарка ~ 1.5x (для фотографии достаточное качество для ретины) + border-radius + рамка бордером.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.