تحسين الصورة لتحسين محركات البحث: ما الذي ينقل العناصر الحيوية الأساسية للويب فعليًا

أكبر فوز منفرد في الأداء قمت بشحنه على الإطلاق على موقع التسويق WP Adminify&#39؛ كان &#39؛ مكونًا إضافيًا للتخزين المؤقت أو تعديل CDN. كان يحذف صورة واحدة. كان بطلنا القديم عبارة عن لقطة شاشة PNG بدقة 2400 بكسل I&#39؛ تم تصديرها إلى &quot؛ الجودة الكاملة والحصة؛ لأنني اعتقدت بعناد أن PNG تعني واضحة. كان حجم هذا الملف 1.4 ميجابايت. على نظام Android متوسط المدى عبر 4G، كان أكبر عنصر طلاء محتوى - وكان يسحب LCP إلى 4.1 ثانية تقريبًا. لقد قمت باستبداله بـ 84 كيلو بايت ويب بي عند عرض العرض الفعلي وانخفض LCP إلى أقل من 1.9 ثانية بعد ظهر نفس اليوم. لا رمز. مجرد صورة أصغر.

هذا &#39؛ هو الشيء المحبط في تحسين محركات البحث للصورة. It&#39؛s ليست غريبة. الصور عادة ما تكون أثقل شيء على الصفحة - غالبًا ما تكون قريبة من نصف إجمالي البايتات - ومع ذلك فإن معظمنا يعاملها كفكرة لاحقة. نقوم بإسقاط كاميرا أصلية في نظام إدارة المحتوى، واكتب &quot؛ لقطة شاشة واقتباس؛ في الحقل البديل، والمضي قدمًا. ثم نتساءل لماذا الحيوية الأساسية للويب تقرير في وحدة تحكم البحث ينزف باللون الأحمر على الهاتف المحمول.

هذا الدليل هو قائمة المراجعة التي أقوم بتشغيلها فعليًا على مواقع Toolz.dev ومواقع العملاء، وهي مكتوبة من منظور شخص يقوم بشحن هذه الأشياء. أنا &#39؛ سأكون صادقًا بشأن ما تفعله الأدوات المجانية وما تفعله - بنفس القدر من الأهمية - &#39؛ر. كل أداة صورة قيد التشغيل تولز.ديف يعمل بالكامل في متصفحك على أ <canvas>، لذلك لا يتم تحميل أي شيء تتنازل عنه في أي مكان. وهذا له عواقب حقيقية على سير عملك، بعضها جيد، وبعضها مزعج. نحن &#39؛ سوف نصل إلى كليهما.

ليرة تركية؛DR: قم بتغيير حجم الصورة إلى عرض العرض الحقيقي أولاً، ثم اضغط عليها، ثم قدم تنسيقًا حديثًا. في الممارسة العملية، &#39؛ ثلاث تمريرات: تغيير حجم الصورة لقطع أبعاد البكسل، ضغط الصورة للضغط على البايتات، و محول التنسيق للحصول على ويب. يضيف width/height سمات لإيقاف تغيير التخطيط، وكتابة نص بديل قد يقوله الإنسان بصوت عالٍ، وتحميل أي شيء أسفل الطية. افعل ذلك وسيتحسن كل من LCP وCLS - يتم تصنيف Core Web Vitals Google المعتمد على الصور بالفعل.

لماذا تعتبر الصور مهمة جدًا لتحسين محركات البحث؟

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

هناك &#39؛ قناة مرور ثانية ينسىها الناس: صور Google. بالنسبة للكثير من مواقع التجارة الإلكترونية والوصفات والسفر والتصميم، يعد البحث عن الصور شريحة ذات معنى من الزيارات العضوية، وأحيانًا خمسها. تعتمد حركة المرور هذه كليًا على الأشياء التي يمكن للزاحف قراءتها - اسم الملف، والنص البديل، والنسخة المحيطة، وما إذا كانت الصورة صغيرة بما يكفي لفهرستها على الفور.

ثم هناك &#39؛ إنها مملة ولكنها حقيقية: عرض النطاق الترددي يكلف المال والصبر. الصفحة التي تشحن 3 ميجابايت من الصور ترتد مستخدمي الهاتف المحمول على اتصالات محددة قبل أن يروا عنوانك الرئيسي. الصفحات الأسرع تبقي الأشخاص في الجوار، والمشاركة، مهما كانت قياسات Google لها، لا تؤذي &#39؛t.

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

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

JPEG مخصص للصور الفوتوغرافية - أي شيء ذو تدرجات سلسة وآلاف الألوان. It&#39؛s مع فقدان البيانات، وهو بالضبط ما تريده للصورة. بجودة 75 بوصة85، يكون الضغط غير مرئي للمشاهد العادي والملف جزء صغير من الملف الأصلي. Don&#39؛ استخدمه لأي شيء ذي حواف صلبة أو نص أو شفافية.

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

ويب بي هو الإعداد الافتراضي العملي في عام 2026. فهو يؤدي إلى فقدان البيانات وعدم فقدانها، ويدعم الشفافية والرسوم المتحركة، وعادةً ما يكون أصغر بنسبة 25.34% من JPEG بجودة مطابقة. دعم المتصفح عالمي الآن. هذا هو التنسيق الذي أقوم بتحويل كل شيء إليه تقريبًا.

أفيف يضغط بشكل أصعب - غالبًا ما يكون أصغر بشكل ملموس من WebP - لأنه &#39؛s مبني على برنامج ترميز الفيديو AV1. إنه &#39؛ تنسيق رائع. لكن يجب أن أكون مباشرة معك هنا، لأن الكثير من الأدلة (بما في ذلك مسودة استبدال هذه المقالة) تخبرك بـ &quot؛ ما عليك سوى التحويل إلى AVIF&quot؛ باستخدام أداة عبر الإنترنت، وthat&#39؛s ليس كيفية عمل ترميز لوحة المتصفح.

SVG مخصص للمتجهات: الأيقونات والشعارات والرسوم التوضيحية البسيطة. يتدرج إلى ما لا نهاية ويظل صغيرًا. It&#39؛s عديمة الفائدة للصور.

تحذير AVIF لم يذكره أحد

هنا&#39؛s البت الصادق. Toolz.dev&#39؛s محول التنسيق الصادرات PNG أو JPEG أو WebP- وهؤلاء الثلاثة فقط. يمكنه &#39؛ إخراج AVIF، ولا يمكن لمعظم المحولات الموجودة في المتصفح أيضًا. السبب تقني: تقوم الأداة برسم صورتك على ملف <canvas> والمكالمات canvas.toBlob('image/webp', quality). يقوم برنامج تشفير اللوحة القماشية المتصفح &#39؛s بشحن JPEG وPNG وWebP؛ لا يقوم بشحن برنامج تشفير AVIF. لذلك لا توجد طريقة للضغط على AVIF من اللوحة القماشية، نقطة.

لا يزال بإمكانك يغذي ملف AVIF في - يقوم المتصفح بفك تشفير AVIF بسعادة عبر new Image()، لذلك يتم عرض إدخال AVIF على اللوحة القماشية بشكل جيد. يمكنك فقط &#39؛ الحصول على واحدة مرة أخرى. It&#39؛s عدم تناسق فك التشفير والتشفير، وهو ما يؤدي إلى تعثر الناس باستمرار.

لذا نصيحتي الواقعية: استخدم محول التنسيق لخطوة WebP، وهي الخطوة التي تغطي 95% من الفوز. إذا كنت تريد AVIF في الأعلى، فقم بإنشائه في مسار البناء الخاص بك باستخدام sharp، avifenc، أو برنامج التشفير غير المتصل بالإنترنت Squoosh&#39؛s - that&#39؛s حيث ينتمي AVIF على أي حال، لأن ترميزه بطيء وأنت لا تريد &#39؛ أن تفعل ذلك يدويًا لكل صورة.

كيف يمكنك ضغط الصور دون تدمير الجودة؟

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

لذا فإن سير العمل هو: مفتوح تغيير حجم الصورة، اضبط العرض على أكبر حجم ستعرضه الصورة فعليًا (راجع التخطيط الخاص بك - غالبًا ما تكون صورة نص المدونة 720 نزيخًا و800 بكسل، وليس 1920). يتناسب المُعد داخل المربع المستهدف ولا يتمدد أو يحصد أبدًا، لذا فإن نسبة العرض إلى الارتفاع آمنة. ثم خذ هذا الإخراج إلى ضغط الصورة واسحب الجودة إلى الأسفل حتى تتمكن من معرفة ذلك بالكاد - عادةً 78 بوصة 82 للصور. قم بالمعاينة بالتكبير الكامل قبل الالتزام؛ تخفي القطع الأثرية التدرجات وألوان البشرة، وليس في الصورة المصغرة.

رقم واحد يجب تثبيته: بالنسبة لمحتوى الصور الفوتوغرافية، الجودة 80 هي الإجابة المملة والموثوقة. I&#39؛ve A/B&#39؛d 80 مقابل 90 في لقطات المنتج الحقيقي، وبتكبير 100% على شاشة جيدة، يستطيع معظم الأشخاص &#39؛t الاتصال به. لكن 80 غالبًا ما يكون أصغر بنسبة 40%. أقل من 60 عامًا تقريبًا، تبدأ في رؤية القطع الأثرية الممتلئة في المناطق الملساء، بحيث تكون الأرضية &#39؛ لأي شيء سوى صورة مصغرة صغيرة.

اثنين من المتصفحات التي سوف تربكك

كل منهما كلفني وقتًا حقيقيًا لتصحيح الأخطاء، لذا تعلمهما مجانًا.

Png الشفاف → JPEG يحول الخلفية إلى اللون الأسود وليس الأبيض. لقد قمت ذات مرة بتحويل شعار شفاف إلى JPEG وخرجت المناطق الشفافة باللون الأسود الصلب. افترضت أن الأداة معطلة وقضيت عشرين دقيقة أحدق بها. It&#39؛s ليس خطأ - it&#39؛s مواصفات HTML. عندما تقوم بإجراء تسلسل للوحة قماشية إلى تنسيق بدون قناة ألفا (JPEG)، يتم تركيب وحدات البكسل الشفافة على اللون الأسود الصلب. إذا كنت بحاجة إلى الشفافية، فاحتفظ بـ PNG أو استخدم WebP، الذي يدعم ألفا. إذا كنت تريد خلفية بيضاء على وجه التحديد، فضع طبقة بيضاء أولاً.

كل إعادة تشفير تجرد بيانات تعريف EXIF وGPS. نظرًا لأن هذه الأدوات تعيد رسم الصورة على لوحة قماشية جديدة، فإن الإخراج لا يحتوي على EXIF، ولا معلومات الكاميرا، ولا إحداثيات GPS مضمنة. هذا &#39؛ فوز حقيقي بالخصوصية - أنت &#39؛ لا تنشر عن طريق الخطأ خط الطول/خط العرض الذي ختمه هاتفك في صورة. لكنه &#39؛s أيضًا مسكتك إذا كنت تعتمد على ملفات تعريف الألوان المضمنة أو البيانات التعريفية لحقوق الطبع والنشر؛ هذه أيضًا. بالنسبة لتحسين محركات البحث، لا يهم &#39؛ لا يهم، ولكن اعرف ذلك ويحدث #39؛s.

كيف تعمل الصور سريعة الاستجابة وsrcset؟

يعرض الهاتف الصور بعرض 390 بكسل. يؤدي شحنه إلى ملف بحجم 1920 بكسل إلى إهدار معظم البايتات التي قمت بضغطها بعناية. srcset يعمل على إصلاح ذلك عن طريق تسليم المتصفح قائمة بالأحجام والسماح له بالاختيار.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Matte-black wireless headphones on a walnut desk"
  width="800" height="600" loading="lazy" />

لإنشاء هذه الملفات الثلاثة، قم بتشغيل نفس المصدر من خلالها تغيير حجم الصورة عند 400 و800 و1200px، قم بتحويل كل منها إلى WebP. ال sizes السمة هي الجزء الذي يتخطاه الأشخاص، وتخطيه يكسر الأمر برمته بهدوء - بدونها، يفترض المتصفح أن الصورة تملأ إطار العرض وتلتقط أكبر مرشح. أخبره بمدى اتساع الصورة حقًا ويقوم بتنزيل الصورة الصحيحة.

كيف تكتب نصًا بديلًا يساعدك بالفعل؟

النص البديل هو النصف الآخر من تحسين محركات البحث للصورة وهو &#39؛s يندفع نصف المطورين. يقوم بثلاث وظائف في وقت واحد: it&#39؛s ما يقرأه قارئ الشاشة بصوت عالٍ لمستخدم أعمى، it&#39؛s كيف يفهم الزاحف ما تظهره الصورة، و &#39؛s النص الاحتياطي إذا فشلت الصورة في التحميل. إن القيام بذلك بشكل صحيح يدور في الغالب حول الكتابة كشخص، وليس روبوت الكلمات الرئيسية.

القاعدة التي أستخدمها: وصف الصورة بالطريقة التي تصفها بها &#39؛ د تصفها لشخص ما في مكالمة هاتفية. محدد وطبيعي وقصير - أقل من 125 حرفًا تقريبًا، لذا لا يفعل قراء الشاشة &#39؛ ثم اقتطاعها بشكل محرج. تخطي &quot؛ صورة &quot؛ أو &quot؛ صورة، &quot؛ لأن قارئ الشاشة يعلن بالفعل أنه &#39؛s صورة؛ القيادة مع تلك تضيع وقت المستمع &#39؛s. وإذا كانت الكلمة الرئيسية المستهدفة تناسب الصورة حقًا، قم بتضمينها مرة واحدة، بشكل طبيعي. إذا لم يكن &#39؛t مناسبًا، فاتركه - صورة لوحة المفاتيح لا &#39؛t بحاجة &quot؛ شراء سماعات رأس لاسلكية رخيصة الثمن وحاصل عليها؛ محشورة في بديلها.

عدد قليل قبل/بعد المراجعات الحقيقية I&#39؛ لقد فعلت:

• alt="image" → alt="Matte-black wireless headphones on a walnut desk"
• alt="chart" → alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"
• alt="best cheap headphones buy now free shipping sale" (محشوة بالكلمات الرئيسية) → alt="Over-ear headphones with the carrying case open beside them"

أحد الفروق الدقيقة التي يخطئ فيها الناس: الصور الزخرفية البحتة - الفاصل، وزخرفة الخلفية - يجب أن تحتوي على فارغ alt=""، وليس وصفا. البديل الفارغ يخبر قارئ الشاشة بتخطيه بالكامل، وهو بالضبط ما تريده للزينة. حجز نص بديل حقيقي للصور التي تحمل معلومات.

بينما أنت &#39؛ تفضل بتسمية الملف وصفيًا أيضًا. wireless-headphones-matte-black.webp يدق IMG_4532.jpg لأن محركات البحث تقرأ اسم الملف كإشارة، والواصلات (وليس الشرطة السفلية) هي الفاصل الذي يوزعه Google عند فواصل الكلمات.

إلى أي مدى يؤدي هذا بالفعل إلى تغيير العناصر الحيوية الأساسية للويب؟

LCP (أكبر طلاء محتوى): بطلك عادة ما يكون عنصر LCP. قم بخدمتها بالأبعاد الصحيحة، في WebP، بجودة ~ 80، وبشكل حاسم - افعل ذلك لا كسول تحميلها. يعد تحميل البطل فوق الطية كسولًا أمرًا كلاسيكيًا خاصًا بذاته؛ فهو يؤخر العنصر الدقيق الذي يقيسه LCP. إذا كان &#39؛ البطل، <link rel="preload" as="image"> انها بدلا من ذلك.

CLS (التحول التراكمي للتخطيط): ضع دائما width و height على ال <img>. تتيح هاتان السمتان للمتصفح حجز المساحة قبل وصول الصورة، لذلك لا يصل النص &#39؛t عندما يتم تحميله. هذا هو أرخص إصلاح CLS موجود وما زلت أجد مواقع تفتقده.

INP (التفاعل مع الطلاء التالي): الصور لا &#39؛ يؤدي إلى تشغيل INP مباشرة، ولكن اختناق الصفحة بسعة 3 ميجابايت من الصور غير المحسنة يؤدي إلى تجويع الخيط الرئيسي وشبكة السعة التي يحتاج جافا سكريبت إلى الاستجابة لها. صور أخف وتفاعلات أكثر سرعة وبشكل غير مباشر.

بعض الأشياء I&#39؛ لقد تعلمت الطريقة المزعجة

التدقيق قبل التحسين. قم بتشغيل الصفحة من خلال PageSpeed Insights وأصلح الملف الأثقل أولاً - فالمخالف الذي يبلغ حجمه 1.2 ميجابايت مهم أكثر من مجرد حذف 4 كيلو بايت من الأيقونة. تسمية الملفات مثل الإنسان: wireless-headphones-matte-black.webp يدق IMG_4532.jpg في البحث عن الصور لأن الزاحف يقرأ اسم الملف كإشارة محتوى. اكتب نصًا بديلًا لك &#39؛ في الواقع، قل وصفًا للصورة لشخص ما على الهاتف - كلمة رئيسية محددة وطبيعيةمتضمن فقط حيث يناسبك، لا يحشو الكلمات الرئيسية أبدًا. ودون &#39؛ ننسى الخاص بك افتح الرسم البياني مشاركة الصورة؛ الحجم الصحيح 1200×630 الذي صنعته تغيير حجم الصورة هو ما يظهر في المعاينات الاجتماعية، وفي بعض الأحيان، البحث.

الأسئلة الشائعة

هل يؤثر تحسين الصورة حقًا على تصنيفات تحسين محركات البحث؟

نعم، من خلال العناصر الحيوية الأساسية للويب. LCP وCLS هما إشارات تصنيف Google مؤكدة، وكلاهما يعتمد بشكل كبير على الصور. تعمل الصور المحسنة عادةً على تحسين درجات سرعة صفحة الهاتف المحمول بهامش ملحوظ، وعلى الهاتف المحمول الذي يمكن ترجمته إلى حركة التصنيف. كما أنه يفتح صور Google كمصدر منفصل لحركة المرور.

هل يمكنني تحويل الصور إلى AVIF باستخدام أداة مجانية عبر الإنترنت؟

عادةً لا، ويمكن لمحول التنسيق Toolz.dev&#39؛s &#39؛t. تقوم المحولات الموجودة في المتصفح بالرسم إلى <canvas>، ويقوم برنامج تشفير اللوحة القماشية للمتصفح &#39؛s بإخراج JPEG وPNG وWebP فقط - هناك &#39؛s لا يوجد برنامج تشفير AVIF متاح له. قم بالتحويل إلى WebP عبر الإنترنت لتحقيق معظم المكاسب، وقم بإنشاء AVIF في مسار البناء الخاص بك باستخدام أدوات مثل Sharp أو avifenc إذا كنت في حاجة إليها.

هل يجب أن أستخدم WebP أو AVIF في عام 2026؟

WebP هو الإعداد الافتراضي الآمن وما أصل إليه أولاً - الدعم الشامل، والتوفير الكبير، ويمكنك تحقيقه في المتصفح. يضغط AVIF بشكل أكبر ويستحق الإضافة لصور الأبطال والمعارض الكبيرة، ولكن قم بإنشائه في وقت الإنشاء وخدمته عبره <picture> مع احتياطي WebP.

ما هو إعداد الجودة الذي يجب أن أضغط عليه JPEG وWebP؟

الجودة 80 هي الإجابة الموثوقة للصور. عادةً ما لا يمكن تمييز It&#39؛s عن النسخة الأصلية عند المشاهدة العادية بينما تكون أصغر بشكل كبير. قم بالمعاينة بتكبير/تصغير بنسبة 100% قبل الالتزام، نظرًا لأن القطع الأثرية تظهر في التدرجات وألوان البشرة. أقل من 60، يصبح الضغط مرئيًا.

لماذا تحول PNG الشفاف إلى اللون الأسود بعد التحويل إلى JPEG؟

لأن JPEG لا يحتوي على قناة ألفا. تقول مواصفات لوحة HTML أن وحدات البكسل الشفافة يتم تركيبها على اللون الأسود الصلب عند إجراء تسلسل إلى تنسيق غير ألفا. السلوك المتوقع لـ It&#39؛s، وليس خطأ. احتفظ بالصورة كـ PNG أو WebP للحفاظ على الشفافية، أو قم بتركيبها على خلفية بيضاء أولاً إذا كنت تريد اللون الأبيض.

هل تقوم هذه الأدوات بتحميل صوري إلى الخادم؟

لا. تقوم أدوات الصور الموجودة على Toolz.dev بمعالجة كل شيء محليًا على لوحة قماشية في متصفحك - الملف لا يترك جهازك أبدًا. أثر جانبي يستحق المعرفة: كل إعادة تشفير تجرد بيانات تعريف EXIF وGPS، وهو أمر جيد للخصوصية ولكنه يعني إسقاط بيانات الكاميرا المضمنة وملفات تعريف الألوان أيضًا.

ماذا &#39؛s حجم الملف المثالي لصورة الويب؟

كهدف تقريبي: صور البطل أقل من ~ 200 كيلو بايت، والصور الموجودة في المحتوى أقل من ~ 100 كيلو بايت، والصور المصغرة أقل من ~ 30 كيلو بايت. يمكن تحقيق ذلك جدًا بمجرد تغيير الحجم إلى عرض العرض الحقيقي وخدمة WebP. الرقم الدقيق أقل أهمية من عادة تغيير الحجم ثم الضغط ثم التحويل.

القراءة والأدوات ذات الصلة:

• ضغط الصورة- قطع حجم الملف بعد تغيير الحجم
• تغيير حجم الصورة- اصنع أحجامًا سريعة الاستجابة وصورًا اجتماعية
• محول التنسيق- تصدير PNG أو JPEG أو WebP
• دليل أدوات الصور للمطور &#39؛s
• وأوضح ضغط الصورة