как узнать вес фото
Как проверить размер изображений на сайте и уменьшить их
Самый тяжелый контент на сайте — это изображения (графика в дизайне и картинки/фотографии в материалах) и видео. И, если, большинство видео грузится только при нажатии кнопки 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):
Как видим, на взгляд разницы не заметно, зато файл уменьшился в несколько раз.
Аналогичную операцию проделываем с другими громоздкими файлами с нашего сайта, отключаем отображение карты в подвале сайта на всех страницах, и запускаем заново тест скорости загрузки:
Как видим, проделав простые операции, описанные выше, мы сократили общий вес страницы более, чем в два раза, и увеличили скорость загрузки почти в два раза. На всё про всё было потрачено довольно мало времени, а для пользователей вашего сайта, использующих медленный интернет, ваш сайт стал в два раза быстрее! А улучшение удобства использования сайта повлечет за собой рост звонков/заказов/покупок.
Хороших вам конверсий!
Другие материалы по теме:
Понравилась статься? Подпишитесь на обновления:
Как узнать размер картинки, и для чего нужны разные форматы?
Существует сразу несколько различных форматов изображений. Узнав формат картинки и ее размер, вы сможете грамотно использовать ее для размещения на собственном сайте. Например, знаете ли вы, что для рисунков с небольшим количеством резких переходов лучше использовать формат JPG, а для фотографий с повышенной резкостью — формат PNG?
В этой статье будут рассмотрены способы, позволяющие узнать размер картинки, основные графические форматы, которые используются на просторах интернета, их отличия. К наиболее распространенным форматам изображений относят JPG, PNG, SVG и GIF.
Как узнать размер картинки и зачем это нужно?
Из-за особенностей различных форматов каждая конкретная картинка может оказаться хорошим вариантом в одной ситуации, и плохим в другой. Кроме того, узнав размер картинки, вы сможете определиться, стоит ли загружать ее на сайт — в зависимости от того, сколько весит изображение, оно может положительно или отрицательно влиять на поведенческие факторы.
Слишком большие картинки будут мешать быстрой загрузке сайта, и тем самым повышать процент отказов, ухудшая рейтинг сайта в поисковой выдаче. Низкокачественные, неинформативные и слабо привлекающие внимание пользователей картинки также негативно скажутся на продвижении интернет-ресурса в поисковых системах.
Использование большого количества фотографий также может ухудшить ранжирование сайта, поэтому следует грамотно подбирать размеры и сжимать необходимые изображения, стараясь не потерять в качестве.
Вывод: знать размер картинок — важно, потому что их вес влияет на скорость загрузки сайта, а она в свою очередь оказывает влияние на продвижение.
Как узнать размер фотографии, сохраненной на компьютере?
Чтобы узнать вес фотографии, сохраненной на компьютере, достаточно заглянуть в ее «Свойства». Клик правой кнопкой мыши по изображению и выбор соответствующего пункта в контекстном меню выведет соответствующее окно с информацией о ширине и высоте фотографии в пикселях. Также здесь будет показано разрешение в DPI.
Совет: если нужно узнать размер и разрешение сразу нескольких изображений — откройте вкладку «Вид», затем выберите формат «Детали» и поставьте галочку в боксе «Разрешения». Это позволит узнать размер каждой картинки.
Как узнать размер изображения, размещенного на любом сайте?
Чтобы узнать размер фотографии, размещенной на сайте, воспользуйтесь следующей инструкцией:
Какие существуют форматы изображений
Сейчас в интернете применяют четыре основных графических формата — JPEG, PNG, SVG, GIF. Каждый из них имеет свои особенности, используется для определенных ситуаций. Рассмотрим каждый формат изображений более подробно.
Наиболее распространенный формат изображений. Лучше всего подходит для фотографий и картинок без резких переходов. При сжатии может терять в качестве, именно поэтому пользователю предлагается на выбор сразу несколько вариантов итогового качества (высокое/среднее/низкое).
Второй наиболее популярный формат. PNG часто применяют для графических картинок, иллюстраций. Отличительная особенность этого формата заключается в том, что при сжатии и приближении картинки он не теряет в качестве. Кроме того его активно применяют для картинок с резкими, не плавными переходами.
Этот формат используется для двумерной векторной графики, широко распространен на просторах всемирной путины. Он пользуется особой популярностью при разработке современных сайтов. Файлы формата SVG занимают гораздо меньше места по сравнению с изображениями, сохраненными в других форматах.
Главный недостаток этого формата заключается в том, что с его помощью достаточно трудно создавать сложные объекты, которые нельзя описать с помощью геометрических фигур.
Занимает много места и может вызвать замедление работы сайта на слабых компьютерах. Тем не менее, применяется для создания GIF-анимаций. Этот формат может быть полезен, при использовании в инструкциях или других форматах контента, в которых важно продемонстрировать поэтапное выполнение какой-то задачи.
Итоги
Размер картинок важно узнавать для внутренней оптимизации сайта. Уменьшение размера используемых картинок позволит увеличить скорость загрузки сайта, что положительно скажется на SEO. Важно стараться уменьшать размер изображений без потери качества, а также необходимо знать, какой формат изображений подойдет для вашей ситуации лучше других.
Чтобы узнать размер изображения, чаще всего достаточно кликнуть правой кнопкой мыши и выбрать соответствующий пункт контекстного меню. Для браузера Opera может потребоваться установка дополнительного расширения.
Пожалуйста, опубликуйте ваши комментарии по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, дизлайки, подписки, отклики, лайки!
Влад-А
Создание сайтов в Твери и SEO продвижение
Как уменьшить вес фотографии jpeg
Вопрос об уменьшении веса фотографий актуален для тех, кто только начал усваивать современные технологии и работать в интернете. Прежде чем говорить о том, как уменьшить вес (размер в мегабайтах) фотографии jpeg, нужно прояснить два вопроса. Первый – как узнать вес фотографии, второй – зачем нужно уменьшать её вес.
Узнаём вес (размер) фотографии
Быстрее всего это сделать можно так. Делаем клик по фотографии (если она лежит у вас на компьютере) левой кнопкой мыши, после чего появится всплывающее окно, в котором показаны:
Более подробную информацию об изображении можно узнать, кликнув по нему правой кнопкой мыши и выбрав команду «свойства».
Зачем нужно уменьшать вес фото jpeg
Предположим, вы скачиваете красивое фото, например, с сайта под названием Unsplash. В заголовке этого сервиса сказано – do whatever you wont, то есть «делайте что хотите». И вы делаете что хотите, загружая с этого сервиса много всяких красивых фотографий на сайт.
Затем вы замечаете, что страницы вашего сайта стали как-то медленно загружаться. И вскоре вы получаете письмо от своего хостера с предупреждением о том, что выделенное вам место на хостинге заканчивается с предложением перейти на более высокий тарифный план.
Конечно, я здесь утрирую, но вполне возможно, что такое может произойти, если не проверять вес загружаемых на сайт фотографий. Некоторые фотографии с высоким разрешением имеют большой размер, и загружать их на сайт без предварительной оптимизации нецелесообразно.
Как уменьшить вес фотографии онлайн?
На сегодняшний день существует много онлайн сервисов для обработки фото. Возьмем, например, многим известный сервис Online Photo Editor Pixlr. Заходим на него и открываем вкладку «файл». Если изображение находится на вашем компьютере, выбираем команду «открыть изображение», если фото находится где-то в интернете, выбираем опцию «открыть Url изображения». Далее загружаем картинку, которую нужно уменьшить и там же во вкладке «файл» жмём на «сохранить».
Сразу же перед вами всплывёт окно, в котором ваша фотография будет уже в облегчённом варианте. Здесь же можно изменить расширение файла, например, с jpeg на png и дать ему новое имя. Качество полученного изображения будет достаточно высокого уровня и непрофессионалу отличить её от оригинала будет очень сложно.
Уменьшаем вес фотографии в программе Photoshop
В этом случае мы практически повторяем все вышеупомянутые действия. Единственное отличие будет в том, что мы обрабатываем фото с помощью программы, установленной на своём ПК. Для этого нужно открыть фотографию, кликнув по ней правой кнопкой мыши, а затем выбрать команду «открыть с помощью» и, наконец, выбрать Photoshop.
После того как появится ваша фотография в окне программы во вкладке «файл», найдите команду «сохранить для Web…». В открывшемся окне появится два варианта фотографии: оригинал и копия. В правом верхнем углу можно отрегулировать качество фотографии. Чем меньше оно будет, тем меньше будет вес изображения. Лучше качество оставить то, которое предлагает программа по умолчанию. Сохраняете фото, дав ему новое имя и вуаля – у вас значительно облегчённый jpeg файл, готовый к загрузке на сайт.
Уменьшаем вес фото онлайн бесплатно и быстро
Многие из нас имеют профиль Вконтакте. В этой популярной социальной сети размещены миллионы изображений. Разработчики этой сети встроили в её код механизм сжатия изображений без потери их качества. Чтобы уменьшить вес фото онлайн бесплатно и быстро, просто загрузите его на свою страницу Вконтакте. При этом даже не обязательно его сохранять там. Сделайте клик правой кнопкой мыши по фотографии и выберите уже знакомую вам команду «сохранить как», дайте ей новое имя. Это всё. Фото будет в два или даже три раза легче, чем оно было до этого.
Уменьшаем вес фото с помощью расширения для браузеров Lightshot
И, наконец, уменьшить фото можно, установив в своем браузере инструмент для быстрой обработки картинок Lightshot. Его можно устанавливать во все популярные браузеры с магазинов дополнений. После установки расширения, в правом верхнем углу браузера появится значок «пёрышко». Чтобы активировать этот инструмент, сделайте по нему клик мышей.
Когда вы увидите на каком-либо сайте понравившееся вам изображение, просто активируйте Lightshot. Выделите границы кадра, проведя зажатой левой кнопкой мыши от одного края изображения к другому. Затем сохраните его, нажав на кнопку «сохранить», которая появится в углу рабочей зоны вместе с другими инструментами. Изображение будет значительно «легче» оригинала, так как сервис Lightshot сжимает его для того, чтобы им можно было поделиться в социальных сетях или загрузить в «облако».
Заключение
В этой статье вы узнали четыре способа о том, как можно уменьшить размер фотографии с помощью разных инструментов. Тема эта не глубокая, но важная, поскольку это относится к внутренней оптимизации сайтов. Если вы получили пользу от этого материала, пожалуйста, откликнитесь в комментариях или поделитесь им в социальных сетях.
Рекомендую прочитать статью “Как сделать картинку на сайте уникальной”. Это вам очень поможет, для SEO оптимизации изображений на сайте.
Уменьшить и увеличить фото онлайн
Представим, что для вас стал актуальным вопрос о том, как изменить размер картинки без фотошопа? Вы при этом в интернете, и вам необходимо обрезать фото или картинку для анкеты. Вы правильно поступите, если сидя у компьютера, или с планшетником, или со смартфоном в руках, зайдете на сайт.
Ведь на этом ресурсе можно воспользоваться приложением по обрезке фото онлайн. Обращаем внимание на то, что приложение поддерживает форматы gif, bmp, jpg, png. Оно находится в блоке «Работа с изображениями» под названием «Обрезка изображений».
И, выполняя здесь несложные операции, мы изменяем размер изображения. Ведь, как и все прочее в рамках сервиса, данное приложение очень просто в использовании. Оно предоставляет возможность получить качественный результат очень быстро.
Мы с его помощью изменяем размер фото. Мы обрезаем его. А для этого необходимо всего-то произвести загрузку нужного изображения, выбрать нужный для обрезки фрагмент и нажать клавишу «Вырезать», предварительно получив информацию о размерах будущей картинки. То есть процесс предусматривает процентное увеличение или уменьшение изображения. Всегда есть возможность посмотреть, как ты обрезал фото, а потом сохранить его.
Какие еще возможности предоставляет приложение
Когда мы изменяем размер фото онлайн, то это вовсе не означает, что весь процесс, который занимает считанные секунды, сводится к тому, чтобы просто обрезать картинку онлайн.
Тот, кто работает с изображением, может еще потратить дополнительно (но буквально считанные) секунды, чтобы при необходимости повернуть фото или отразить его зеркально. Но и этим все вовсе не ограничивается. Можно также добавить красивые эффекты или рамку. И всего-то требуется сделать несколько кликов.
Нет ничего удивительного в том, что пользователями сайта являются люди самых разных профессий, возраста и даже увлечений. Все потому, что некоторые предпочитают не искать нужное им приложение на разных интернет-ресурсах. А указанный онлайн-сервис тем и хорош для многих, что в нем сосредоточены самые разные, но часто используемые приложения.
И многие из числа тех, кто проводят массу времени в мировой паутине (в том числе и для того, чтобы изменить фото), попадают на сайт вполне закономерно. Будь он дизайнер или вебмастер, журналист или автомобилист. Ведь сюда ведут многие ссылки в интернете, да и сервис всем доступен без регистрации.
Сервис к тому же бесплатный. Его можно использовать при подготовке фото и музыки для блогов и сайтов. Ко всему нет необходимости в загрузке файлов, установке и последующем обновлении программ.
Это положительно оценивает и тот, кто занимается профессионально фотографией, и тот, для кого проводить время с фотоаппаратом – просто большое увлечение. Ведь на сайте есть для них подходящее приложение. Например, для того, кто мучается вопросом, как изменить размер изображения?
Зачем нужна такая функция
Причина, по которой тот или иной пользователь интернета вынужден искать для применения фоторедактор онлайн, может быть разной. Но, как показывает опыт, обычно это вызвано именно необходимостью быстро изменить размер фото.
И это обычно бывает так. Допустим, кому-то необходимо загрузить редактируемое изображение на сайт. К примеру, как аватарку «ВКонтакте». Как правило, на большинстве ресурсах в глобальной сети для изображений, которые заливают на сервис, предусмотрено ограничение по его габаритам. А это в конкретном случае означает, что необходимо изменить размер фото онлайн.
Без этого никак не обойтись. Однако ограничение предусмотрено не только для габаритов. Ограничение распространяется также и на вес изображения. То есть проблема требует такого решения, когда нужно уменьшить фото. А это очень просто сделать, используя фоторедактор онлайн.
А вот к функции «увеличить фото» прибегают тогда, когда необходимо увеличить размеры изображения. Также как и уменьшение фото, эта функция находит применение, когда кто-то очень часто обрабатывает изображение.
Для более детальной характеристики популярного сервиса следует упомянуть и про такую «фишку», как фотографии в стиле Instagram. То есть с данном случае сервис предоставляет возможность не только изменить размер, но и придать желаемый вид фотографиям. Причем мы говорим про те случаи, когда у вас при себе нет мобильного устройства и аккаунта в Инстаграм.
Уверяем, что на персональном компьютере заниматься обработкой фотографий намного удобней и приятней. Функция «фото в стиле Инстаграм» действует точно так же, как и обрезка фотографий онлайн. Это означает следующее: вам необходимо загрузить фотографию, наложить эффекты и потом сохранить на свой компьютер. Так, в частности, можно сделать эффект старой фотографии из обычного снимка.
Размер, вес и формат фотографий
Почти все фото камеры могут сохранять фотографии в формате JPG (даже камеры телефонов и планшетов). Во всех зеркальных и без зеркальных камерах, а так же в продвинутых компактах в дополнение к JPG есть, как минимум, RAW и RAW+, и иногда TIFF.
Чтобы разобраться с форматами, для начала нужно договориться, что подразумевается под понятиями «размер» фотографии и «вес» файла (фотографии). Предлагаю рассмотреть эти понятия на более осязаемых объектах. например, на вкусностях.
1 | Что такое пиксель:
2 | Можно ли пиксели перевести в сантиметры:
Чтобы вы не ломали голову над делением размера фото на разрешение и не переводили дюймы в сантиметры, в любой программе для просмотра и редактирования фото (например, в Photoshop) есть функция просмотра размера изображения фото в сантиметрах. Она вам понадобится, чтобы понять, какого максимального размера фотографию в хорошем качестве (с разрешением 300 dpi), вы сможете напечатать на бумаге или другом материальном носителе.
Например, это фото с тропическими цветами Франжиспани, можно напечатать размером 61 см на 32 см.
Размер фотографии в пикселях и сантиметрах в программе Photoshop
Чтобы узнать размер фото в пикселях и сантиметрах в программе Photoshop, нужно нажать комбинацию клавиш Alt+Ctrl+I или зайти в меню Image (Изображение) ►Image size (Размер изображения).
Теперь попробуем «растянуть» фото на всю страницу:
Растянутая картинка выглядит мутной и нечёткой
Как видите, детализация уже не та, так как часть пикселей (а вместе с ними и деталей) отсутствует.
Конечно, если использовать эту уменьшенную картинку как маленькую иконку или небольшое изображение в презентации Power Point, то будет смотреться вполне нормально, но вот для печати в журнале на пол страницы она явно не подойдёт.
3 | Какой размер фотографии (сколько пикселей) оптимален:
Если же вы планируете когда-нибудь печатать фото, то сохраняйте фото в максимально возможном разрешении, которое только позволит ваша камера (внимательно изучите инструкцию к вашей камере, чтобы правильно настроить размер фото).
В некоторых случая нужно уменьшать размер фотографий. Как я писала выше, для сайта я уменьшаю размер фото до 1200 пикселей по длинной стороне. Если загрузить фото в полном размере, страницы сайта будут очень долго загружаться, а это многим посетителям может не понравится (не говоря уже о поисковиках Гугл и Яндекс).
Размер фотографий измеряется в пикселях (px). От количества пикселей зависит размер фото на экранах мониторов, и какого размера можно напечатать фотографию.
4 | Размер файла или «вес фотографии»:
Теперь разберёмся с «весом фотографии». Так уж исторически сложилось, что в этом вопросе много путаницы и размер файла довольно часто называют «весом фотографии», что скорее удобно, чем правильно. Размер файлов измеряется мегабайтами (МВ) или килобайтами (КВ). И тут стоит помнить, что в отличии от килограммов, где 1 кг = 1000гр, 1 мегабайт = 1024 килобайт.
Как это выглядит на практике: представим ситуацию, что в вашем фотоаппарате есть карта памяти на которой написано 64GB (гигабайта). Если посмотреть, сколько же там именно этим байтов (на компьютере правой кнопкой мыши выбрать «свойства»), то окажется, что на этой карте памяти 63567953920 байт и это равно 59,2 GB. От того, насколько большие файлы создаёт ваша камера, зависит, как много фото поместится на этой карте памяти. Например, у меня помещается 830 файлов с фото в формате RAW (о форматах читайте ниже).
От чего завит размер файла:
Если вы спросите, какого размера фото я могу напечатать с фотографии, которая весит 2МБ. Никто вам не сможет ответить, пока не узнает количество пикселей. А лучше, конечно, ещё и взглянуть на фото, так как некоторые умельцы любят доставать фото из глубин интернета, увеличивать количество пикселей программно, а потом хотеть напечатать её на обложке журнала. Получается как на примере выше с растянутой фотографией вазочки шириной 150 px.
Размер файла (часто называют «вес фотографий) измеряется в мегабайтах (МВ) или килобайтах (КВ) и зависит от формата, размера в пикселях и детализайии фотографии.
5 | Форматы фото:
И, наконец-то, мы подошли к вопросу форматов изображения и типа сжатия файлов, от которых тоже зависит размер файла с фото.
Практически все фото камеры могут сохранять фотографии в формате JPG (даже камеры телефонов и планшетов). Это самый распространённый формат изображений и его «понимают» все компьютеры и программы для просмотра изображений. В формате JPG фото можно загружать в соц сети, выкладывать в блоге, добавлять в файлы Word, Power Point и так далее. JPG можно обрабатывать в Фотошопе, Лайтруме и других программах для редактирования изображений.
Из моей практики: если я хочу сделать фото для соц сети и быстро его загрузить, то я или фотографирую на телефон, или ставлю в своей камере формат файла jpg.
При сохранении файла в формате jpg выбирается степень сжатия (пример из программы Photoshop).
Во всех зеркальных и без зеркальных камерах, а так же в продвинутых компактах в дополнение к JPG есть как минимум RAW, и часто ещё и TIFF.
Лично я никогда не фотографирую в формат TIFF. Не могу даже придумать, зачем мне это нужно, если есть RAW. TIFF без сжатия я могу использовать для сохранения фото, которые ещё планирую доработать в программе Photoshop.