أسطورة DPI

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

يتم قياس الصور على الويب بالبكسل . بعد الكثير من الناس يمرون عناء تحديد صورهم إلى 72 نقطة في البوصة ( DPI). غالبًا ما يُساء فهم عملية تحديد حجم الصور للويب.

الاعتقاد الخاطئ حول الدقة في الصور الرقمية المرتبطة بالويب هو أنها يجب أن تلبي عددًا معينًا من النقاط في كل بوصة.

في الطباعة ، تؤثر وحدات البكسل لكل بوصة والنقاط لكل بوصة على حجم الصورة على الصفحة. لا تنطبق DPI على التخطيط على الويب.

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

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

يعتمد حجم البكسل على السياق

البكسل (وهو اختصار لـ "عنصر الصورة") هو أصغر وحدة قياس على شبكة تعرض صورة رقمية. يقيس DPI حجم تلك البكسل ، أو النقاط ، عندما يتم طباعتها.

تظهر الصورة أدناه في مختلف DPI s.

36 DPI

150 نقطة لكل بوصة

3،096 نقطة في البوصة

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

تغيير حجم التغييرات Pixel مقاسات؛ إعادة تشكيل التغييرات Pixel Count

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

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

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

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

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

تغيير حجم و resampling في فوتوشوب

يتحكم مربع حجم صورة Photoshop ( Image ‚Üí حجم الصورة ) في تغيير حجم الصور وإعادة تشكيلها .

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

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

تجربة

يمكن معرفة ما إذا كانت إدارة شؤون الإعلام مهمة في تخطيطات الويب من خلال تجربة صغيرة. إذا قمنا بتغيير صورة من 300 × 100 بكسل عند 72 نقطة لكل بوصة إلى 300 × 100 بكسل في 144 نقطة لكل بوصة ، فكم عدد البكسل التي لدينا؟

• جعل صورة 300 بكسل و 100 بكسل ، في 72 نقطة في البوصة .
• دعونا نفعل بعض الرياضيات. كم عدد البكسلات التي ستكون؟
• الآن تغيير حجم الصورة إلى 300 × 100 بكسل في 144 نقطة لكل بوصة .
• دعونا نفعل المزيد من الرياضيات. كم عدد البيكسلات؟

الإجابات هي:

• 300 × 100 = 30،000
• 300 × 100 لا يزال 30،000

بكسل لكل بوصة على الشاشة

لا يزال عدد وحدات البكسل في البوصة مناسبًا عبر الإنترنت ، لكن إعدادات DPI لا تؤثر على كيفية عرض الصورة.

يمكن قياس شاشات الكمبيوتر فعليًا بالبوصة ، ويعرض كل منها عددًا معينًا من وحدات البكسل. على سبيل المثال ، لنفترض أن شاشة 19 بوصة تُظهر 1280 × 1024 بكسل. يمكن للمستخدم تغييره ليعرض 1600 × 1200 بكسل ، وبالتالي يزيد من مؤشر أسعار المنتجين (أي إضافة المزيد من البكسل في نفس العدد من البوصات). الاختلاف المهم في الطباعة هو أنه يمكنك التحكم في بيكسلات الصورة في البوصة.

يمكنك تجربة ذلك على معظم أجهزة الكمبيوتر الحديثة. على جهاز Mac ، انتقل إلى Apple Menu (قائمة) System Ü System System System تفضيلات النظام ، ثم انقر فوق “Displays” (رؤية) لرؤية مختلف القرارات التي يمكنك ضبط الشاشة فيها. بالنسبة لنظام التشغيل Windows ، انقر بزر الماوس الأيمن على سطح المكتب وحدد "تخصيص" ، ثم اختر "إعدادات العرض". قم بتغيير دقة الشاشة (عدد البيكسل) وانظر إلى أن العناصر الموجودة على جهاز Mac أو سطح مكتب الكمبيوتر تصبح أكبر أو أصغر.

من الواضح أن شاشتك لا تتغير من حيث الحجم. ولكن إذا كنت تحمل مسطرة على الشاشة ، فسترى أن حجم الرموز والنوافذ يتناسب عكسًا مع عدد البكسل المعروض. على سبيل المثال ، كمبيوتر محمول 13، ، شاشة 17 ″ CRT وشاشة مسطحة 21. يمكن لجميع تقديم سطح المكتب الذي يقيس 1024 × 768 بكسل. المزيد من البكسل يعني رموزًا أصغر ؛ أقل بكسل يعني رموز أكبر. تعطي المزيد من البكسلات في نفس الشاشة كثافة بكسل أعلى ؛ أقل بكسل هو أقل.

يصبح الفرق أكثر وضوحًا مع أنواع شاشات العرض الأخرى:

• قد تستخدم لوحة الإعلانات الرقمية قياس 47 × 12 قدم فقط 888 × 240 بكسل (حوالي 1.6 PPI).
• شاشة آيفون اليوم يقيس 2 × 3 بوصة ويحمل 320 × 480 بكسل (حوالي 160 PPI) .

يمكن احتواء ملف PNG واحد بقياس 100 × 100 بكسل على كل من لوحة الإعلانات بحجم 888 × 240 والإصدار 320 × 480 من iPhone. ولكن يبدو أنها أكبر بكثير على لوحة الإعلانات لأن وحدات البكسل في اللوحة أكبر 100 مرة من أجهزة iPhone (1.6 مقابل 160).

يعرض الرسم التوضيحي التالي جهازين بأبعاد بكسل مختلفة.

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

يمكنك اختبار ذلك بنفسك:

• أنشئ JPG يقيس 960 × 100 بكسل ، بأي كثافة بكسل.
• قياسه باليد مع المسطرة.
• انظر إلى نفس الصورة على جهاز كمبيوتر ذي شاشة أكبر أو أصغر. على سبيل المثال ، إذا قمت بإنشاء الصورة على شاشة 20 بوصة ، فاختبرها على كمبيوتر محمول 13..
• اطبع نفس عدد البيكسلات بكثافة بيكسل مختلفة لترى أحجامًا مختلفة على الورق.

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

لماذا 72 مهم

العديد من تنسيقات الملفات ، بما في ذلك JPG و TIF و PSD ، تقوم بتخزين إعداد كثافة البكسل للصورة. إذا قمت بحفظ JPG بمعدل 200 بكسل / إنش ، فسيظل الرقم 200.

تنسيقات أخرى ، بما في ذلك GIF و PNG ، تجاهل كثافة بكسل. إذا قمت بحفظ صورة بتنسيق DPI 200 كصورة PNG ، فلن يتم حفظها على الإطلاق. تفترض العديد من برامج تحرير الصور ، بما في ذلك Adobe Photoshop ، أن الصورة 72 DPI إذا لم يتم تخزين المعلومات. (ملاحظة: تتجاهل ميزة "Save for Web" في Photoshop ميزة الطباعة غير الضرورية ، بما في ذلك البكسل / البوصة من مربع الحوار Image Size).

اثنان وسبعون هو رقم سحري في الطباعة والطباعة. في 1737 استخدم بيير فورنييه وحدات تسمى ciceros لقياس النوع. ستة ciceros كانت 0.998 بوصة.

في حوالي عام 1770 ، استخدم فرانسوا-أمبرواز ديدوت سيزروس أكبر بقليل لملاءمة "القدم" الفرنسية القياسية. كانت بيضة ديدوت 0.1776 بوصة طويلة ومقسمة بالتساوي إلى 12 وحدة. اليوم نسميهم النقاط.

في عام 1886 ، أسس نظام American Point نظام "pica" على أنه 0.166 بوصة. ستة من هؤلاء هم 0.996 بوصة.

لم ينحرف أي من الوحدات أبداً عن 12 نقطة لكل بيكا: 6 بيكاسات في البوصة = 72 نقطة في البوصة. لقد كان معيارًا مهمًا بحلول عام 1984 ، عندما أعدت شركة Apple تقديم جهاز كمبيوتر Macintosh الأول. تم تصميم واجهة Mac لمساعدة الأشخاص على ربط الكمبيوتر بالعالم المادي. استخدم مهندسو البرمجيات استعارة مكتب ما لوصف الأعمال السرية للكومبيوتر ، وصولاً إلى الرموز "الورقية" و "المجلد" و "القمامة".

كل بكسل على الشاشة الأصلية 9 بوصة (قطري) وقطرها 512 × 342 بكسل من نظام ماكنتوش تم قياسها بدقة 1 × 1 نقطة. أمسك مسطرة على الزجاج ، وسترى أن 72 بيكسل سوف تملأ بالفعل 1 بوصة. بهذه الطريقة ، إذا طبعت صورة أو جزءًا من النص واحتفظت بها بجوار الشاشة ، فسيكون كل من الصورة والنسخة المطبوعة بنفس الحجم.

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

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

يعني مؤشر PPI العالي للشاشة وضوحًا أفضل عند أحجام النقاط الأصغر

الشاشات ذات نسبة أعلى من مؤشر أسعار المنتجين رائعة للوضوح. المزيد من البيكسلات لكل بوصة يجعل من السهل قراءة أشكال الحروف. وهذا يعني أيضًا أن الصور والنصوص يجب أن تكون أكبر (بالبكسل) لتكون قابلة للقراءة.

تم تغيير حجم عينة النص أعلاه من إعدادين مختلفين لشاشة PPI. يحتوي الصف العلوي على وحدات بكسل أصغر (أي PPI أعلى على الشاشة) ، لذا فإن 8 نقاط هي أصغر حجم خط مقروء. نص في الصف السفلي بالكاد مقروء أقل من 10 نقاط.

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

صور شبكة مرنة مع المتصفحات الحديثة

نعلم الآن أن DPI بمفردها لا يغير حجم الصورة على الويب ، وليس لدينا أي تحكم في الجهاز الذي يتم عرض الصورة عليه. إذاً ، هل أبعاد الصورة هي الشيء الوحيد الذي يهم؟ حاليا نعم.

يمكن لمخططات عرض السائل ، والتي تتغير وفقًا لحجم المتصفح ، أن تستوعب بشكل أفضل مجموعة من الأجهزة والشاشات. إن المتصفحات الحديثة ، من FireFox 3 و Safari 3 و Internet Explorer 7 فما فوق ، هي أفضل من الإصدارات الأقدم في رفع الصور بسرعة. ال max-width تفرض خاصية CSS صورًا لتلائم الحاوية ولكنها لا تتخطى حجمها الفعلي. فمثلا:

p { width: 25% } / * ربع مساحة المحتوى * /
img { max-width: 100% }

p { width: 50% } / * نصف مساحة المحتوى * /
img { max-width: 100% }

p { width: 75% } / * ثلاثة أرباع منطقة المحتوى * /
img { max-width: 100% }

/ * لم يتم تعيين عرض للفقرة * /
img { max-width: 100% }

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

يعني إعداد الصور للويب التخطيط بالبكسل. إذا طلب أحد الأشخاص رسمًا بحجم 2 بوصة للويب ، وليس للطباعة ، فاطلب منه: "ما حجم وحدات البكسل لديك؟"

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

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

• ← كيف تصنع كاميرا عتيقة في برنامج فوتوشوب
• حرية الكلام وحرية المعلومات: نصيحة لمدونين →