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

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

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

والسبب هو أن بكسل CSS ليس بكسلًا للجهاز. يحتوي الهاتف الحديث أو الكمبيوتر المحمول الشبكي على بكسلين أو ثلاثة بكسلات فعلية في كل بكسل CSS - that&#39؛s ماذا window.devicePixelRatio تقارير. لذلك تم تمديد صورتي التي تبلغ 600 بكسل عبر 1200 بكسل فعلي من الزجاج، وكان المتصفح يخترع الفرق. لا يمكنك اختراع التفاصيل الموجودة في الملف &#39؛t. كان الإصلاح هو التصدير بسعر 1200 والسماح لـ CSS بعرضه بسعر 600.

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

ليرة تركية؛DR: تصدير في 2× حجم العرض بالنسبة لشاشات شبكية العين (تحتاج الفتحة 600 بكسل إلى ملف 1200 بكسل)، ولا تحتاج إلى مقياس أبدًا يصل- يمكنك &#39؛ إضافة تفاصيل لم يتم التقاطها مطلقًا. قفل نسبة العرض إلى الارتفاع إلا إذا كنت تريد حقًا تشويه الصورة. تغيير الحجم قبل أنت تضغط، وليس بعد. استخدم أداة تغيير حجم الصورة لتعيين الأبعاد، حاسبة نسبة العرض إلى الارتفاع لحل الجانب المفقود، و ضاغط الصور لتقليل حجم الملف بعد ذلك. كل شيء يعمل من جانب العميل. تحذير واحد يستحق المعرفة مقدمًا: تغيير حجم الصورة يعيد تشفير الصورة، لذا تم تجريد كافة البيانات التعريفية لـ EXIF- رائعة للخصوصية، ومدهشة في بعض الأحيان.

لماذا تبدو صوري ضبابية بعد تغيير الحجم؟

تسع مرات من أصل عشرة &#39؛s واحد من ثلاثة أشياء، وهم &#39؛ كلها قابلة للإصلاح.

لقد صعدت. إن تكبير صورة 400×300 إلى 1600×1200 يطلب من البرنامج إنتاج اثني عشر بكسل من المعلومات لكل صورة لديه. وهو يفعل ذلك عن طريق الاستيفاء - متوسط الجيران لتخمين ما ينتمي بينهما - والنتيجة ناعمة، لأن التفاصيل غير موجودة حقًا. لا شيء أقل من النموذج التوليدي يخترعه مرة أخرى. ابدأ دائمًا من أكبر نسخة أصلية لديك وقم بتقليص حجمها. أسفل هو تقريبا بلا خسارة؛ أعلى هو تخمين.

لقد تجاهلت نسبة البكسل. الخطأ الذي وصفته أعلاه. إذا كان مربع CSS هو 600×400 وشاشة المستخدم &#39؛s هي 2×، فإن المتصفح يحتاج إلى 1200×800 بكسل حقيقي لعرضه بشكل واضح. قم بالتصدير عند 2× ودع المتصفح يتقلص - يبدو تقليص الحجم في المتصفح رائعًا؛ يبدو الارتقاء مثل الطين.

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

ماذا يحدث بالفعل عندما تقوم بتغيير حجم الصورة؟

يستحق الفهم، لأنه يفسر معظم المفاجآت.

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

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

يقع تغيير حجم لوحة المتصفح في النطاق الثنائي إلى المكعب ولا يسمح لك &#39؛ بالاختيار بدقة - يمكنك فقط طلب جودة التجانس، ومواصفات HTML &#39؛ الافتراضية لهذا التلميح هي "low". That&#39؛s جيد بالنسبة للغالبية العظمى من أعمال الويب وit&#39؛s لماذا تبدو أداة Toolz.dev فورية.

هناك خدعة واحدة للمستخدم القوي تستحق المعرفة. عندما تقوم بتقليص حجمها بعامل كبير في خطوة واحدة - على سبيل المثال 4000 بكسل إلى 400 بكسل، يتم تقليلها بمقدار 10× - فإن بعض تطبيقات المتصفح يتم أخذ عينات منها بشكل متناثر للغاية وتحصل على أسماء مستعارة: حواف متلألئة، وأنماط مويري في القماش أو الطوب، وتفقد التفاصيل الدقيقة. الحل البديل هو تناقص الحجم: قم بالتقسيم إلى النصف بشكل متكرر (4000 → 2000 → 1000 → 500 → 400) بحيث لا تؤدي كل خطوة إلا إلى التخلص من نصف وحدات البكسل. إذا حدث انخفاض كبير أكثر جنونًا مما توقعت، فهذا هو السبب &#39؛ سيؤدي القيام بذلك في تمريرتين إلى إصلاحه.

ماذا تفعل أداة تغيير حجم Toolz.dev بالفعل؟

أنا &#39؛ أفضل أن أخبرك بالضبط بدلاً من أن تكتشف ذلك لاحقًا. It&#39؛s مُصلح قائم على القماش:

1. تتم قراءة ملفك في المتصفح عبر عنوان URL للكائن. إنه كذلك لم يتم تحميلها- هناك &#39؛s لا يوجد خادم لتحميله إليه.
2. It&#39؛s مرسومة على لوحة HTML في الأبعاد المستهدفة.
3. يتم إعادة ترميز اللوحة القماشية إلى PNG، JPEG، أو ويب بي (الإعدادات الافتراضية للجودة هي 0.9 للتنسيقات المفقودة).
4. يمكنك تحميل النتيجة.

تتبع ذلك ثلاث عواقب، وواحدة منها فقط موجودة في معظم الأدوات &#39؛ نسخة تسويقية:

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

تظهر صور GIF المتحركة كإطار واحد. يرسم القماش إطارًا واحدًا. لا توجد طريقة صادقة لوصف هذا على أنه أي شيء آخر غير القيود - إذا كنت بحاجة إلى تغيير حجم الرسوم المتحركة وإبقائها متحركة، فهذه ليست الأداة. (I&#39؛ أفضل أن أقول ذلك بوضوح بدلاً من السماح لك باكتشافه بعد التنزيل.)

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

كيف تعمل نسب العرض إلى الارتفاع فعليًا؟

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

للعثور على الجانب المفقود، حافظ على النسبة ثابتة

new_height = new_width × (original_height ÷ original_width)

الصورة مقاس 4000×3000 (4:3) تم تغيير حجمها إلى عرض 1200 تصبح 1200× (3000/4000) = 900 طويل القامة. اكتب 1200 و800 بدلاً من ذلك، وأنت &#39؛ لقد سحقنا صورة 4:3 إلى 3:2 - تصبح الوجوه أضيق، وتصبح الدوائر بيضاوية، ويمكن للجميع معرفة شيء ما &#39؛s حتى لو كانوا يستطيعون &#39؛t قل ماذا. ال حاسبة نسبة العرض إلى الارتفاع يفعل هذا لك ويقلل النسبة بالنسبة لك أيضًا.

فيما يلي النسب التي تستمر في الظهور، مع التحقق من الرياضيات بدلاً من نسخها

ملاحظة صادقة واحدة حول ذلك &quot؛1.91:1&quot؛ الصف، لأنه يزعجني في كل مرة: 1200×628 ليس في الواقع 1.91:1. تم تخفيضه بشكل صحيح &#39؛s 300:157، أو 1.911. الصناعة تدور حوله ويهز الجميع. لا &#39؛ لا يهم في الممارسة العملية - ولكن إذا كنت &#39؛ لقد تساءلت يومًا لماذا 1200×628 لا &#39؛ ينقسم إلى أي شيء نظيف، هذا &#39؛s لماذا.

تتغير مواصفات بكسل النظام الأساسي؛ النسب لا تفعل ذلك أبدًا. بدلاً من الثقة في جدول الأبعاد في منشور مدونة (بما في ذلك هذا الجدول) لحملة مهمة، تحقق من المواصفات الحالية الخاصة بالمنصة &#39؛ ثم استخدم النسبة أعلاه للوصول إليها. الشكل مستقر حتى عندما تنحرف الأرقام.

ما الحجم الذي يجب أن تكون عليه صور الويب فعليًا؟

بالنسبة لموقع ويب تتحكم فيه - حيث يمكنك &#39؛ إعادة التحسين لأكبر طلاء محتوى بدلاً من شخص آخر &#39؛s loader - المنطق مختلف وأفضل.

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

يخدم أكثر من حجم واحد. يعد ملف واحد بحجم 2400 بكسل بمثابة إهدار للهاتف الذي سيعرضه بدقة 380 بكسل CSS. srcset موجود على وجه التحديد لهذا:

<img
  src="hero-1200.webp"
  srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200" height="675"
  alt="..."
/>

يختار المتصفح أصغر ملف سيظل يبدو حادًا على هذا الجهاز. وضبط دائما width و height السمات - تسمح للمتصفح بحجز المساحة قبل تحميل الصورة، وهو ما يمنع الصفحة من القفز وتدمير نتيجة تغيير التخطيط التراكمي.

تغيير الحجم أولاً، والضغط ثانيًا. هذا هو الترتيب الذي يتراجع به الأشخاص. ضغط صورة 4000px و ثم تغيير حجمه إلى 800px يعني أنك بذلت جهدًا في تحسين وحدات البكسل التي كنت على وشك التخلص منها - ومن المحتمل أنك قمت بخبز عناصر الضغط في وحدات البكسل التي احتفظت بها. قم بقص الأبعاد أولاً، ثم اضغط على what&#39؛s المتبقية مع ضاغط الصور. الأبعاد هي دائمًا الفوز الأكبر على أي حال: يؤدي خفض جانبي الصورة إلى النصف إلى إزالة 75% من وحدات البكسل الخاصة به قبل أن يلمسه الضاغط. أنا أتعمق في ذلك في دليل ضغط الصور.

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

كيف يمكنني تغيير حجم الصورة على Toolz.dev؟

1. افتح ال أداة تغيير حجم الصورة. لا يوجد حساب، لا شيء للتثبيت.
2. أسقط صورتك. يتم تحميله مباشرة في المتصفح. شاهد علامة التبويب "الشبكة" إذا كنت تريد إثبات عدم وجود شيء &#39؛ يتم إرسالها إلى أي مكان - هذا &#39؛ شيك يستحق التشغيل على أي أداة صور تقوم بلصق صور خاصة فيها.
3. أدخل الأبعاد المستهدفة الخاصة بك. اكتب العرض؛ مع قفل النسبة، يتبع الارتفاع. تذكر أن تتضاعف شبكية العين إذا كان هذا مخصصًا للشاشة.
4. اختر تنسيق الإخراج الخاص بك- PNG أو JPEG أو WebP.
5. تحميل. تم إنشاؤها في متصفحك، مباشرة إلى القرص الخاص بك.

إذا كنت &#39؛ ننتج نفس الصورة بعدة أحجام، فاعمل من أكبر نسخة أصلية في كل مرة. Don&#39؛t قم بتغيير حجم التصدير 1200px إلى 600px - عد إلى النسخة الأصلية وقم بتصدير 600 منها. تؤدي كل عملية إعادة تشفير لملف مفقود بالفعل إلى تفاقم الضرر، بنفس الطريقة التي تتحلل بها نسخة من النسخة. It&#39؛s نظام صغير يظهر في النتيجة النهائية.

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

هل يمكنني تغيير حجم الصورة دون فقدان الجودة؟

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

ما الحجم الذي يجب أن أقوم بتصدير الصور لشاشات شبكية العين؟

تصدير بحجم 2× الحجم الذي يتم عرض الصورة به. إذا كان تخطيطك يعرض صورة في صندوق 600×400، فقم بتصديرها بسعر 1200×800 بحيث تظل حادة على الأجهزة التي تحتوي على devicePixelRatio من 2. نادرًا ما يستحق تجاوز 2× البايتات الإضافية، نظرًا لأن الفائدة المرئية تكون ضئيلة حتى على شاشات العرض 3×.

هل يؤدي تغيير حجم الصورة إلى إزالة بيانات EXIF؟

نعم، عندما يحدث تغيير الحجم من خلال لوحة HTML - كما هو الحال في Toolz.dev - تقوم الأداة بإعادة تشفير الصورة إلى ملف جديد ولا يتم ترحيل بيانات تعريف EXIF. وهذا يعني تجريد تفاصيل الكاميرا ووقت الالتقاط وإحداثيات GPS. للنشر، هذه ميزة خصوصية؛ إذا كنت بحاجة إلى الحفاظ على EXIF، فاستخدم أداة تدعمها بشكل صريح.

هل يمكنني تغيير حجم صورة GIF المتحركة والاحتفاظ بالرسوم المتحركة؟

ليس مع مُعدِّل قائم على القماش. يلتقط Canvas إطارًا واحدًا، وبالتالي فإن الإخراج عبارة عن صورة ثابتة بتنسيق PNG أو JPEG أو WebP. يتطلب تغيير حجم الرسوم المتحركة مع الحفاظ على جميع إطاراتها أداة مخصصة لمعالجة GIF.

كيف يمكنني تغيير حجم الصورة إلى حجم ملف محدد بالكيلوبايت؟

حجم الملف ليس شيئًا تقوم بتعيينه مباشرة - فهو يقع خارج الأبعاد والتنسيق وجودة الضغط. العمل بشكل عكسي: تقليل الأبعاد إلى ما يتم عرض الصورة عليه فعليًا، وتصديرها كـ WebP أو JPEG بدلاً من PNG للصور الفوتوغرافية، ثم خفض الجودة وإعادة التحقق من حجم الإخراج. ضرب هدف صعب مثل &quot؛ أقل من 100 كيلو بايت&quot؛ عادة ما يكون تمريرتين أو ثلاث تمريرات لتلك الحلقة، وليس واحدة.

كيف يمكنني تغيير حجم الصورة دون اقتصاصها؟

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

هل يجب علي تغيير حجم صوري أو ضغطها أولاً؟

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

ما الفرق بين تغيير الحجم والمحاصيل؟

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

هل هناك حد لحجم الملف لتغيير حجم الصور في المتصفح؟

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

لماذا لا تزال صورتي تبدو ضبابية بعد تغيير حجمها إلى الأبعاد الصحيحة؟

تحقق من ثلاثة أشياء بالترتيب: ما إذا كنت قد قمت بالتوسيع من نسخة أصلية أصغر (غير قابلة للإصلاح - ابحث عن مصدر أكبر)، وما إذا كنت قد أخذت في الاعتبار نسبة بكسل الجهاز (يجب أن يكون ملف 600px على شاشة 2× 1200px)، وما إذا كان النظام الأساسي الذي قمت بتحميله لإعادة ضغط الصورة بعد ذلك. والثالث شائع على وسائل التواصل الاجتماعي ومن الأفضل تخفيفه عن طريق التحميل على الأبعاد الموصى بها في النظام الأساسي &#39؛s.