it-swarm.dev

ما الذي يمكنني فعله لتقليل حجم ملف الصور الخاصة بي؟

العمل مع بعض المظاهر wordpress لقد قمت بتعديل بعض ملفات الصور ولاحظت أن إصداراتي التي تم تعديلها تكون أحيانًا أكبر من 3 إلى 4 أضعاف الإصدارات الأصلية (تم حفظها باستخدام التنسيق نفسه). لا أريد تقليل الجودة - ما هي بعض الطرق لجعل حجم الملف أصغر بحيث يتم تحميله بشكل أسرع؟

الآن ، على سبيل المثال ، أستخدم Photoshop وقم بتعيين منزلق جودة الصورة على "8" (من أصل 10).

15
Ryan Elkins

لم Smashing Magazine مقالتين رائعتين عن PNG Optimization و JPG optimization .

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

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

بعد أن قمت بحفظ هذه الملفات ، أو في الملفات التي لم تكن محظوظًا بما فيه الكفاية لقيامك بتكوين ملفات مصدر ل Tweak في Photoshop ، لا يزال هناك ضغط أكبر لانتزاع هذه الملفات.

يمكنني استخدام تطبيق Mac يسمى ImageOptim . من موقعهم:

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

ImageOptim يوفر واجهة المستخدم الرسومية لأدوات التحسين المختلفة: AdvPNG من AdvanceCOMP ، OptiPNG ، PngCrush ، JpegOptim و jpegtran من libjpeg ، Gifsicle اختياريًا PNGOUT .

يُعد نشر الصور على الويب أمرًا جيدًا (يمكن بسهولة تقليص الصور "المحفوظة للويب" في Photoshop) كما أنه مفيد أيضًا في جعل تطبيقات Mac و iPhone أصغر.

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

تحتوي جميع الأدوات المرتبطة في هذا الاقتباس على إصدارات Windows/Linux/Mac باستثناء PNGOUT ، ولكن لحسن الحظ قام شخص ما بنقل PNGOUT إلى OS X و linux لأنهما مدروسان للغاية. إذا اخترت استخدام ImageOptim ، فستتضمن الكل ما عدا PNGOUT في .app ، لذلك استحوذ على منفذ PNGOUT واسقطه في/usr/local/bin (أو في أي مكان) وأخبر ImageOptim بمكانه.

ليس من غير المألوف بالنسبة لي ، خاصة مع صور PNG ، أن نرى انخفاضًا في حجم الملفات بنسبة 30٪ حتى بعد الحفظ من خلال "Save For Web & Devices" في Photoshop.

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

14
Bryson

عند حفظ الصور في Photoshop ، أوصي باستخدام File > Save for Web and Devices. سيسمح لك باللعب بمستويات الضغط ومشاهدة النتيجة المرئية في الوقت الفعلي. في الصور الفوتوغرافية ، يمكنك عادةً حفظه أقل من المستوى 8 وما زالت تحصل على نتائج رائعة. alt text

10
jessegavin

قد ترغب في التحقق من Yahoo's Smush.it . لقد وجدت أن تعمل بشكل جيد للغاية.

4
Travis Northcutt

بالنسبة لصور PNG ، يمكنك تقليل عدد الألوان في colormap وحفظها كملف PNG مفهرس. على سبيل المثال ، ضع في اعتبارك شعارًا بحجم 128 × 128 بكسل (غير مضغوط). تخيل أن هناك 16 لونًا فقط تستخدمها بالفعل.

  • PNG-32 ، أربعة بايت لكل بكسل - 65 كيلو بايت
  • PNG-8 ، بايت واحد لكل بكسل - 16 كيلو بايت
  • PNG-4 ، أربعة بت لكل بكسل - 8 كيلوبايت

يمكنك أن ترى أنه بدون تقليل جودة الصورة (هذا ينطبق فقط على أنواع معينة من الصور) يمكنك تقليل الحجم بشكل كبير.

بالنسبة للأزرار وأيقونات الموقع ، يمكنك أيضًا التفكير في تجميعها في صورة واحدة واستخدام CSS أو JavaScript للتحكم في عرضها (العفاريت). هذا يحفظ على عدد طلبات HTTP المقدمة لكل صورة.

4
dmsnell

جرب التنسيقات الأخرى.

  • بابوا نيو غينيا للتصوير مع ألفا و/أو الظل
  • GIF للصور ذات لوحة الألوان الصغيرة (أسود/أبيض أو رمز أصفر أو شيء ما)
3
Aaron

حاول بشكل أساسي حفظ صورتك بتنسيقات مختلفة ثم انظر إلى حجم الملف.

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

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

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

2
delete

تريد أيضًا التأكد من أنك تقوم بتجريد جميع بيانات EXIF ​​- كل هذا تقريبًا لا صلة له بالمستخدمين على الويب ، هل يحتاجون حقًا إلى معرفة أنك استخدمت Canon 5D لالتقاط الصورة ، وأنك استخدمت F-Stop of 2.8 ، مكشوف عن 0.5 ثانية ، مع ISO 160 ، لا يوجد تحيز للتعرض ، وطول بؤري 9 مم؟

كل هذه البيانات الوصفية تضيف وزنا لصورتك ، وبشكل عام يجب تجريدها.

كما يشير jessegavin ، ستظهر لك معظم تطبيقات الصور معاينة لتأثيرات الضغط - استخدمها ، حيث إن إعداد بطانية لـ "8" نادراً ما يوفر لك أفضل مقايضة ممكنة.

أخيرًا ، Google Page Speed Firefox/ Firebug يمكن أن يوفر لك البرنامج المساعد فكرة جيدة عن مقدار ما يمكنك تقليل أحجام الصور (بما في ذلك السماح لك بعرض وحفظ الإصدارات الأصغر) .

2
Zhaph - Ben Duguid
1
adamcodes

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

لتقليل حجم الطلبات ، تأكد من تكوين خادم الويب الخاص بك بحيث لا يرسل رؤوسًا غير مجدية مثل X-Powered-By. تأكد أيضًا من أنك تقدم أشياء مثل الصور و CSS والمكونات الثابتة الأخرى من مضيف والتي لا تقوم بتعيين ملفات تعريف الارتباط (مثل static.example.com).

بالنسبة للصور الثابتة ، قم بتعيين رأس انتهاء الصلاحية على تاريخ في المستقبل البعيد. هذا يضمن أن يتم الاحتفاظ متصفح الويب وأي وكلاء التخزين المؤقت في الوسط على الصورة لأطول فترة ممكنة. الجانب السلبي الوحيد لذلك هو أنه إذا كنت ترغب في إظهار صورة مختلفة ، فسوف تحتاج إلى استخدام اسم ملف مختلف ورابط لذلك. يمكن أن يكون ترقيم الإصدار في اسم الملف (مثل myimage_1.png أو /images/3/logo.png) طريقة فعالة للقيام بذلك. بالنسبة للصفحات الأقل ثباتًا ، قم بتعيين رأس انتهاء صلاحية واقعي (الوصول زائد ساعات X) ، وتأكد من أنك تقوم بتعيين إما رأس Last-Modified أو رأس eTag (وليس كلاهما) بحيث يمكن للمتصفحات التي قمت بتنزيل الملفات مسبقًا اختبارها بسرعة ما إذا كان لديهم الإصدار الحالي من خلال مقارنة الرؤوس بدلاً من سحب الصورة بأكملها لأسفل.

على الرغم من وجود العديد من الموارد المتاحة لمناقشة هذه التقنيات ، إلا أن Yahoo قامت بعمل رائع حيث قدمت العديد من النصائح لـ تحسين أداء تسليم المحتوى في مكان واحد.

1
JasonBirch