JPEG الأمثل للويب - الدليل النهائي

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

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

تجنب التوفير دائمًا بنسبة 100٪

يجب ألا تحفظ صور JPEG أبدًا بجودة 100٪. هذا سوف ليس إنتاج الأكثر ممكن “الأمثل” صورة. إنه يحسب فعليًا من خلال صيغة حد التحسين التي تزيد من أحجام الملفات بشكل كبير. حتى بالمقارنة مع جودة 90 ٪ أو 95 ٪ سترى انخفاض كبير في حجم الملف.

في معظم الأوقات ، يُنصح بحفظ صور أقل بكثير من جودة 90٪. إذا قمت بفتح شاشة Save for Web في Photoshop ، ستلاحظ أنها تقدم قيمًا معيّنة مسبقًا يمكنك الاختيار من بينها. أضفت قيم JPEG المحتملة أدناه - لاحظ اصطلاحات التسمية المتأصلة.

• منخفض - 10٪
• متوسط - 30٪
• متوسط - 60٪
• عالي جدا - 80٪
• أقصى - 100٪

حتى في Adobe Photoshop ، تعتبر جودة الصورة 60٪ "عالية". سوف يشهد العديد من مطوري الويب ما بين 50٪ - 70٪ نطاق آمن يمكن الالتزام به.

كيف منخفض منخفض جدا?

تعتمد القيم التي تختارها للتحسين تمامًا على المشروع الحالي. يجب عليك أن تفكر في أنواع الرسومات التي ستنتج أحجام الملفات الأعلى - هذه هي التي تحتاج إلى ضغط حقيقي.

أود أن أقول إن أقل من 30 ٪ كنت تقطع حقا جودة الصورة الأساسية. والمصممين الآخرين أقسم 50 ٪ باعتباره “حد” لتقليل القيمة المثلى. ولكن أفضل نصيحة هنا هي مجرد تجربة إعدادات مختلفة ومعرفة ما يبدو أفضل! لا يمكنك أن تخطئ في إجراء بعض الدراسات التجريبية لتحسين صور JPEG للويب.

خيارات الضغط

يجب أولاً توضيح المصطلحين "ضغط" و "جودة" وهما عكس كل منهما الآخر. هذا يعني أنه إذا قمت بحفظ ملف بتنسيق JPEG بنسبة 40٪ ، فستحصل على جودة 60٪ (مقارنة بجودة 100٪ بحد أقصى بدون ضغط).

هذه هي أهم الخيارات الأساسية للاستفادة منها - ويجب أن تكون كافية عند الحفظ للويب. لا يدخل المستخدمون العامون في التخصيصات الأكثر عمقًا. يحدث الاختزال الفرعي في الأمور الأكثر تعقيدًا حيث تقوم بتحويل صور RGB إلى YCbCr (Luminance ، Chroma Blue ، Chroma Red).

(مصدر الصورة: كارا مونرو)

ال الانارة أو يتم ضبط إعداد السطوع دائمًا على أعلى قيمة ممكنة في ضغط JPEG. مع هذه القيمة السطوع على قناة منفصلة ، من الأسهل تحسين قيم الألوان الفردية باللون الأحمر والأزرق. هذا هو المعروف أيضا باسم كروما subampling. سيحب المصممون المهتمون بتسخير أيديهم قراءة المزيد حول خوارزمية الضغط هذه. تحقق من منشور المدونة الرائع هذا على أخذ عينات من chroma يركز بشكل خاص على صور JPEG.

(مصدر الصورة: ديريك هاتفيلد)

كملاحظة جانبية مثيرة للاهتمام ، لا يستخدم Adobe Photoshop دائمًا أخذ العينات الفرعية للضغط. أي الصور المحفوظة عبر “حفظ للويب” سيستخدم مربع الحوار فقط عينة chroma الفرعية التي تقل عن 50٪ من قيمة الجودة.

اختلاف وسائل الإعلام على شبكة الإنترنت

الويب مليء أيضًا بأنواع مختلفة من وسائط الصور. يمكنك الحصول على صور وأيقونات وأزرار وشارات وأطنان من الرسومات الأخرى. لكن من الجدير بالملاحظة أن مقارنة الجودة بين الزر والصورة لا معنى لها.

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

التخطيط لنموذج الرسومات

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

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

أداة أخرى رائعة للتحقق هي Yahoo! Smush.it. إنه تطبيق ويب يستند إلى المستعرض حيث يمكنك تحميل صورة وسيؤدي Smush.it إلى إزالة جميع وحدات البايت الإضافية غير الضرورية لتحسين حجم الملف. إنه بلا خسائر بنسبة 100٪ مما يعني أن جودة الصورة لن تتدهور على الإطلاق. والأفضل من ذلك هو أنه يمكنك تحميل الصور دفعة من عناوين URL المباشرة إذا كنت قد استضافتها على موقع الويب الخاص بك أو خادم جهة خارجية.

أدوات إضافية

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

إيرفنفيو

يتيح لك هذا البرنامج المجاني لنظام التشغيل Windows عرض وتحسين أي مجموعة من الصور الكبيرة. أنا أحب هذا البرنامج بشكل خاص لأنه يدعم تحويل الدُفعات من الصور في دلائل متعددة. يمكنك تطبيق نفس الوظائف على مئات صور JPEG تلقائيًا.

ما هو أفضل من ذلك هو دعم البرنامج المساعد من مطوري الطرف الثالث. أحد الأمثلة على ذلك هو RIOT (أداة تحسين الصورة الراديكالية). يعمل هذا المكون الإضافي مع برامج تحرير رسومات أخرى مماثلة مفتوحة المصدر مثل GIMP. يوفر طريقة عرض صورة مزدوجة حيث يمكنك ضبط معلمات الضغط يدويًا لكل صورة من صورك.

دعم البرامج رائع وميزات RIOT سهلة الاستخدام للغاية. إلى جانب ضغط الصور ، يمكنك أيضًا الوصول إلى إزالة البيانات الوصفية الإضافية مثل EXIF ​​و Adobe XMP. لا يمكن إلا أن هذه البتات الإضافية من البيانات تضيف إلى مجموع ملفاتك ونادراً ما تكون هناك حاجة إليها.

ImageOptim لنظام التشغيل Mac

إذا كنت تقوم بتشغيل OS X وتحتاج إلى تطبيق ضغط قوي ، فلا تبحث بعد ذلك. ImageOptim هي أداة قوية لضغط الصور للويب - في بعض الأحيان أفضل من Photoshop.

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

كانت هناك بعض المشكلات البسيطة في الإصدار 1.3.3 الثابت والمستقر في عرض صور JPEG ذات البيكسلات في Opera. حاول التحقق من جميع صورك المحسّنة في 4 متصفحات رئيسية - Chrome و Safari و Firefox و Opera (وربما IE). إذا كان أي شيء يبدو منحرفًا ، يمكنك محاولة تنزيل ImageOptim 1.3.0 والذي يحول نظافة بعض الشيء.

موارد مفيدة

• JPEG 101: دليل دورة الأعطال على JPEG
• إعدادات الضغط الصحيحة لحفظ صور JPG لـ WordPress
• تقنيات تحسين JPEG الذكية
• كيفية تحسين صور JPEG لمواقع الويب
• كل ما تحتاج لمعرفته حول ضغط الصورة

استنتاج

يعد ضغط JPEG أمرًا صعبًا لأنك بحاجة إلى إيجاد التوازن المناسب بين الجودة والمضمون. حتى مع تزايد سرعات الاتصال بالإنترنت الحديثة ، لا تزال هناك حاجة لتقليل حجم صفحات الويب. يمكن لأطر جديدة مثل jQuery و Typekit التعامل مع مئات الكيلوبايت الإضافي ، حتى في التصميم الأمثل.

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