اجعل الحجم مطابقًا لمكان العرض
انظر إلى أوسع مساحة ستملؤها الصورة في صفحتك. فقد يحتاج بانر بعرض كامل إلى نحو 1600-2000 بكسل. وغالبًا ما تحتاج الصورة داخل عمود المقال إلى 800-1200 بكسل. وقد تحتاج الصورة المصغرة إلى بضع مئات فقط. وعادةً ما تخبرك أدوات المطوّر في المتصفح أو إعدادات القالب بالعرض المعروض. وإن لم تعرفه، فعرض 1200 بكسل خيار آمن شائع لصورة المقال.
راعِ الشاشات عالية الدقة
تعرض الشاشات عالية الكثافة تفاصيل أكثر لكل بكسل. وفي الصور المهمة، فإن استخدام نحو ضعف العرض المعروض يُبقيها حادة. وفي الصور العادية يكفي العرض المعروض نفسه. مضاعفة الحجم تضاعف عدد البكسلات أربع مرات تقريبًا، لذا افعل ذلك فقط حيث تهم الحدّة. وتستفيد الصور ذات التفاصيل الدقيقة أكثر من الرسومات البسيطة أو الخلفيات الضبابية.
حافظ على النسب
غيّر العرض أو الارتفاع فقط ودع الآخر يتبعه. فتمديد الاثنين إلى قيمتين ثابتتين يشوّه الأشخاص والدوائر. وحين تحتاج شكلًا محددًا بدقة، فاقتصّ بدل التمديد. فمثلًا، لتحويل صورة بنسبة 4:3 إلى مربع، اقتصّها إلى مربع أولًا ثم غيّر حجمها إلى العرض الذي تحتاجه.
صغّر ولا تكبّر
تصغير الصورة يعطي نتيجة جيدة. أما تكبيرها فلا يضيف تفاصيل، فتبدو ناعمة الملمس. وإذا احتجت صورة أكبر فابدأ من أصل أكبر. وإذا كان الأصل صغيرًا فغالبًا ما يكون عرضه أصغر أفضل من تمديده.
مثال تطبيقي
افترض أن لديك صورة هاتف بأبعاد 4000x3000 لتدوينة عرض عمود النص فيها 800 بكسل. غيّر حجمها إلى 800x600، أو إلى 1600x1200 إن أردتها حادة على الشاشات عالية الكثافة. وفي الحالتين ينخفض عدد البكسلات كثيرًا مقارنة بالأصل، ويمكن للضغط بعد ذلك أن يقلّص الملف أكثر. الأرقام توضيحية، ويعتمد التوفير الفعلي على الصورة.
حالة ثانية هي شبكة صور مصغرة تظهر فيها كل صورة بعرض نحو 300 بكسل. تحميل صور بالحجم الكامل هناك يثقل الصفحة دون فائدة مرئية. وتغيير حجم كل صورة إلى نحو 300-600 بكسل عرضًا يُبقي الشبكة سريعة وحادة. وصور المنتجات مشابهة: فإذا كان قالب المتجر يعرضها بعرض 600 بكسل، فنسخة بعرض 1200 بكسل تكفي عادةً حتى للشاشات الحادة، بينما يضيف أصل بعرض 5000 بكسل وقت تنزيل فقط.
تحتاج بانرات الواجهة الرئيسية إلى عناية أكبر. فهي تملأ العرض كاملًا، لذا تحقق من أوسع تخطيط تدعمه، وتجنّب وضع نص أساسي داخل الصورة حيث قد يقطعه الاقتصاص على الشاشات الصغيرة.
خطوات العمل
- اعرف العرض المعروض للصورة في صفحتك.
- قرّر هل تريد 1x أم نحو 2x من ذلك العرض.
- افتح الأصل، لا نسخة مصغّرة سابقة.
- اضبط العرض وأبقِ نسبة الأبعاد مقفلة.
- اقتصّ أولًا إن احتجت شكلًا مختلفًا.
- اضغط الصورة بعد تغيير حجمها للويب.
- افحصها على الهاتف وعلى شاشة سطح المكتب.
- استبدل الصورة القديمة في صفحتك وأعد التحميل للتأكد من أنها تبدو سليمة.
أخطاء شائعة
- الاعتماد على المتصفح لتصغير صورة ضخمة، فيظل الزوار ينزّلونها كاملة.
- ضبط العرض والارتفاع معًا فتنضغط الصورة.
- تكبير صورة صغيرة لتملأ بانر.
- تغيير حجم نسخة مضغوطة سابقًا مرارًا.
- نسيان الاحتفاظ بالأصل.
- استخدام حجم واحد لكل صور الصفحة بدل مطابقة كل صورة لموضعها.
قائمة مراجعة سريعة
- العرض المعروض معروف
- الحجم 1x أو نحو 2x منه
- النسب محفوظة
- الأصل لم يُمسّ
- الضغط بعد تغيير الحجم
نصيحة: سمِّ الملف المصغّر اسمًا واضحًا، مثل إضافة العرض في آخره، لتميّزه عن الأصل لاحقًا.
غيّر الحجم واضغط مع DoneImg
افتح أداة تغيير الحجم في DoneImg، وأضف صورتك وأدخل العرض الذي تحتاجه. يقوم متصفحك بالعمل، فلا يُرفع شيء. ثم افتح أداة الضغط لتقليل حجم الملف ونزّل النتيجة. كرّر العرض نفسه لكل صورة في معرض صور لتبدو الصفحة متناسقة ويكون تحميلها متوقعًا. عاين النتيجة دائمًا قبل التنزيل، وأبقِ الأصل دون تغيير. وإن احتجت شكلًا مختلفًا فاستخدم أداة الاقتصاص قبل تغيير الحجم.
هل أغيّر الحجم أم أضغط أولًا؟
غيّر الحجم أولًا، لأن قلة البكسلات تعني عملًا أقل للضاغط وملفًا أصغر.
هل تغيير الحجم يقلل الجودة؟
تصغير الصورة يُبقيها حادة بحجمها الجديد، لكن لا يمكنك تكبيرها لاحقًا دون نعومة، فاحتفظ بالأصل.