كيفية تحسين صورك لتكون صديقة لكبار المسئولين الاقتصاديين (دليل كامل)

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


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

ما هو تحسين الصورة?

أبعاد تحسين الصورةيمكن أن تشهد صفحات الويب تباطؤًا ملحوظًا عند وجود صور كبيرة. يمكن أن يقلل ذلك من أوقات التحميل ويجعل التجربة العامة الفرعية لزوار موقعك.

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

وينتج عن ذلك أوقات تحميل أسرع لصفحاتك. يعد الضغط بدون فقد وفقدان أكثر طرق التحسين شيوعًا.

فوائد تنسيق الصورة

متوسط ​​أحجام الصور على الويبتشير التقديرات إلى أن حوالي 54 بالمائة من إجمالي وزن صفحة الويب يرجع إلى الصور.

عندما تعمل على تحسين موقع الويب ، يجب أن تكون صورك هي مهمتك الأولى بسبب ذلك. تتضمن مزايا تنسيق الصور ما يلي:

  • تحسين سرعة تحميل الصفحة
  • إنه أسرع لإنشاء نسخ احتياطية
  • مطلوب مساحة تخزين أقل الخادم
  • تحسين SEO مع إضافة SEO المناسبة
  • يتم استخدام عرض النطاق الترددي أقل

كيفية تحسين الأداء باستخدام تحسين الصورة

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

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

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

اختر أفضل تنسيق للملف

لاختيار أفضل نوع للملف ، من المهم معرفة الملفات المتاحة. هذه هي الأكثر شيوعا:

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

تنسيقات ملفات الصور

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

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

نظرًا لعدم وجود دعم عالمي لهذين الخيارين ، سيحتاج تطبيقك إلى منطق إضافي على خوادمك أو تطبيقك لتوفير المورد المناسب:

  • تحسين الصورة هي خدمة تقدمها بعض شبكات CDN ، بما في ذلك WebP و JPEG XR.
  • للكشف عن العميل ، قم بتوفير أفضل تنسيق صورة متاح والتحقق من التنسيقات المدعومة ، من الممكن إضافة منطق تطبيق إضافي.
  • تعمل بعض الأدوات مفتوحة المصدر على أتمتة المحادثة والتحسين وخدمة الأصول المناسبة.

الحجم مقابل جودة الضغط

يميل الضغط المنخفض إلى إعطاء جودة أعلى ، لكن أحجام الملفات عادة ما تكون أكبر. العكس صحيح مع الضغط العالي. الملفات أصغر ، لكن الجودة تميل إلى الانخفاض.

جودة الصورة مقابل الضغط

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

ضياع مقابل تحسين أمثل

هذان نوعان من الضغط الذي ستستخدمه. من المهم فهم ما يفعلونه:

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

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

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

تغيير حجم الصور إلى مقياس

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

تغيير حجم الصورة في وورد

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

استبدال الصور والقضاء عليها

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

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

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

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

الصور النقطية مقابل الصور المتجهة

rastor vs vector

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

يتم استخدام هذه على نطاق واسع على الإنترنت وأكثر استخدامًا. يتم استخدام برنامج Vector لإنشاء صور متجهة. هذه شائعة للصور التي تذهب إلى المنتجات المادية ، والهندسة ، و CAD ورسومات ثلاثية الأبعاد.

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

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

آثار الشاشة عالية الدقة

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

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

هذه المهمة مثالية للصور المتجهة لأنها يمكن أن تنتج نتائج حادة عندما تقدم بأي قرار.

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

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

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

تحسين الصور المتجهة

رسومات موجهة قابلة للتحجيم (SVG) مدعومة من قبل جميع المتصفحات الحديثة.

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

لتقليل حجم ملفات SVG ، يجب تصغيرها. يجب استخدام GZIP عند ضغط ملفات SVG.

تحسين الصور النقطية

تشكل شبكة البكسل صورة نقطية. وحدات البكسل الفردية على شبكة ثنائية الأبعاد. على سبيل المثال ، يشكل تسلسل 10000 بكسل صورة بحجم 100 × 100 بكسل. كل بكسل يرمز للشفافية ومعلومات الألوان.

النقطية الثقيلةيتم تخزين قيم RGBA بواسطة كل بكسل. وتشمل هذه:

  • قناة حمراء
  • القناة الزرقاء
  • القناة الخضراء
  • قناة ألفا (الشفافية)

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

لذلك ، لتقليل حجم ملف الصورة ، هناك بعض الاستراتيجيات:

  • قم بتقليل عمق البت للصورة. يمكنك القيام بذلك باستخدام لوح ألوان أصغر.
  • تحسين البيانات التي تخزنها وحدات البكسل الفردية.

أدوات وضبط المعلمات

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

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

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

  • جيفسيكل: يتيح لك هذا تحسين وإنشاء العديد من صور GIF.
  • Optipng: يُستخدم هذا للسماح بتحسين PNG بدون فقدان.
  • Jpegtran: يتيح لك هذا تحسين صور JPEG.
  • كوانت: يُستخدم هذا للسماح بتحسين PNG الضياع.

تقديم أصول صور متدرجة

هناك معياران أساسيان يجب مراعاتهما عند إجراء تحسين الصورة:

  • تحسين إجمالي عدد وحدات البكسل للصورة.
  • تحسين عدد البايتات اللازمة لتشفير كل بكسل في الصورة.

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

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

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

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

من الضروري أيضًا أن تقوم بتسليم أصولك الكبيرة بأقرب ما يمكن إلى حجم عرضها.

قائمة مراجعة تحسين الصورة

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

سيؤدي ذلك إلى جعل زوارك سعداء وتحسين الوظيفة العامة لموقعك على الويب. ضع في اعتبارك نقاط قائمة التحقق التالية عندما تقوم بتحسين صورك:

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

باختصار ، هناك كل من العلم والفن لتحسين الصورة. الخوارزميات والتقنيات المتطورة للغاية بمثابة العلم.

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

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

المراجع واعتمادات الصورة:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map