👩‍🚀 🍭 👴 استخدام التنسيقات الرسومية الحديثة في مشاريع الويب ↗️ 👐🏿 🥘

إيدي عثماني ، في مقال " سعر جافا سكريبت في 2018 " ، عبر عن فكرة قيّمة: الوقت المطلوب لمعالجة نص برمجي بحجم 200 كيلوبايت ومعالجة صورة لها نفس الحجم يختلف اختلافًا كبيرًا. والحقيقة هي أنه عند معالجة الشفرة ، يحتاج المتصفح إلى عمل أكثر شمولاً من التحضير لاستخدام الصور. إليك ما تقوله المقالة عنه:

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

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

بالنظر إلى أن الوباء قد اندلع في العالم الآن ، لاحظت أن اتصال الإنترنت الخاص بي أصبح غير مستقر. لحسن الحظ ، نظرًا لحقيقة أن الإنترنت محمي من قبل متخصصين ممتازين لا يعرفون التعب ، فإن معظم شبكة الويب العالمية لا تزال تعمل بشكل جيد. ولكن على الإنترنت ، يحدث شيء ما بالتأكيد. أستخدم اتصالاً بسرعة 100 ميجابت في الثانية ، لكن أشعر بأنني جالس على مودم 3G.

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

وعادةً ما تحتوي المواقع على أكثر من 200 كيلوبايت من الصور. عادة ما تكون الصفحة التي تحتوي على عدة ميغابايت من الصور هي الحالة. العديد من المطورين (وأنا أيضًا!) ، كقاعدة عامة ، لا يفكرون على الإطلاق في حجم المواد الإعلامية.

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

نظرة عامة على الأشكال الرسومية الحديثة

لتحسين العمل مع رسومات الويب ، يمكننا استخدام التنسيقات الثلاثة التالية:

JPEG 2000 هو تنسيق نسخة محسنة من JPG العادي. تم تطوير هذا التنسيق في عام 1997 ، في المقام الأول للاستخدام في السينما والطب. يسمح لك بضغط الصور أقوى من JPEG ، ولكن مع عدد أقل من القطع الأثرية.
JPEG XR هو تنسيق مرتبط بـ JPEG 2000. تم تطويره بواسطة Microsoft في عام 2009.
WebP هو تنسيق أنشأته Google في عام 2010 للويب. كان الهدف الرئيسي من تطويره هو استخدام طرق متقدمة لتحسين الصور من أجل تقليل أحجام الملفات. يدعم WebP الشفافية وحتى الرسوم المتحركة.

هنا سنتحدث بشكل رئيسي عن WebP. التنسيقات المتعلقة بـ JPEG ، سنناقش أين ستثار مسألة توافق المتصفح.

كم يمكنك الفوز باستخدام تنسيقات رسوم بديلة؟

قبل بضعة أشهر ، استخدمت الصورة التالية في مادة واحدة.

الصورة المستخدمة في مادة واحدة

أجريت بعض التجارب ، مع الأخذ في الاعتبار استخدام تنسيقي JPG و PNG لتخزين الصورة الأصلية. لقد قمت بتحسين خيارات الصورة باستخدام imagemin من أجل معرفة ما يمكن أن يقدمه لي WebP بدلاً من هذه التنسيقات " القديمة ".

كانت النتائج مذهلة.

ميزات الصورة	أصلي	ويب
ملف .Png (من Photoshop)	742 كيلو بايت	61 كيلوبايت! (92٪ أقل)
ملف .png محسن (بعد Imagemin)	178 كيلو بايت	58 كيلوبايت! (67٪ أقل)
ملف بتنسيق .jpg (من Photoshop)	242 كيلو بايت	50 كيلوبايت! (79٪ أقل)
ملف محسن بتنسيق .jpg (بعد التخيّل)	151 كيلوبايت	50 كيلوبايت! (67٪ أقل)

لقد أجريت تجارب مماثلة مع العديد من الصور. اتضح دائمًا تقريبًا أن ملفات WebP كانت أصغر بنسبة 30-70٪ من الإصدارات المحسنة لملفات الرسوم بتنسيقات أخرى.

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

التوافق المتصفح

للتعرف على كيفية دعم المتصفحات لبعض الرسوم البيانية ، ألق نظرة على caniuse.com .

يدعم معظم المتصفحات تنسيق WebP.

دعم المتصفحات لتنسيق WebP على

الرغم من أن مستوى الدعم لهذا التنسيق مرتفع جدًا ، إلا أنه من السيئ جدًا ألا يدعمه Safari و Internet Explorer.

وإليك معلومات حول دعم JPEG 2000.

دعم تنسيق JPEG 2000 بواسطة المتصفحات

لذا ، أصبح Safari الآن في صفنا ، ولكن Internet Explorer عاطل عن العمل مرة أخرى.

ماذا عن JPEG XR؟

دعم تنسيق JPEG XR بواسطة المتصفحات

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

الآن دعونا نتحدث عن كيفية اختيار تنسيقات صور مختلفة مصممة لمتصفحات مختلفة.

عنصر الصورة للإنقاذ

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

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

إليك ما يبدو عليه رمز HTML الذي يستخدم العنصر picture:

<picture>
  <source srcset="/images/cereal-box.webp" type="image/webp" />
  <source srcset="/images/cereal-box.jp2" type="image/jp2" />
  <img src="/images/cereal-box.jxr" type="image/vnd.ms-photo" />
</picture>

pictureقد يتضمن العنصر العديد من العناصر الفرعية sourceوعنصر واحد img. يقوم المتصفح بتحليل هذه العناصر بالتتابع ، باختيار أحد العناصر التي يمكن استخدامها بناءً على السمة type( السمات media). عند العثور على هذا العنصر ، يكتشف المستعرض عنوان الصورة باستخدام السمة srcset، ثم يعرض هذه الصورة باستخدام العنصر img.

تتمتع السمة srcsetبقدرات أكبر بكثير من السمة المعتادة src، ولكن لحسن الحظ ، يمكننا اعتبارها تناظرية src. بشكل عام ، العناصر sourceهي شيء مثل الإعدادات التي تتوافق مع الصور المختلفة. و imgالصورة التي أفضل مباريات البيئة التي عرض الصفحة يتم تضمين.

في Chrome ، على سبيل المثال ، بعد معالجة الترميز أعلاه ، سيأتي المتصفح إلى شيء أكثر أو أقل مكافئًا للرمز التالي:

<picture>
  <img src="/images/cereal-box.webp" />
</picture>

sourceيعني استخدام مجموعة من العناصر المتتالية أن واحدًا منها على الأقل سيكون مناسبًا لكل متصفح. لذلك ، تستخدم معظم المتصفحات صورة ويب ، سيقوم Safari بتحميل صورة jp2 ، أي صورة jxr.

من المناسب التذكير بأن Internet Explorer لا يدعم العنصر picture. هذا العنصر جديد جدًا بالنسبة لهذا المتصفح. ولكن ، على الرغم من ذلك ، فإن جزء الترميز أعلاه في IE سيعمل كما هو متوقع.

والحقيقة هي أنه عندما يتعثر المتصفح على عنصر غير معروف له ، فإنه يعتبره عنصرًا div. ونتيجة لذلك ، عند تحليل الشفرة ، يرى IE العديد من العناصر div، بالإضافة إلى علامة واحدة<img>الذي يحتوي على مسار صورة jxr. وهذا ، كما اتضح ، هو التنسيق الذي يدعمه Internet Explorer.

بديل مبسط

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

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

فقط عدد قليل جدًا من زوار مدونتي يستخدمون Internet Explorer (في الأيام السبعة الأخيرة ، حاول 3 أشخاص فقط مع IE مشاهدته ، وهو ما يمثل 0.02 ٪ من حركة المرور). لذلك ، قررت استخدام نسخة مبسطة من الحل أعلاه:

<picture>
  <source srcset="/images/cereal-box.webp" />
  <img src="/images/cereal-box.jpg" />
</picture>

أعطي صورة ويب مدمجة لتلك المتصفحات التي تدعم هذا التنسيق (Chrome و Firefox و Edge) ، والمتصفحات التي لا تدعم هذا التنسيق (IE ، Safari) ، أقدم إرثًا من الماضي - صورة jpeg.

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

التحقق من الحل

تفترض أدوات المطورين دائمًا أن الصورة تحتوي على ما تمت كتابته في الأصل إلى srcسمة العلامة img. إذا قمت بفحص العنصر باستخدام علامة التبويب Elements، يمكنك أن ترى أن الصفحة تستخدم صورة jpg.

للتحقق من قابلية تشغيل كل هذا ، من الأفضل ، كما يبدو لي ، النقر بزر الماوس الأيمن على الصورة وتحديد العنصر …في Chrome عند تنفيذ الأمر ، يجب أن يعرض النظام حفظ الملف بالملحق .webp. ولكن في Safari سيكون ملف jpeg.

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

تحويل ملفات الصور إلى تنسيق WebP

أنشأت Google مجموعة من الأدوات التي تهدف إلى العمل مع ملفات الويب. تسمى هذه الأداة cwebp . يسمح لك بتحويل ملفات الرسومات من التنسيقات الأخرى إلى WebP.

إذا كنت تستخدم MacOS ، فيمكنك تثبيت مجموعة الأدوات هذه باستخدام Homebrew:

brew install webp

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

بعد تثبيت الأدوات ، يمكنك استخدامها مثل هذا:

cwebp -q 80 cereal.png -o cereal.webp

فكر في هذا الأمر:

-q 80يسمح لك العلم بتعيين جودة الصورة. تختلف قيمته من 1 (أسوأ جودة) إلى 100 (أفضل). يمكنك تجربة قيم مختلفة. اكتشفت أنه من الأفضل أن تطلب شيئًا في منطقة 70-80.
اسم الملف cereal.jpgهو الصورة الأصلية التي يجب تحويلها إلى صفحة ويب.
-o cereal.webpيحدد البناء المسار إلى ملف الإخراج.

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

استخدام تنسيقات الصور الحديثة في تطبيقات التفاعل

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

const ImgWithFallback = ({
  src,
  fallback,
  type = 'image/webp',
  ...delegated
}) => {
  return (
    <picture>
      <source srcSet={src} type={type} />
      <img src={fallback} {...delegated} />
    </picture>
  );
};

ImgWithFallbackيشبه استخدام المكون إلى حد كبير العمل مع علامة عادية img:

<ImgWithFallback
  src="/images/cereal.webp"
  fallback="/images/cereal.png"
  alt="A photo showing the expiration date on a box of Lucky Charms"
/>

استخدام التنسيقات الرسومية الحديثة مع مكونات منمنمة

إذا كنت تستخدم مكتبات styled-componentsأو emotionقد تكون معتادًا على تصميم صورة خاصة:

const FancyImg = styled.img`
  whatever: stuff;
`

الشيء الجيد هو أنه يعمل مع مكوننا ImgWithFallback. يمكنك لفه في الغلاف المناسب تمامًا مثل أي مكون آخر:

const FancyImg = styled(ImgWithFallback)`
  whatever: stuff;
`

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

<ImgWithFallback className="sc-some-generated-thing" />

نقوم بتفويض جميع الخصائص للعلامة الفرعية <img>، ونتيجة لذلك ، يتم تطبيق الأنماط الصحيحة على الصورة ، كما يحدث عادة. كل شيء يعمل تمامًا كما تتوقع.

باستخدام حزمة صورة غاتسبي

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

الحزمة gatsby-imageلا تدعي أنها بديل img. قد لا يكون استخدامه بهذه البساطة ، يمكن أن تؤدي آلياته الداخلية إلى مفاجآت تجعل الحياة صعبة للمطور.

إذا كنت مهتمًا بهذه الحزمة ، فألق نظرة على وثائقها .

سلبيات WebP

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

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

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

ملخص

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

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

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

القراء الأعزاء! هل تستخدم تنسيق WebP؟

استخدام التنسيقات الرسومية الحديثة في مشاريع الويب