Размер и разрешение фотографии
Формат фотографии — любой (JPG, TIFF, PNG). Цветность любая, но в итоге фотография будет ч/б.
Фотография должна быть чёткой при увеличение её до 100%!
Размер файла фотографии не должен быть очень маленьким (менее 100 Кбайт) — в большинстве случаев это говорит о его низком качестве.
Разрешение должно быть не меньше 300 dpi.
Геометрические размеры не менее 400 на 500 точек (пикселей), если это портрет. Если фотография в полный рост — то больше.
Не стоит увеличивать размер фотографии до нужных размеров с потерей её качества!
Желательно, чтобы автор фотографии был на однотонном фоне.
ВНИМАНИЕ!
Журнал «THEORY AND PRACTICE
OF PHYSICAL CULTURE»
находится на адресу http://www.tpfk.ru/
Видеобращение профессора
Л.И. Лубышевой участникам Конгресса
Анкета для определения эффективности
развития журнала
в области физкультуры и спорта
С ЮБИЛЕЕМ ТиПФК
«Theory and Practice of Physical Culture» —
новый формат информационного ресурса спортивной науки
Стандарты и технологии спортизации физического воспитания
студентов (круглый стол в Тюмени)
Обсуждение нового российского комплекса «Готов к труду и обороне» на телеканале МИР 24.
Будет ли польза от обновленной
программы спортивной подготовки,
телеканалу «МИР 24» рассказала
доктор педагогических наук,
профессор Людмила Лубышева
Интервью Тюменскому телевидению
на тему доклада «Проектирование инновационных технологий
в системе спортизированного физического воспитания»
Как динамически узнать размеры изображения на сайте
Допустим есть блок, в котором не указанна высота и есть изображение, которое задаёт высоту этому блоку, когда загрузится, но нам не нужно чтобы пользователь увидел как скачит высота блока -> нам нужно задать блоку фиксированные размеры в html, тогда у блока будет постоянные размеры на странице и сайт не будет прыгать пока загружаются все картинки. ТЕПЕРЬ ВОПРОС: Как указывать всем картинкам на сайте фиксированные размеры автоматически, чтобы не приписывать для каждой картинки стили в html с размерами
Отслеживать
задан 2 июл 2019 в 16:59
49 3 3 бронзовых знака
если вам важно сохранить размер, то через сервер с помощью php/python или чем вы будете на сервере работать, ставить блоку-обертке параметры высоты и ширины изображения.
3 июл 2019 в 9:05
Проще будет дождаться окончательной загрузки изображений и показать блок (content) в котором находятся те самые блоки с изображениями.
3 июл 2019 в 10:58
Скорее всего браузер не узнает размер картинок до того как они не будут загружены, тут есть способ stackoverflow.com/questions/6575159/…, но человек все равно увидит скачок. Скорее всего надо узнать размеры на бекенде перед отдачей в браузер. Либо хитрить на странице (комент от @CbIPoK2513)
3 июл 2019 в 12:17
скачет высота блока и постепенно увеличивается — это же разные вещи. Вы, какое определение имели в виду?
Как узнать размер картинки, и для чего нужны разные форматы?
Существует сразу несколько различных форматов изображений. Узнав формат картинки и ее размер, вы сможете грамотно использовать ее для размещения на собственном сайте. Например, знаете ли вы, что для рисунков с небольшим количеством резких переходов лучше использовать формат JPG, а для фотографий с повышенной резкостью — формат PNG?
В этой статье будут рассмотрены способы, позволяющие узнать размер картинки, основные графические форматы, которые используются на просторах интернета, их отличия. К наиболее распространенным форматам изображений относят JPG, PNG, SVG и GIF.
Как узнать размер картинки и зачем это нужно?
Из-за особенностей различных форматов каждая конкретная картинка может оказаться хорошим вариантом в одной ситуации, и плохим в другой. Кроме того, узнав размер картинки, вы сможете определиться, стоит ли загружать ее на сайт — в зависимости от того, сколько весит изображение, оно может положительно или отрицательно влиять на поведенческие факторы.
Слишком большие картинки будут мешать быстрой загрузке сайта, и тем самым повышать процент отказов, ухудшая рейтинг сайта в поисковой выдаче. Низкокачественные, неинформативные и слабо привлекающие внимание пользователей картинки также негативно скажутся на продвижении интернет-ресурса в поисковых системах.
Использование большого количества фотографий также может ухудшить ранжирование сайта, поэтому следует грамотно подбирать размеры и сжимать необходимые изображения, стараясь не потерять в качестве.
Вывод: знать размер картинок — важно, потому что их вес влияет на скорость загрузки сайта, а она в свою очередь оказывает влияние на продвижение.
Как узнать размер фотографии, сохраненной на компьютере?
Чтобы узнать вес фотографии, сохраненной на компьютере, достаточно заглянуть в ее «Свойства». Клик правой кнопкой мыши по изображению и выбор соответствующего пункта в контекстном меню выведет соответствующее окно с информацией о ширине и высоте фотографии в пикселях. Также здесь будет показано разрешение в DPI.
Совет: если нужно узнать размер и разрешение сразу нескольких изображений — откройте вкладку «Вид», затем выберите формат «Детали» и поставьте галочку в боксе «Разрешения». Это позволит узнать размер каждой картинки.
Как узнать размер изображения, размещенного на любом сайте?
Чтобы узнать размер фотографии, размещенной на сайте, воспользуйтесь следующей инструкцией:
- Если вы используете браузер Mozilla Firefox — кликните правой кнопкой мыши по картинке, затем выберите в контекстном меню пункт «Информация об изображении». Это действие выведет информационное окно, в котором будет показан оригинальный размер изображения и его измененный вариант, который используется на сайте.
- Если вы используете браузер Google Chrome — щелкните правой кнопкой мыши по изображению, после чего выберите в контекстном меню пункт «Просмотр кода элемента». В появившемся после этого окне будет виден размер картинки (с правой стороны в цветной рамке). Либо навести мышкой на выделение в правом окне, тогда над выделенной картинкой появится размер картинки.
- В современных версиях браузера Opera узнать размер изображения с помощью встроенных инструментов не получится. Но выход есть! Установите дополнение « Classic Images» , с помощью которого можно узнавать тип, размер, разрешение и адрес картинки. Алгоритм действий такой же, как и в браузере Firefox — клик правой кнопкой мыши, затем пункт «Просмотр свойств изображения».
Какие существуют форматы изображений
Сейчас в интернете применяют четыре основных графических формата — JPEG, PNG, SVG, GIF. Каждый из них имеет свои особенности, используется для определенных ситуаций. Рассмотрим каждый формат изображений более подробно.
JPEG
Наиболее распространенный формат изображений. Лучше всего подходит для фотографий и картинок без резких переходов. При сжатии может терять в качестве, именно поэтому пользователю предлагается на выбор сразу несколько вариантов итогового качества (высокое/среднее/низкое).
PNG
Второй наиболее популярный формат. PNG часто применяют для графических картинок, иллюстраций. Отличительная особенность этого формата заключается в том, что при сжатии и приближении картинки он не теряет в качестве. Кроме того его активно применяют для картинок с резкими, не плавными переходами.
SVG
Этот формат используется для двумерной векторной графики, широко распространен на просторах всемирной путины. Он пользуется особой популярностью при разработке современных сайтов. Файлы формата SVG занимают гораздо меньше места по сравнению с изображениями, сохраненными в других форматах.
Главный недостаток этого формата заключается в том, что с его помощью достаточно трудно создавать сложные объекты, которые нельзя описать с помощью геометрических фигур.
GIF
Занимает много места и может вызвать замедление работы сайта на слабых компьютерах. Тем не менее, применяется для создания GIF-анимаций. Этот формат может быть полезен, при использовании в инструкциях или других форматах контента, в которых важно продемонстрировать поэтапное выполнение какой-то задачи.
Итоги
Размер картинок важно узнавать для внутренней оптимизации сайта. Уменьшение размера используемых картинок позволит увеличить скорость загрузки сайта, что положительно скажется на SEO. Важно стараться уменьшать размер изображений без потери качества, а также необходимо знать, какой формат изображений подойдет для вашей ситуации лучше других.
Чтобы узнать размер изображения, чаще всего достаточно кликнуть правой кнопкой мыши и выбрать соответствующий пункт контекстного меню. Для браузера Opera может потребоваться установка дополнительного расширения.
Как проверить размер изображений на сайте и уменьшить их
Самый тяжелый контент на сайте — это изображения (графика в дизайне и картинки/фотографии в материалах) и видео. И, если, большинство видео грузится только при нажатии кнопки Play, то картинки у большинства посетителей загружаются сразу же вместе с открываемой страницей. Хотя у большей части ваших посетителей нет проблем со скоростью интернета, но точно есть какая-то часть потенциальных клиентов, посещающая ваш сайт через медленные соединения (мобильные сети, например). Для того, что бы эти пользователи чувствовали себя комфортно на вашем сайте, нужно постараться уменьшить как общий вес страниц сайта, так и вес изображений.
Проверить, как долго грузится страница вашего сайта и какой объем имеют отдельные её элементы можно с помощью специальных онлайн сервисов. Найти их можно, задав в поисковой системе запрос вида: «проверить скорость загрузки онлайн». Сегодня мы будем рассматривать сайт с помощью сервиса Pingdom Website Speed Test: 
Вводим в поле адрес проверяемой страницы, жмем кнопку «Test now», ждем несколько секунд, выбираем «Sort by file size» (самые «тяжелые» элементы страницы отобразятся вверху списка) и смотрим результаты: 
Общий вес страницы — 930.5kB — почти мегабайт — многовато. Смотрим, какие же элементы проверяемой страницы весят больше всего. Как видно из скриншота выше, это скрипт вывода Яндекс карты и несколько картинок. Отображение карты — схемы проезда у нас выводится на всех страницах сайта — это повод задуматься — а нужна ли карта на каждой странице? Может, достаточно схемы проезда на странице контактов, а на всех остальных страницах оставить только текстовый адрес? Но этот пост об изображениях, поэтому переходим к ним.
Возвращаясь к последнему скриншоту, видим после скрипта карт по объему лидируют три картинки, их оптимизацией мы и займемся. Для оптимизации размера изображений можно использовать графический редактор или онлайн сервис. Здесь мы рассмотрим второй вариант.
Уменьшение объема (веса) изображения с помощью онлайн сервисов
Онлайн сервисов, позволяющих уменьшить объем изображений без заметной потери качества существует много. Найти их можно, в любом поисковике вбив запрос «оптимизация изображений онлайн». Для оптимизации изображений в PNG формате я использую сервис TtinyPNG (есть как в виде онлайн сервиса, так и в виде плагина для Photosop), загружаем туда файл audit.png и получаем следующий результат:
Файл стал меньше на 76% или 88kB! Но что же с качеством? Смотрим:
Файл до оптимизации (586*400 px, 113 kB):
Файл после оптимизации (586*400 px, 27 kB):
Как видим, на взгляд разницы не заметно, зато файл уменьшился в несколько раз.
Аналогичную операцию проделываем с другими громоздкими файлами с нашего сайта, отключаем отображение карты в подвале сайта на всех страницах, и запускаем заново тест скорости загрузки:
Как видим, проделав простые операции, описанные выше, мы сократили общий вес страницы более, чем в два раза, и увеличили скорость загрузки почти в два раза. На всё про всё было потрачено довольно мало времени, а для пользователей вашего сайта, использующих медленный интернет, ваш сайт стал в два раза быстрее! А улучшение удобства использования сайта повлечет за собой рост звонков/заказов/покупок.
Хороших вам конверсий!
Другие материалы по теме:
- Как проверить нет ли дублей страниц по разным URL адресам сайта
- Индексируется ли сайт поисковиками, нет ли фильтров от ПС
- Как проверить отсутствие лишнего html кода в коде страниц
- Создали красивый сайт, а клиентов нет? Нужно начать его продвижение!
- Правильные ли коды отдает хостинг (200, 404 и т.д.), настроена ли 404-я страница
Понравилась статься? Подпишитесь на обновления: