World1000 - Оптимизация изображений в формате JPG
Баннерная сеть

Личный кабинет

Имя

Пароль

Запомнить меня


Забыли пароль?
Зарегистрироваться

  2008-11-04 12:55
Итак, графика для Ваших страничек готова. Но выкладывать ее на сервер еще рано, так как уже не раз было сказано - если странички качаются долго, то толку от них нет. Эта статья посвящена оптимизации изображений в формате JPG.


Данный формат хранит изображения c цветовой глубиной 24bpp (TrueColor) и использует сжатие с потерей информации. У него не так уж много способов оптимизации, точнее сказать, - один: выбрать оптимальный коэффициент сжатия.


Для осуществления такой оптимизации нужен графический пакет или утилита, которые позволяют нам регулировать степень сжатия изображения. К сожалению, PhotoShop в базовой конфигурации не позволяет нам свободно регулировать степень сжатия (он предлагает несколько фиксированных значений). Правда, для него можно найти модули, специально подключаемые для осуществления данной операции. Для оптимизации графики лучше воспользоваться программами типа PhotoPaint или PaintShopPro. В этих программах возможно регулирование степени сжатия либо заданием процента потерь, либо заданием значения качества от 0 до 255.


Как определить оптимальную степень сжатия?





Для этого нужно сохранить фотографию при нескольких значениях коэффициента сжатия, а затем внимательно рассмотреть ее. Критерием потери качества будут так называемые "дрожащие контуры", наиболее заметные в местах контрастных переходов, и появление пятен в областях с плавными переходами (см. рисунок). Тот коэффициент сжатия, при котором искажения еще не видны, но с увеличением его (коэффициента) на одну ступеньку становятся заметными, и будет оптимальным. Размер файла при таком разрешении будет минимальным и без потери качества.


Если такую операцию проводить с каждой фотографией, то это может занять слишком много времени. Но есть выход - все фотографии можно подразделить на некоторые подтипы (например: черно-белые фотографии, тонированные фотографии, пейзажи и т.д.) и к каждому подтипу подобрать свой оптимальный коэффициент. Впоследствии можно просто применять ранее найденный коэффициент ко всем подобным фотографиям. Ниже представлены две одинаковые фотографии, но только с разной степенью коэффициента сжатия JPG. Слева - фотография, записанная в PhotoShop 5.0 со степенью сжатия 3 (не оптимизированная), а правая оптимизирована при помощи Ulead SmartSaver Pro. Обратите внимание на размеры фотографий: они различаются в три раза (при одинаковом качестве изображения).





Использование прогрессивной развертки


И еще один небольшой метод оптимизации JPG - использование прогрессивной развертки. Это практически не сказывается на размере фотографии, но заметно при загрузке. В случае записи изображения в стандартном формате вывод на экран осуществляется горизонтальными полосками, и до загрузки всего изображения мы не сможем определить его смысл. Напротив, при записи файла в прогрессивном формате изображение появляется сразу целиком, но в грубой форме, и постепенно улучшается. Это дает посетителям возможность сразу же оценить фотографию и решить, стоит ли ожидать ее докачки, что позволит сэкономить немного времени при просмотре Ваших страничек. Ниже, на рисунках, представлены две фотографии: левая записана со стандартной разверткой, а правая - с прогрессивной. В момент загрузки страничек посмотрите на то, как загружаются два этих изображения, и Вам все станет понятно.





Прогрессивная развертка JPG поддерживается всеми броузерами, но не каждый графический пакет может записывать в этом формате. Поэтому проверьте свои программы на возможность сохранять файлы с прогрессивной разверткой. Последние версии PhotoShop и PaintShopPro умеют это делать.
Быстрый переход
  • Company
  • Overview
  • Facts and Figures
  • Why Us
  • Testimonials
  • Careers
  • Capabilities
  • Technology Centers
  • Microsoft .NET
  • Java EE
  • PHP
  • AJAX
  • Skill Set
  • Domain Expertise
  • Web 2.0
  • Rich Internet Applications
  • Business Continuity
  • Quality Management
  • Methodology
  • Services
  • Advanced Web Development
  • Web Application Development
  • Web and Enterprise Portal Development
  • Website Design and Development
  • Web-based Database Programming
  • Web-enabling Legacy Applications
  • Opensource Software Customization
  • Business Application Development
  • Content and Document Management
  • Secure Intranets / Extranets
  • Customer Relationship Management
  • Workflow Management
  • Supply Chain Management
  • Interactive Learning
  • Independent QA and Testing
  • Application Security Consulting
  • Graphic Design / Multimedia
  • Maintenance and Support
  • Outsourcing
  • Outsourcing Overview
  • Dedicated Teams
  • Security and IP Protection
  • Engagement Models
  • Portfolio
  • By Business Domain
  • Corporate / Info Websites
  • Communities and Networks
  • B2B / B2C Internet Portals
  • Retail / Ecommerce
  • Media Distribution
  • Workflow Management
  • Customer Management
  • Enterprise Collaboration
  • Supply Chain Management
  • eLearning / Online Training
  • By Technology Focus
  • Microsoft .NET
  • Java EE
  • PHP
  • By Solution Type
  • Websites
  • Web Applications
  • Enterprise Solutions
  • Contact
  • Contact Form
  • Get Free Evaluation
  • Call Me Back
  • Contact Info
  • Map