تحسين الصور للويب: دليل عملي

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

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

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

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

هل أنت جاهز لتحسين صورك؟

خيارات نوع ملف الصورة

هناك ثلاثة أنواع رئيسية من الملفات نريد التركيز عليها لحفظ الصور المحسّنة للويب: GIF و JPG و PNG. كل نوع من أنواع الملفات له نقاط القوة والضعف الخاصة به ومن المهم للغاية معرفة ذلك ووضعه في الاعتبار عند حفظ الصورة.

العمل مع JPGs

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

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

العمل مع PNGs

PNGs هي تنسيق ملف شائع آخر على الإنترنت. في Adobe Photoshop ، سيكون لديك خيار حفظ ملفات PNG بتنسيق PNG-8 أو PNG-24.

• يحتوي PNG-8 على لوحة ألوان محدودة للغاية تتكون من 256 لونًا. بينما يكون حجم الصورة أصغر ، لن يكون هذا خيارًا جيدًا للصور والصور المعقدة.
• يوفر PNG-24 صورة عالية الجودة ولكنها تأتي على حساب حجم ملف أكبر.

الأهم من ذلك ، يمكن لملفات PNG التعامل مع الشفافية. هذه واحدة من أكبر نقاط التمايز بين PNG و JPEG.

العمل مع ملفات GIF

كانت صور GIF أكثر شيوعًا منذ سنوات عديدة ، لكنها لا تزال خيارًا لأحجام الصور الصغيرة حيث لا يلزم سوى عدد قليل من الألوان. تمامًا مثل PNG-8 ، تقتصر ملفات GIF على 256 لونًا فقط. لهذا السبب ، لا ينبغي أبدًا استخدام صور GIF في صور المنتج.

حفظ الصور بشكل صحيح

كما هو متوقع ، يستغرق تحميل الصور الكبيرة وقتًا أطول. عندما نقول كبير ، فإننا نشير إلى حجم الملف بدلاً من أبعاد الصورة ، أي القيمة بالكيلو بايت ، والميجابايت ، والجيجابايت وما إلى ذلك. نظرًا لأن 47٪ من المستخدمين يتوقعون تحميل صفحة ويب في أقل من ثانيتين ، و 40 سيتخلى٪ عن الصفحة التي يستغرق تحميلها أكثر من 3 ثوانٍ ، ومن المهم أن تكون صورك صغيرة بما يكفي لضمان سرعة الموقع.

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

احفظ الأبعاد الصحيحة

يجب فتح الصورة في Photoshop ومشاهدتها بنسبة 100٪. يتيح لك ذلك عرض الصورة بالحجم الدقيق الذي سيتم عرضها على شاشة الكمبيوتر عند حفظ الصورة للويب.

حفظ الصور للويب

من الممكن تقليل حجم الملف دون تقليل جودة الصور بشكل ملحوظ. إن طريقتنا المفضلة لتقليل حجم الملف دون تقليل جودة الصورة بشكل كبير هي استخدام وظيفة "Save for Web" في Photoshop. افتح صورتك في Photoshop وانتقل إلى File> Export> Save for Web (Legacy)…. ستظهر نافذة تسمح لك باختيار جودة التصدير. نجد أن جودة 60 تعمل بشكل أفضل لأنها تقلل حجم الملف إلى أقل من ميغا بايت ولا يوجد فرق ملحوظ في الجودة.

ضغط الصور للويب

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

تطبيقات وخدمات ضغط الصور

• ImageOptim
• بكسل قصير
• TinyJPG
• TinyPNG
• ضاغط
• وحش بحري أسطوري
• محسن الصورة
• Crush Pics (Shopify التطبيق)
• المصغر (Shopify التطبيق)

حفظ صورة للويب: مثال توضيحي

للبدء ، دعنا نتظاهر بأننا Stiff Salt (مملوك بالفعل لصديق و Shopify Developer) وأردنا تغيير صورة الميزة في متجرنا عبر الإنترنت.

أعددنا مشهدًا ، ونجعل الملح يبدو مذهلاً تمامًا ونلتقط صورة بكاميرا DSLR. عظيم لدينا صورتنا. يا له من جمال!

لكن ... حجم الملف ضخم! 14.6 ميغابايت على وجه الدقة. وأبعاد الصورة 5184 × 3456 بكسل. هذا غير قابل للاستخدام تمامًا الآن. إنه حرفيًا كبير بما يكفي لطباعة ملصق بحجم الفيلم. بحجم 14.6 ميغابايت ، ستستغرق هذه الصورة وقتًا طويلاً للتحميل على كمبيوتر الزائر. هذا ليس جيد.

حان الوقت للعمل وتقليل حجم الصورة وحجم الملف - بشكل ملحوظ.

تذكر أننا سنفعل ثلاثة أشياء للصورة.

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

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

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

• تصغير حجم الصورة قبل الحفظ
• قم بتقليل حجم الصورة أثناء حفظ الصورة
• احفظ الصورة ، ثم قم بتقليل حجم الصورة

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

لمعرفة الحجم ، نظرنا إلى حجم صورة الصفحة الرئيسية المقترحة للموضوع. كانت 1600 × 800 بكسل (تذكر أن الأصل كان 5184 × 3456 بكسل).

في Photoshop ، سنقوم بتحديد Image> Image Size.

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

حفظ الصورة بشكل مناسب (حفظ للويب)

في Photoshop ، يوجد أمر محدد يسمى "Save For Web" يعمل على تحسين ملف الصورة للعرض عبر الإنترنت. هذا مهم لأن الأمر العادي "حفظ" يمكن أن ينتهي بإنشاء أحجام ملفات أكبر مرتين أو ثلاث مرات من أمر "Save For Web".

في مربع "Save For Web" ، نحتاج إلى إجراء بعض التحديدات.

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

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

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

• الحد الأقصى: 1.38 ميجا بايت
• مرتفع جدًا: 611 كيلو بايت
• عالية: 339 كيلو بايت
• متوسط: 152 كيلو بايت
• منخفض: 86 ألفًا

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

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

بشكل أساسي ، يعد الحفظ للويب عملية موازنة - يجب أن توازن بين جودة الرسومات وحجم ملف الوسائط لتناسب احتياجاتك الشخصية.

ضغط الصور للويب

إذا كنت تستخدم Adobe Photoshop ، فسيكون قد قام بالفعل بعمل رائع حقًا في تقليل حجم الصورة ، ومع ذلك ، لا يزال بإمكانك قص 5-10٪ أخرى من حجم الصورة باستخدام تطبيق ضغط مثل ImageOptim و / أو ShortPixel.

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

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

استنتاج

للتلخيص ، كانت صورتنا ضخمة إلى حد الجنون عندما بدأنا ، ومع ذلك ، مع بضع خطوات بسيطة ، قللنا حجم الصورة من 5184 × 3456 إلى 1600 × 800 بحيث تكون مناسبة تمامًا لصفحتنا الرئيسية ، وفي الوقت نفسه ، أخذنا من 14.4 ميغا بايت تعطل الكمبيوتر ، وصولاً إلى 336 كيلو بايت أكثر معقولية.

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

كيفية تحسين الصور للويب: إرشادات الفيديو