Как самому сжать баннеры или раскодировать. Бесплатные онлайн сервисы для сжатия картинок. Онлайн сервис PunyPNG
Приветствую, вас друзья! Наверняка новички сталкивались с такой проблемой, когда есть желание прорекламировать на своём сайте партнерский продукт, но в рекламном арсенале его автора баннеры имеют в ширину больше, чем ширина сайдбара вашей темы.
Что делать, ведь попытка вставить баннер большей ширины, чем ширина сайдбара, может привести к неправильной работе сайта? Скажу сразу — не паниковать! Это вовсе не проблема, а просто ситуация, выход из которой очень даже простой.
Всё, что вам понадобится, всегда есть у вас под рукой. Собственно, для работы понадобится любой графический редактор, в котором вы работаете.
Вы можете для дальнейшей работы скачать его с этой страницы, но можете и не скачивать, потому что для последующей работы достаточно просто скопировать ссылку.
Затем откройте сервис Фотошоп онлайн . В меню «Файл » выберите команду «Открыть URL изображения ». У вас откроется окно, в котором необходимо будет ввести скопированную ссылку и после этого нажать кнопку «Да ». Изображение баннера загрузится непосредственно в сервис.
Теперь на вкладке «Изображение » выберите команду «Размер изображения ». В открывшемся окне задайте необходимую ширину и нажмите кнопку «Да ». При этом убедитесь, чтобы был отмечен чекбокс «Сохранить пропорции ». Для примера я ввёл значение новых размеров баннера 200 на 200 пикселей.
Баннер сразу уменьшается в размерах.
Вам только остается зайти на вкладку «Файл » и выбрать команду «Сохранить ». В открывшемся после этого окне задайте имя файла (желательно на латинице), уточните его качество (от 80 до 100%), нажмите кнопку «Да » и сохраните новый баннер в нужное место (откроется проводник).
Баннер готов! Загружайте его на сайт в медиафайлы или на ваш любимый фотохостинг. После этого внесите изменения в оригинальную ссылку от автора партнерской программы:
Если у вас остались какие-то вопросы, то посмотрите видео ниже от моего помощника Сергея Почечуева, в котором наглядно показан весь описанный процесс уменьшения баннера в сервисе «Фотошоп онлайн ».
Тем, кто хотя бы немного умеет работать в программе Photoshop рекомендую посмотреть следующее видео. Оно тоже по данной тематике и в нём показан порядок действий применительно к данной программе. Он немного отличается, хотя алгоритм остается прежним.
Напоследок предостерегу вас от копирования исходного кода на партнерский баннер непосредственно из данной статьи. На практике вы должны скопировать оригинальную ссылку из своего партнерского аккаунта и работать именно с ней.
Ещё добавлю, что после размещения баннера на своем сайте, обязательно проверьте его работоспособность. И если он работает, как часы, то значит у вас всё получилось, и я вам желаю успешных партнерских продаж.
Обсуждение: 6 комментариев
Хотя при наличии смелости все-таки легче вписать маленькую добавку в HTML.
Ответить
Спасибо)) Наша команда старается для вас))
Ответить
Евгений, здравствуйте! Статья очень полезная, ненадо заморачиваться с html-кодом, быстро и удобно. В «техничке» вроде бы уже не дилетант, но пользоваться буду с удовольствием. Жаль что фотошоп онлайн не нашла раньше. Спасибо большое за подробную статью! 🙂
Ответить
Евгений, ваша статья очень поможет многим блогерам. Не один раз видел на блогах печальную картину, когда баннеры выходят за рамки и закрывают контент.
Все никак не могу добраться до этого «сказочного» фотошопа, пользуюсь paintnet-ом, привык уже видимо 🙂 Хотя размер изображения наверное в любой программе-редакторе можно поменять.
И все-таки очень хотелось бы освоить все инструменты в совершенстве фотошоп-редактора.
Ответить
Евгений большое спасибо,вам и вашей команде. Я много раз пытался создать сайт или блог,но бросал эту затею как дело доходило до технических моментов. Все планы рушились об эту стену.Да вот еще что Вы не подскажете как скопировать зти статьи, а то не удобно искать.Еще раз СПАСИБО...
Ответить
С видео обзора я узнала о сервисе Фотохостинг Япикс yapx.ru, который предназначен для работы с контентом, ознакомилось с условием Япикс и зарегистрировалось на нем. На сервисе Япикс есть разные возможности выбор картинки, редактирование своих картинок и скачивание GIF-анимации с сайта. Благодарю Вас за предоставленную интересную информацию. Успехов Вам и весеннего солнечного настроения!
Ответить
Технологии улучшаются и скорость интернета растет, а в веб-разработке (в частности мобильной) погоня за уменьшением веса страницы и за скоростью загрузки данных при медленном соединении продолжается. Так, сегодня речь пойдет о том, как можно уменьшить вес страницы, чтобы она быстренько попала к пользователю на девайс.
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 . Что-то просто перевел, что-то изменил, что-то дополнил, что-то добавил, разукрасил изображениями. В итоге получился вот этот пост.
Здравствуйте, дорогие читатели! В данной статье мы с вами рассмотрим несколько полезных онлайн сервисов для уменьшения веса картинок и фотографий без существенного изменения качества. Хотя есть один сервис, где можно сжать картинку до минимальных значений, но качество тоже будет оставлять желать лучшего.
Данная тема оптимизации изображений, в основном, интересует владельцев сайтов или блогов. Скорость загрузки страниц имеет большое значение в продвижении. Поисковым системам нравятся оптимизированные вебресурсы.
Плюс онлайн сервисов в том, что не нужно устанавливать специальные программы себе на компьютер. Процесс сжатия проходит в режиме реального времени и не требует каких-то специальных навыков. Все до безобразия просто. Минус данных сервисов только один – нужно подключение к сети интернет.
Перейдем к обзору трех интернет ресурсов. Каждый из них имеет свои особенности.
Онлайн сервис TinyPNG
Сервисом TinyPNG можно сжимать до 20 изображений и максимальным размером 5 МВ. Работает с форматами PNG и JPEG.
Буквально в два клика происходит оптимизация картинки — загружаете ее на сайт, происходит автоматическое сжатие, затем сохраняете на свой компьютер. Сжатый фрагмент, практически ничем не отличается от оригинального.
Онлайн сервис PunyPNG
PunyPNG тоже простой вебресурс. Работает с форматами PNG, JPEG и GIF. Загружать можно до 20 файлов. Прямо на сервисе будут видны результаты сжатия и процентное соотношение с изначальным.
Онлайн сервис Picresize
Picresize – это единственный из представленных сервисов, где можно устанавливать размер итогового результата. Работает с форматами PNG, JPEG, GIF и BMP.
После загрузки изображения на сайт, можно настроить его размер. No change – исходный размер (без изменений).
Данный сервис позволяет преобразовывать один формат изображения в другой.
В формате JPEG можно задавать желаемый размер файла в килобайтах.
После произведенных настроек, сохраняем изображение на свой компьютер.