يحافظ مُحسِّن صور EWWW عــل ى سرعة صور موقع الويب الخاص بك
مرحبا بك أنت هنا فـ ي موقع استضافة مغربية تشاهد مفالة
إذن ، لديك هاتف محمول بكاميرا ميغابيكسل واتصال wi-fi ، وتقوم بتحميل الصور مباشرة إلى موقع الويب الخاص بك – ما الخطأ الذي يمكن أن يحدث ؟! شين بيشوب ، مؤسس EWWW Image Optimizer يشرح لماذا حتى فـ ي هذه الأيام مـن اتصالات الإنترنت عالية السرعة وخطط الاستضافة مع سعة تخزين غير محدودة وعرض النطاق الترددي ، لا يزال مـن المهم اتخاذ الخطوة الإضافـ ية لتحسين صورك.
مـن فضلك أخبرني عن خلفـ يتك قبل تأسيس EWWW Image Optimizer
بعد التخرج مـن الكلية ، عدت إلى مسقط رأسي فـ ي مونتانا وعملت كمدير لتكنولوجيا المعلومات فـ ي كلية مجتمع محلي. إلى جانب ذلك ، كنت أقوم باستشارات موقع الويب لبعض الأصدقاء والعائلة وأبحث عن حل لضغط الصور لجعلها يتم تحميل مواقع WordPress بشكل أسرع.ربما كان هذا قبل حوالي سبع سنوات عندما لم يكن هناك أي شيء لتحسين الصور باستثناء واجهة برمجة تطبيقات Yahoo القديمة والتي تكاد تكون مـنتهية الصلاحية ومكوِّن إضافـ ي آخر يحتاج إلى الوصول إلى الخادم.
نظرًا لأنني كنت أقوم بالاستضافة المشتركة مع Bluehost ، لم يكن لدي وصول الجذر المطلوب (الامتيازات الإدارية الكاملة) إلى خادم الويب ، لذلك قمت بتقسيم CW Image Optimizer وأعدت كتابته للعمل مع الاستضافة المشتركة. كان هذا هو الإصدار الأول مـن محسن صور EWWW.
أنت تعلم أنني لديك أن أسأل لماذا اسم “EWWW “ محسن الصورة؟
(ضحك) اسم العمل الذي توصلت إليه أثناء قيامي بالاستشارات عبر الويب كان WWW بالضبط – ليس أصليًا للغاية. ولكن بعد ذلك أدركت أن EWWW كما فـ ي “EWWW ، صورك مقرفة وضخمة ومتضخمة” ، كانت مضحكة نوعًا ما ، لذلك ركضت معها للتو!
https://www.youtube.com/watch؟v=xAGtdv3vrYg
لماذا تحسين الصورة؟
ما نراه هو قيام الأشخاص بتحميل الصور مباشرة مـن هواتفهم أو كاميراتهم إلى مواقعهم. وهذا يعني أنه مع الكاميرات الأحدث ، فإنهم يضعون صورًا بحجم الملصق بدقة 12 ميجابكسل عــل ى موقعهم – وهي صور يذهب إليها معظم الأشخاص يشاهدون عــل ى شاشات هواتفهم الصغيرة. حتى عــل ى شاشة الكمبيوتر الرائعة التي تبلغ 1080 بكسل ، لا أحتاج إلى صور بحجم الملصق. لذا ، فإن الجزء الأول مـنها هو أن الأبعاد كبيرة جدًا بالنسبة إلى صفحة الويب.
الجزء الآخر أصعب قليلاً. بصرف النظر عن أن ملفات الصور بحجم الملصق ثقيلة بشكل غير ضروري ، فإنها تحتوي أيضًا عــل ى تفاصيل أكثر بكثير مما يمكن عرضه عــل ى شاشة الكمبيوتر العادية. وهذا يمـنحك مساحة كبيرة للقيام بالكثير مـن الضغط فـ ي تنسيق JPEG دون أي فقد ملحوظ فـ ي جودة الصورة. عــل ى سبيل المثال ، يمكنك التقاط صورة بحجم 8 ميجا بايت (وهي أكبر بثلاث مرات تقريبًا مـن متوسط موقع الويب بمفرده!) وضغطها بسهولة إلى أقل مـن 1 ميجا بايت.
الآن ، عــل ى الرغم مـن أن الضغط يقلل مـن وزن ملف الصورة ، إلا أنه لم يغير حجم الصورة ، وستظل أبعاد تلك الصورة 1 ميجا بايت كبيرة جدًا. لذلك ، نتخذ هذه الخطوة الإضافـ ية لتغيير حجمها إلى الحجم المـناسب الارتفاع والعرض للصفحة.
إذن هاتان الوظيفتان الرئيسيتان لتحسين الصورة ؛ ضغط حجم الملف عن طريق التخلص مـن القليل مـن الجودة التي لن يتم ملاحظتها أبدًا عــل ى الشاشة ثم تغيير حجمها.
التشبيه الذي أحب استخدامه هو التعبئة فـ ي رحلة. إذا قمت بإلقاء كل الملابس مـن الأدراج فـ ي حقيبة ، فلن يكون ذلك فعالًا للغاية لأنك ستأخذ الكثير مـن الأشياء التي لا تحتاجها. ولكن إذا كنت ترتدي الملابس ، وتخلصت مما هو غير ضروري وأعدت تعبئته بشكل صحيح ، فمـن المحتمل أن تتمكن مـن وضع كل شيء فـ ي حقيبة بحجم نصف هذا الحجم ولا تدفع الكثير فـ ي شركة الطيران! ضغط الصور مـن هذا القبيل – إعادة حزم البيانات فـ ي حاوية أكثر كفاءة أو حقيبة.
ما هي مزايا استخدام الصور المضغوطة عــل ى الموقع؟
عندما يتم تحسين الصور ، يتم تحميل موقعك بشكل أسرع ، مما يجعل موقع الويب الخاص بك تجربة أفضل للزائرين ، مما يؤدي إلى المزيد مـن التحويلات أو المبيعات أو الاشتراك فـ ي الرسائل الإخبارية.
يمكن أن يكون مفـ يدًا أيضًا لتصنيفات تحسين محركات البحث (SEO) حيث تقول Google إن السرعة مهمة.
كيف يعمل EWWW Image Optimizer؟
هذا سؤال كبير! هناك الطريقة التقليدية التي تقوم بشكل أساسي بتمشيط جميع الصور الموجودة عــل ى موقعك وضغطها وإعادة حفظها مباشرة عــل ى الخادم الخاص بك. يمكن القيام بذلك إما باستخدام الأدوات المجانية المرفقة مع المكون الإضافـ ي الخاص بنا أو باستخدام الضغط المتميز الخاص بنا API الذي يرسل الصور إلى خادمـنا حيث يقوم بكل السحر ثم يعيد النسخ المضغوطة إلى الخادم الأصلي. نظرًا لأن الصور المحسنة تحل محل الصور الأصلية عــل ى الخادم ، فلن تضطر أبدًا إلى تحديث أي عناوين URL أو القلق بشأن الروابط المعطلة.
فـ ي العامين الماضيين ، كان هناك الكثير مـن الجذب للطريقة الأحدث لإرسال صورك عبر شبكة توصيل المحتوى لتحسينها. إنه شيء تفعله CloudFlare واثنين مـن شبكات CDN الأخرى إلى حد ما ، ولكن لم يكن هناك أي فائدة تكامل مع WordPress باستثناء تلك الموجودة فـ ي Jetpack. تنسخ CDN و ExactDN الصور إلى خادمـنا حيث تقوم بضغطها وتغيير حجمها واقتصاصها ومقاييسها ، وإذا لزم الأمر ، يتم تحويلها إلى تنسيق WebP للجيل التالي مـن Google. وبهذه الطريقة ، تظل جميع الصور الأصلية عــل ى الخادم الخاص بك ، آمـن ومضمون ، بينما يتم تخزين الإصدارات المحسّنة عــل ى خوادم CDN الخاصة بنا. لا يزال عليك القلق بشأن الروابط المعطلة لأن الكود الخاص بنا يقوم تلقائيًا بتغيير عناوين URL لارتباط الصور للإشارة إلى الإصدار المحسن فـ ي CDN الخاص بنا.
بالطبع ، هذا يستغرق وقتًا ، لذلك نقوم بتخزين كل شيء مؤقتًا. وبهذه الطريقة ، يجب القيام بذلك مرة واحدة فقط ، ويتم تحسين جميع الصور عــل ى هذا الموقع إلى الأبد وإلى الأبد. أعلم أن الأمر يبدو معقدًا نوعًا ما ، ولكنه فـ ي الواقع بسيط للغاية – صفقة بنقرة واحدة وبام! تم تحسين جميع صور موقعك.
كيف أعرف أي إصدار مـن EWWW IO هو الأفضل بالنسبة لي؟
الشيء الرئيسي الذي يجب مراعاته عند اتخاذ هذا القرار هو ما إذا كانت مساحة التخزين المضمـنة فـ ي خطة الاستضافة الخاصة بك مشكلة. شخص ما لديه خطة استضافة 10 جيجا بايت وتستهلك صوره 9 جيجا بايت سيكون قلقًا بشأن إمكانية نفاد المساحة. مع حل API ، يمكنهم ضغط صورهم مباشرة عــل ى الخادم وتقليص ذلك إلى 3 غيغابايت فقط ، لذلك هذا سبب تمامًا لاختيار API عــل ى CDN.
خلاف ذلك ، لديهم إلى حد كبير نفس الضغط. مـن الناحية الفنية ، يكون الضغط عــل ى واجهة برمجة التطبيقات أعــل ى قليلاً لأن لديك ما يصل إلى 30 ثانية ، أحيانًا أكثر اعتمادًا عــل ى بيئة الاستضافة ، لضغط صورة واحدة. نحن لا نستخدم ذلك ضغط عالي للغاية عــل ى شبكة CDN لأنه يجب القيام بكل شيء عــل ى الفور تقريبًا بسرعة فائقة.متوسط ضغط ExactDN هو 45٪ مقارنة بضغط 55٪ باستخدام API ، لذا فهو حقًا مجرد اختلاف بسيط.
ما هي تنسيقات الملفات المدعومة فـ ي EWWW؟
أتحدث عن JPEG أكثر مـن غيره نظرًا لأن هذا هو تنسيق الويب الأكثر شيوعًا ، لكننا ندعم أيضًا التنسيقين التقليديين الآخرين لـ PNG و GIF.
ضغط PDF مدعوم فقط فـ ي Compression API الذي يستخدم الوضع الأصلي للضغط والاستبدال مباشرة عــل ى الخادم. لا نقدم هذه الميزة فـ ي ExactDN لأن ملفات PDF هي ملفات كبيرة جدًا وضغطها سريعًا حقًا بطيء جدًا و غير فعال.
إحدى الميزات الضخمة المدعومة فـ ي كلا الإصدارين هي القدرة عــل ى تحويل صور JPEG و GIF و PNG إلى تنسيق WebP الجديد مـن Google. ومع ذلك ، يقوم ExactDN بعمل أسهل طريقة بسبب التبديل المدمج به لتحويل الصور تلقائيًا إلى WebP.
ما هو تنسيق WebP الجديد مـن Google ومميزاته؟
بالتأكيد ، WebP هو تنسيق صور الجيل التالي مـن Google والمقصود أساسًا أن يكون بديلاً كاملًا لكل تنسيق صورة آخر. إنه يحتوي عــل ى جميع الأجراس والصفارات مثل الرسوم المتحركة والشفافـ ية مع تقديم ضغط أفضل فـ ي المتوسط حتى مـن JPEG.
أشعر أن تنسيق JPEG بلغ ذروته نوعًا ما ، وبينما لا يزال هناك الكثير مما يمكننا فعله به ، سيوفر لك WebP نسبة إضافـ ية مـن خمسة إلى عشرة بالمائة مقارنة بضغط فقد نموذجي. أعتقد أن هذا مجرد نوع مـن التطور الطبيعي للتكنولوجيا والأشخاص يصبحون أكثر ذكاءً ويكتشفون طرقًا أفضل لضغط الصور.
إنه مكسب كبير لأننا نريد أن تبدو مواقع الويب الخاصة بنا جيدة وأن يتم تحميلها بسرعة. لطالما كان عدم التضحية بالجودة مـن أجل السرعة هو الشيء المفضل لدي!
تعد الأنواع المختلفة لطرق الضغط أكثر ملاءمة لأنواع مختلفة مـن الصور. كيف يمكن أن يكون تنسيق واحد مثل WebP هو الحل الأفضل لجميع أنواع الصور؟
يشبه الأمر تقريبًا تلك التنسيقات المختلفة المضمـنة فـ ي WebP ، لكنها ليست فـ ي الواقع تنسيقات ، إنها أشبه بالسمات.لذا ، لديها وضع ضياع ، ضغط نمط JPEG وهو أكثر ملاءمة للصور الفوتوغرافـ ية و وضع بدون فقدان ، وضغط نمط PNG أكثر ملاءمة للنص ، والرسوم التوضيحية والصور الأخرى ذات الألوان المسطحة التي تحتاج إلى الحفاظ عــل ى الحدة. لذلك يتفوق WebP حقًا فـ ي هذا المجال.
ومع ذلك ، فقد بدأت بعض المتصفحات الرئيسية مثل Firefox و Edge فـ ي دعم WebP خلال العام الماضي ، ولا أعرف أنها تدعم الرسوم المتحركة لـ WebP حتى الآن. إنها واحدة مـن تلك المجالات التي لا تزال فـ ي الأفق ، وأنا بالتأكيد سنبدأ فـ ي تحويل صور متحركة إلى WebP أيضًا.
ما هو Lazy Loading وكيف يساعد فـ ي التحسين؟
Lazy Loading هي تقنية تمـنع تحميل الصور حتى تكون عــل ى الشاشة (أو بالقرب مـنها). وتتمثل الميزة الأولى فـ ي مـنع عرض النطاق الترددي الضائع للصور التي لا ينظر إليها الزائر مطلقًا ، وهو أمر يمكن أن يكون مهمًا بشكل خاص لمستخدمي الأجهزة المحمولة. ثانيًا ، مـنذ ذلك الحين غالبًا ما تكون الصور هي الجزء الأكبر مـن حجم / حمولة موقع الويب ، وسيؤدي التحميل البطيء لهذه الصور إلى تحميل الصفحة بشكل أسرع.
مع ExactDN ، تتمثل الميزة الإضافـ ية للمحمل البطيء فـ ي أنه يمكنه تغيير حجم الصور ديناميكيًا إلى حجم شاشة الزائر.
