ذكي الأمثل تقنيات JPEG

المؤلف : كامل النهدي

إنني كامل النهدي. أنا أكتب عن الدروس مختلف المجلات ومواقع الانترنت عندما كنت لست تصميم الملصقات أزعج ، والقمصان ، والكتالوجات ، المجلات ، الخ.

وكتب كامل النهدي 46 المقالات بالنسبة لنا.

عندما يتحدث الناس عن تحسين الصورة ، إلا أنهم يعتبرون المعلمات المحدودة التي توفرها المحررين الصورة الشعبية ، مثل التمرير "جودة" ، وعدد من الألوان في لوحة ، التردد وهلم جرا. أيضا ، والمرافق قليلة ، مثل OptiPNG و jpegtran ، للضغط على إدارة بايت إضافية من ملفات الصور. كل هذه هي جميلة المعروفة التي تقدم أدوات مطوري الويب والمصممين مع تقنيات بسيطة لتحسين الصورة.

في هذه المقالة ، سنوضح لك نهجا مختلفا لتحسين الصورة ، وعلى أساس كيف يتم تخزين بيانات الصورة في أشكال مختلفة. دعونا نبدأ مع صيغة JPEG وتقنية بسيطة تسمى الشبكة ثمانية بكسل.

ثمانية بكسل الشبكة

كما تعلمون ، صورة JPEG يتكون من سلسلة من كتل 8 × 8 بكسل ، والتي يمكن أن تكون واضحة وخاصة إذا قمت بتعيين JPEG "الجودة" المعلمة منخفض جدا. كيف يؤثر هذا مساعدتنا في تحسين الصورة؟ النظر في المثال التالي :


32 × 32 بكسل وجودة : 10 (في Photoshop) ، 396 بايت.

كلا المربعات البيضاء هي نفس الحجم : 8 × 8 بكسل. على الرغم من أن يتم تعيين جودة منخفضة ، في الزاوية اليمنى السفلى تبدو ضبابية (كما قد تتوقع) والزاوية العلوية اليسرى تبدو جميلة ونظيفة. كيف حدث ذلك؟ للإجابة على هذا ، يتعين علينا أن ننظر إلى هذه الصورة في إطار الشبكة :

كما ترون ، هو الانحياز في الساحة العلوية اليسرى الى شبكة من ثمانية بكسل ، مما يضمن أن مربع تبدو حادة.

عند حفظها ، يتم تقسيم الصورة إلى كتل من 8 × 8 بكسل ، ويتم تحسينه كل كتلة مستقلة. لأن مربع الأيمن السفلي لا يطابق الخلية الشبكة ، محسن بالبحث عن الفهارس لون متوسط ​​بين الأسود والأبيض (في JPEG ، كل 8 × 8 يتم ترميز كتلة وموجة جيبية). هذا ما يفسر زغب. المرافق العديد من البلدان المتقدمة لتحسين JPEG تملك هذه الميزة ، وهو ما يسمى تحسين انتقائية والنتائج في efficients المشترك لنوعية مختلفة في مناطق مختلفة ، وصورة أكثر بايت المحفوظة.

هذه التقنية مفيدة بشكل خاص لحفظ الكائنات مستطيلة. دعونا نرى كيف يعمل مع صورة أكثر واقعية :


13.51 كيلو بايت.


12.65 كيلو بايت.

في المثال الأول ، يتم وضعه بشكل عشوائي المايكرويف. قبل حفظ الملف الثاني ، ونحن محاذاة الصورة مع الشبكة ثمانية بكسل. ضبط الجودة هي نفسها لكل من : 55. دعونا نلقي نظرة فاحصة (الخطوط الحمراء بمناسبة الشبكة) :

كما ترون ، لقد خلصنا 1 كيلو بايت من بيانات الصورة ببساطة عن طريق وضع الصورة بشكل صحيح. أيضا ، حققنا الصورة قليلا "نظافة" ، أيضا.

اللون الأمثل

غير معقدة الى حد ما وهذا الأسلوب يعمل فقط لأنواع معينة من الصور. ولكن سوف نذهب أكثر من ذلك على أية حال ، إذا كان فقط لمعرفة نظرية.

أولا ، نحن بحاجة إلى معرفة الذي يستخدم نموذج الألوان لتنسيق JPEG. معظم تنسيقات الصور الموجودة في طراز اللون RGB ، ولكن يمكن أيضا أن تكون JPEG في YCbCr ، والذي يستخدم على نطاق واسع للتلفزيون.

YCbCr مشابه لنموذج هامبورغ ، بمعنى أن كل من هامبورغ وYCbCr خفة منفصلة عن النظام البصري الذي الإنسان حساس جدا من صفاء (HSV يجب أن تكون مألوفة لمعظم المصممين). له ثلاثة عناصر هي : هوي ، والتشبع والقيمة. واحد اهم لأغراضنا هنا هو القيمة ، والتي تعرف أيضا باسم خفة (أبتيميزر تميل لضغط قنوات اللون ولكن الحفاظ على قيمة أعلى مستوى ممكن ، لأن الإنسان هو الأكثر حساسية لذلك). فوتوشوب لديه واسطة لون معامل ، الأمر الذي يساعدنا في إعداد أفضل صورة لضغط باستخدام محسن JPEG.

دعونا العصا مع المايكرويف ومثالنا. هناك صافي غرامة على الباب ، والتي هي نموذج مثالي لتحسين لون لدينا. بعد ضغط بسيط ، في جودة 55 ، ملف تزن 64.39 كيلو بايت.


990 × 405 بكسل وجودة : 55 (في Photoshop) ، 64.39 كيلو بايت.
أكبر الاسم.

فتح مكبرة من الصورة في Photoshop ، وبدوره في وضع اللون مختبر : صورة>> وضع>> مختبر اللون.

مختبر الوضع هو تقريبا ، ولكن ليس تماما. نفس HSV وYCbCr القناة خفة يحتوي على معلومات حول خفة الصورة. القناة ويبين كم الأحمر أو الأخضر هناك. والقناة B مقابض الأزرق والأصفر. على الرغم من هذه الخلافات ، وهذا الوضع يسمح لنا للتخلص من لون المعلومات الزائدة عن الحاجة.

التبديل إلى لوحة القنوات وإلقاء نظرة على القنوات ألف وباء. يمكننا أن نرى بوضوح نسيج من الشبكة ، ويبدو أن هناك ثلاث كتل مختلفة من شدة الإضاءة.

نحن نذهب إلى أن إجراء بعض التغييرات اللون ، وذلك تمشيا نسخة أصلية فتح في إطار منفصل سوف يساعد على الأرجح. هدفنا هو ضمان سلاسة الملمس محبب في هذه المقاطع في كل قنوات اللون. هذا سيعطي للمحسن البيانات أسهل بكثير للعمل مع. هل يمكن أن يتساءل لماذا نحن موجودون تحسين هذا المجال بالذات من الصورة (إطار باب الفرن). بسيطة : تتكون هذه المنطقة تتكون من خلية أسود بالتناوب والبرتقال. الأسود هو صفر خفة ، ويتم تخزين هذه المعلومات في القناة خفة. لذا ، إذا جعلنا هذا المجال البرتقال تماما في قنوات اللون ، فإننا لن تخسر شيئا لأن قناة الخفة التي ستحدد بكسل ينبغي الظلام ، والفرق بين البرتقال سوداء مظلمة تماما وسوف لا يكون ملحوظا على نسيج من هذا القبيل.

التبديل إلى قناة ، حدد كل كتلة على حدة وتطبيق تصفية الوسيط (تصفية>> الضوضاء متوسط>>). وينبغي أن يكون في دائرة نصف قطرها صغيرة بقدر الإمكان (أي حتى يختفي الملمس) حتى لا تشوه الكثير من الوهج. الهدف لمدة 4 في المجموعة الأولى ، و 2 في الثانية و 4 في المجموعة الثالثة. عند هذه النقطة ، فإن الباب تبدو هذه :


أكبر الاسم.

تشبع منخفضة ، لذلك نحن بحاجة إلى إصلاح هذه. رؤية كافة يتغير لون على الفور ، مكررة الإطار النشط حاليا : نافذة>> ترتيب>> نافذة جديدة. في النافذة الجديدة ، انقر على القناة مختبر لرؤية الصورة. نتيجة لذلك ، يجب أن مساحة العمل الخاصة بك تبدو هذه :


الأصلي هو على حق ، ومكررة على اليسار وأماكن العمل في الجزء السفلي.

حدد كافة الكتل الثلاث في قناة في مكان العمل ، واستدعاء نافذة المستويات (Ctrl + L أو صورة>> التعديلات>> مستويات). حرك المنزلق المتوسطة إلى اليسار بحيث لون داخل الفرن في مباريات نسخة مكررة من أن النسخة الأصلية (وصلت قيمتها 1.08 في التمرير وسط). أن تفعل الشيء نفسه مع قناة B ، ونرى كيف يبدو :


990 × 405 بكسل وجودة : 55 (في Photoshop) ، 59.29 KB
نسخة كبيرة

كما ترون ، أزلنا 5 ك من الصورة (كان 64،39 KB). على الرغم من أن وصف هذه التقنية تبدو كبيرة ومخيفة ، ويستغرق حوالي دقيقة واحدة فقط لأداء : التبديل إلى مختبر طراز اللون ، حدد مناطق مختلفة من قنوات اللون واستخدام فلتر متوسط ​​عليهم ، ثم لا تشبع بعض التصحيح. كما ذكرنا ، وهذا الأسلوب هو أكثر فائدة للنظرية وراء ذلك ، لكني استخدامه لصقل الصور الإعلانية الكبيرة التي يجب أن تبدو نظيفة وحادة.

JPEG المشتركة نصائح التحسين

سوف ننتهي من هنا من خلال تقديم بعض النصائح المفيدة التحسين.

في كل مرة تقوم بتحديد نوعية ضغط الصورة ، تكون متعمدة في اختيارك للبرنامج لاستخدام الأمثل. JPEG معايير صارمة : فهي تحدد فقط كيف يتم تحويل صورة عند تخفيض حجم الملف. لكن المطور تقرر بالضبط ما يفعل محسن.

على سبيل المثال ، فإن بعض المسوقين تعزيز البرامج الخاصة بهم وتقديم أفضل الأمثل ، مما يتيح لك حفظ الملفات في حجم صغير مع ضبط الجودة العالية ، في حين يصور فوتوشوب وجعل الملفات الثقيلة ، مرتين. لا تحصل فيها اتخاذ كل برنامج وحجمه الجودة الخاصة بها ، ومختلف القيم تحديد خوارزميات التحسين إضافية.

المعيار الوحيد الذي لمقارنة الأداء الأمثل هو نوعية إلى نسبة الحجم. إذا قمت بحفظ صورة مع الجودة 55-60 في Photoshop ، سيبدو ويكون بنفس حجم الملفات التي مع البرامج الأخرى في ، يقول ، 80 الجودة.

أبدا حفظ الصور في 100 الجودة. ليس هذا هو أعلى جودة ممكنة ، وإنما فقط الحد الأمثل الرياضية. سوف ينتهي بك الأمر مع ملف ثقيل بشكل غير معقول. إنقاذ صورة مع الجودة من 95 هي أكثر من كافية لمنع الخسارة.

نضع في اعتبارنا أنه عندما تقوم بتعيين نوعية إلى أقل من 50 في Photoshop ، فإنه يعمل التحسين خوارزمية إضافي يسمى اللون أسفل أخذ العينات ، والتي من المعدلات اللون في ثماني كتل بكسل المجاورة :


48 × 48 بكسل وجودة : 50 (في Photoshop) ، 530 بايت.


48 × 48 بكسل ، الجودة : 51 (في Photoshop) ، 484 بايت.

بذلك ، وإذا كانت الصورة صغيرة ، عالية على النقيض من التفاصيل في الصورة ، وتحديد نوعية ما لا يقل عن 51 في فوتوشوب هو أفضل.

في مقالة في المستقبل ، وسنذهب حول بعض النصائح المتقدمة الأمثل PNG.

نبذة عن الكاتب

سيرغي Chikuyonok هو الروسية الأمامية المطور على شبكة الإنترنت والكاتب مع شغف كبير على التحسين : من صور وآثار جافا سكريبت لعمل العملية وتوفير الوقت على اساس الترميز.

  • مشاركة فريدة من نوعها

ترك رد

التعليقات القاع

صور مميزة

صورة مصغرة
كيفية تشغيل رتابة... السؤال الكاتب أيقونة KamelN 9 نوفمبر 2009 | لا ردود
صورة مصغرة
كيفية إنشاء الظلام... السؤال الكاتب أيقونة KamelN 9 نوفمبر 2009 | لا ردود
صورة مصغرة
إضافة لون رائع... السؤال الكاتب أيقونة KamelN 9 نوفمبر 2009 | لا ردود

صور عشوائية

صورة مصغرة
جميلة ريترو Futu... السؤال الكاتب أيقونة KamelN 11 يونيو 2009 | 2 ردود
صورة مصغرة
حان الوقت ليخلق... السؤال الكاتب أيقونة KamelN 23 يونيو 2009 | رد واحد
صورة مصغرة
مما يجعل من "... السؤال الكاتب أيقونة KamelN 7 يوليو 2009 | رد واحد

الأعلى تقييما

صورة مصغرة
6 الحرة PSD / (X) HTML - T... السؤال الكاتب أيقونة KamelN
1 Star2 Stars3 Stars4 Stars5 Stars 6 أصوات
Loading ... تحميل...
صورة مصغرة
إلهام الأزهار... السؤال الكاتب أيقونة KamelN
1 Star2 Stars3 Stars4 Stars5 Stars 6 أصوات
Loading ... تحميل...
صورة مصغرة
كيفية إنشاء فانت... السؤال الكاتب أيقونة KamelN
1 Star2 Stars3 Stars4 Stars5 Stars 5 أصوات
Loading ... تحميل...