Бесплатные онлайн сервисы для сжатия картинок. Онлайн сервис TinyPNG
Здравствуйте, дорогие читатели! В данной статье мы с вами рассмотрим несколько полезных онлайн сервисов для уменьшения веса картинок и фотографий без существенного изменения качества. Хотя есть один сервис, где можно сжать картинку до минимальных значений, но качество тоже будет оставлять желать лучшего.
Данная тема оптимизации изображений, в основном, интересует владельцев сайтов или блогов. Скорость загрузки страниц имеет большое значение в продвижении. Поисковым системам нравятся оптимизированные вебресурсы.
Плюс онлайн сервисов в том, что не нужно устанавливать специальные программы себе на компьютер. Процесс сжатия проходит в режиме реального времени и не требует каких-то специальных навыков. Все до безобразия просто. Минус данных сервисов только один – нужно подключение к сети интернет.
Перейдем к обзору трех интернет ресурсов. Каждый из них имеет свои особенности.
Онлайн сервис TinyPNG
Сервисом TinyPNG можно сжимать до 20 изображений и максимальным размером 5 МВ. Работает с форматами PNG и JPEG.
Буквально в два клика происходит оптимизация картинки — загружаете ее на сайт, происходит автоматическое сжатие, затем сохраняете на свой компьютер. Сжатый фрагмент, практически ничем не отличается от оригинального.
Онлайн сервис PunyPNG
PunyPNG тоже простой вебресурс. Работает с форматами PNG, JPEG и GIF. Загружать можно до 20 файлов. Прямо на сервисе будут видны результаты сжатия и процентное соотношение с изначальным.
Онлайн сервис Picresize
Picresize – это единственный из представленных сервисов, где можно устанавливать размер итогового результата. Работает с форматами PNG, JPEG, GIF и BMP.
После загрузки изображения на сайт, можно настроить его размер. No change – исходный размер (без изменений).
Данный сервис позволяет преобразовывать один формат изображения в другой.
В формате JPEG можно задавать желаемый размер файла в килобайтах.
После произведенных настроек, сохраняем изображение на свой компьютер.
Приветствую, вас друзья! Наверняка новички сталкивались с такой проблемой, когда есть желание прорекламировать на своём сайте партнерский продукт, но в рекламном арсенале его автора баннеры имеют в ширину больше, чем ширина сайдбара вашей темы.
Что делать, ведь попытка вставить баннер большей ширины, чем ширина сайдбара, может привести к неправильной работе сайта? Скажу сразу — не паниковать! Это вовсе не проблема, а просто ситуация, выход из которой очень даже простой.
Всё, что вам понадобится, всегда есть у вас под рукой. Собственно, для работы понадобится любой графический редактор, в котором вы работаете.
Вы можете для дальнейшей работы скачать его с этой страницы, но можете и не скачивать, потому что для последующей работы достаточно просто скопировать ссылку.
Затем откройте сервис Фотошоп онлайн . В меню «Файл » выберите команду «Открыть URL изображения ». У вас откроется окно, в котором необходимо будет ввести скопированную ссылку и после этого нажать кнопку «Да ». Изображение баннера загрузится непосредственно в сервис.
Теперь на вкладке «Изображение » выберите команду «Размер изображения ». В открывшемся окне задайте необходимую ширину и нажмите кнопку «Да ». При этом убедитесь, чтобы был отмечен чекбокс «Сохранить пропорции ». Для примера я ввёл значение новых размеров баннера 200 на 200 пикселей.
Баннер сразу уменьшается в размерах.
Вам только остается зайти на вкладку «Файл » и выбрать команду «Сохранить ». В открывшемся после этого окне задайте имя файла (желательно на латинице), уточните его качество (от 80 до 100%), нажмите кнопку «Да » и сохраните новый баннер в нужное место (откроется проводник).
Баннер готов! Загружайте его на сайт в медиафайлы или на ваш любимый фотохостинг. После этого внесите изменения в оригинальную ссылку от автора партнерской программы:
Если у вас остались какие-то вопросы, то посмотрите видео ниже от моего помощника Сергея Почечуева, в котором наглядно показан весь описанный процесс уменьшения баннера в сервисе «Фотошоп онлайн ».
Тем, кто хотя бы немного умеет работать в программе Photoshop рекомендую посмотреть следующее видео. Оно тоже по данной тематике и в нём показан порядок действий применительно к данной программе. Он немного отличается, хотя алгоритм остается прежним.
Напоследок предостерегу вас от копирования исходного кода на партнерский баннер непосредственно из данной статьи. На практике вы должны скопировать оригинальную ссылку из своего партнерского аккаунта и работать именно с ней.
Ещё добавлю, что после размещения баннера на своем сайте, обязательно проверьте его работоспособность. И если он работает, как часы, то значит у вас всё получилось, и я вам желаю успешных партнерских продаж.
Обсуждение: 6 комментариев
Хотя при наличии смелости все-таки легче вписать маленькую добавку в HTML.
Ответить
Спасибо)) Наша команда старается для вас))
Ответить
Евгений, здравствуйте! Статья очень полезная, ненадо заморачиваться с html-кодом, быстро и удобно. В «техничке» вроде бы уже не дилетант, но пользоваться буду с удовольствием. Жаль что фотошоп онлайн не нашла раньше. Спасибо большое за подробную статью! 🙂
Ответить
Евгений, ваша статья очень поможет многим блогерам. Не один раз видел на блогах печальную картину, когда баннеры выходят за рамки и закрывают контент.
Все никак не могу добраться до этого «сказочного» фотошопа, пользуюсь paintnet-ом, привык уже видимо 🙂 Хотя размер изображения наверное в любой программе-редакторе можно поменять.
И все-таки очень хотелось бы освоить все инструменты в совершенстве фотошоп-редактора.
Ответить
Евгений большое спасибо,вам и вашей команде. Я много раз пытался создать сайт или блог,но бросал эту затею как дело доходило до технических моментов. Все планы рушились об эту стену.Да вот еще что Вы не подскажете как скопировать зти статьи, а то не удобно искать.Еще раз СПАСИБО...
Ответить
С видео обзора я узнала о сервисе Фотохостинг Япикс yapx.ru, который предназначен для работы с контентом, ознакомилось с условием Япикс и зарегистрировалось на нем. На сервисе Япикс есть разные возможности выбор картинки, редактирование своих картинок и скачивание GIF-анимации с сайта. Благодарю Вас за предоставленную интересную информацию. Успехов Вам и весеннего солнечного настроения!
Ответить
Частенько требуется баннер уменьшить в размере байт. Вес файла баннера - это количество информации о нём. Чтобы облегчить вес баннера, необходимо уменьшить количество информации:
1. Web-цвета. Используйте web-цвета, смешанные оттенки RGB содержат больше информации. В web-цвета (индексированные цвета) можно перевести картинки в Photoshop, а также использовать в работе в Adobe Flash при размещении фона, цвета текста и элементов, рисование.
2. Сократить количество цветовых оттенков в разумных пределах. Чем больше цветовых оттенков, тем больше весит файл. Попробуйте сохранить картинки в более сжатом виде, а сжатие это и есть сокращение оттенков путем объединения подобных оттенков. Поможет гауссовское размытие картинок, задание низкого качества эффектов, пересохранение картинок в низком качестве. Старайтесь в заливках поменьше использовать градиенты, текстуры. По возможности замените текстуры и градиенты их созданием с помощью скриптов.
3. Заменить растровые картинки рисунками в кривых. Кривые несут в себе меньшее количество информации, чем растровый рисунок. Постарайтесь не растрировать текст и объекты, созданные в кривых.
4. Сократить количество узлов в кривых в разумных пределах. Большое количество лишних узлов утяжеляет вес баннера, сохраняя информацию о них в файле. Потому постарайтесь перепроверить сложные рисунки, созданные в кривых.
5. Использовать символ для анимации. Символ сохраняется в Библиотеке и уже используется информация о нем + информация о действиях. А вот использование в анимации объектов без символов может утяжелить файл, т.к. с каждой копией объекта при его анимации копируется информация о нем; если делаете 100 кадров с анимацией объекта, то информация об объекте увеличивается в 100 раз, а если в анимации использовать символ, в котором будет размещен объект, то информация остается единожды. К тому, же с символами удобно работать. И постарайтесь в анимации создавать поменьше контрольных точек, которые будут нести информацию о действиях. Лучше удалите лишние контрольные точки анимации и подкорректируйте поведение анимации и кривые пути.
6. Использовать скрипты в разумных количествах. Скрипты AS 2 и AS 3 в некоторых случаях могут давать нагрузку и торможение воспроизведения на слабых компьютерах, а также утяжелять файл. Такое бывает при использовании очень ёмких и воспроизведении скриптов или их неограниченного количества. Это баннер, а не флеш-игра или приложение. Тем более баннер используется в малом временном промежутке - прокрутили 1 день или месяц и заменили на новый. Потому не усложняйте себе работу, выделяйте важные для зрителя части, превратите баннер не во взрыв, а в театр или действия с пользователем, тем самым вы повышаете интерес и кликабельность, а вот лишние спецэффекты частенько мешают увидеть важную информацию на баннере.
7. Использовать компьютерные шрифты, сократить внедренные шрифты. Информации о компьютерных шрифтах (шрифт устройства) меньше, т.к. сам шрифт установлен с Windows и используется во всех браузерах. А вот шрифты, которые необходимо внедрять для воспроизведения в браузерах других пользователей, содержат большую информацию. Постарайтесь не нагружать баннер огромным количеством сторонних шрифтов, тестируйте вес баннера при внедрении шрифтов. Постарайтесь внедрять шрифт частично, если используете кириллицу, то внедряйте часть кириллицы шрифта, не забудьте проверить есть ли пунктуация, цифры. Можно использовать сочетание шрифтов компьютерных (устройства) и сторонних шрифтов, используйте один внедренный сторонний шрифт в нескольких местах, чем пять различных сторонних шрифтов.
Способы облегчения баннера тестируйте в процессе. Возможно достаточно применить пункт 1.
Свои замечания и советы как уменьшить вес баннера пишите в комментариях. Пригодится всем! =)
Технологии улучшаются и скорость интернета растет, а в веб-разработке (в частности мобильной) погоня за уменьшением веса страницы и за скоростью загрузки данных при медленном соединении продолжается. Так, сегодня речь пойдет о том, как можно уменьшить вес страницы, чтобы она быстренько попала к пользователю на девайс.
1) Активируйте GZIP
gzip (GNU Zip) - утилита сжатия и восстановления (декомпрессии) файлов, использующая алгоритм DEFLATE. Используется в основном в UNIX-системах, в ряде которых является стандартом де-факто для сжатия данных.
Когда клиент запрашивает через браузер страницу, на сервере данная страница сжимается с помощью gzip . В результате, размер страницы заметно сокращается, и после этого она отдаётся браузеру. Поскольку размер значительно меньше, то и загружается в браузере она намного быстрее. Браузер, получив сжатую страницу, начинает её распаковывать и выводить пользователю. Обратите внимание, что сжимается только текст. Все отдаваемые изображения, видео, музыка и прочая мультимедиа никак не сжимается.
Теперь надо на все страницы сайта (если это движок, то, как правило, в index.php ) надо добавить следующее:
Ini_set("zlib.output_compression", "On"); ini_set("zlib.output_compression_level", "1");
2) Включите кеширование на стороне браузера
Если браузер пользователя умеет кешировать файлы, то ему не обязательно каждый раз их загружать заново. Согласны?
В.htaccess прописываем следующее:
ExpiresActive On
ExpiresDefault "access plus 1 month"
3) Используйте Content Delivery Network (CDN)
CDN , если переводить дословно, это сеть доставки контента (Content Delivery Network). Под словом контент в данном случае подразумеваются статические ресурсы, которые мы используем на сайте: JavaScript библиотеки, файлы каскадных стилей (CSS), изображения в форматах (PNG, JPEG, GIF), flash (SWF) файлы, архивы (ZIP, RAR и другие), документы и любые бинарные файлики.
А под словами Сеть доставки подразумевают набор серверов разнесенных географически. Файлы на таких серверах синхронизируются и при необходимости пользователя получить файл – сервера между собой решают, кто будет отдавать файл. Таким образом, идет баллансировка нагрузки и увеличение скорости отклика и скорости передачи файла конечному пользователю или клиенту.
4) Удалите неиспользуемые компоненты
Здесь всё просто. Если виджет, плагин или компонент не используется пользователем, то все его CSS и JavaScript не должны загружаться.
5) Объединяем CSS и JavaScript в один файл
Если CSS и JavaScript находятся в одном файле, то они загружаются единожды (меньше HTTP-запросов) и быстрее, если бы браузер загружал код из нескольких файлов.
10) Удалите ненужные шрифты
Если вы используете более чем два или три шрифта одновременно, вам, возможно, важно не переусердствовать с этим занятием. Ваш клиент или босс может любить красивые почерки шрифтов, но, если один шрифт используется только для одного названия, стоит ли загружать файл весом в 200KB? Нет, не стоит.
У вас есть кнопки шаринга в Facebook, Twitter, VK, Google+ и LinkedIn? Они могут занимать до нескольких сот килобайт. Задумайтесь стоит ли их добавлять.
12) Замените изображения на CSS3 эффекты
Вы используете нарезки изображений для создания градиентов, округлений границ и тени? Надеюсь, что нет — CSS3 делает такие методы излишними.
13) Замените JavaScript с эффектами и анимациями на аналоги в CSS3
В вашем JavaScript коде можно встретить такое $(«#x»).fade() или такое $(«#y»).slideDown() ? Это было уместно несколько лет назад, но не теперь, когда есть возможность всё это сделать с помощью CSS3.
14) Может стоит использовать SVG?
SVG содержит точки, линии и формы, которые определены в качестве векторов, которые хранятся в XML формате. SVG идеально подходит для esponsive designs, так как он будет масштабироваться до нужного размера без потери качества. Размера файла SVG часто меньше, чем растровое изображение.
15) Используйте спрайты для изображений
Зачем? Сокращение числа HTTP-запросов. Чем их меньше, тем меньше нагрузка на сервер и тем быстрее загрузится сайт – всё просто.
Sprite { width: 16px; height: 16px; background: url("sprite.png") 0 0 no-repeat; } .sprite.help { background-position: 0 -16px; } .sprite.info { background-position: 0 -32px; } .sprite.user { background-position: 0 -48px; }
За основу написания данного поста я брал статьи Quick and Easy Fixes to Reduce Page Weight и Tougher Tasks to Reduce Page Weight . Что-то просто перевел, что-то изменил, что-то дополнил, что-то добавил, разукрасил изображениями. В итоге получился вот этот пост.