اندازه یک تصویر در طرح‌بندی وب‌سایت مهم است. از چیدمان مناسب تا به دست آوردن فقط فضای سفید مناسب، اندازه‌گیری درست عکس‌ها و گرافیک‌ها از قبل برای ایجاد ظاهری متعادل ضروری است.
تصاویر در وب با پیکسل اندازه گیری می شوند. با این حال، بسیاری از مردم در تنظیم تصاویر خود روی 72 نقطه در اینچ (DPI) مشکل دارند. فرآیند اندازه‌گیری تصاویر برای وب اغلب اشتباه گرفته می‌شود.
تصور نادرست در مورد وضوح در تصاویر دیجیتال محدود شده برای وب این است که آنها باید تعداد مشخصی نقطه در هر اینچ داشته باشند.
در چاپ، پیکسل در هر اینچ و نقطه در هر اینچ بر اندازه یک تصویر در یک صفحه تأثیر می‌گذارند. DPI برای طرح‌بندی در وب اعمال نمی‌شود.
وقتی شخصی تصویری را به 72 DPI تبدیل می‌کند، یک مرحله اضافی بدون هیچ مزیتی اضافه می‌کند. صفحات وب با پیکسل اندازه گیری می شوند، نه واحدهای دنیای واقعی مانند اینچ.
وقتی شخصی از شما یک تصویر وب می‌خواهد که مثلاً دو اینچ عرض دارد، در حال تخمین زدن این تصویر در مانیتور خود است. بدون تغییر ابعاد پیکسل تصویر، آن تصویر در مانیتورهای مختلف بزرگتر یا کوچکتر به نظر می رسد — و حتی در یک مانیتور با تنظیمات وضوح متفاوت متفاوت به نظر می رسد.
اندازه پیکسل به زمینه بستگی دارد
یک پیکسل (که مخفف “عنصر تصویر” است) کوچکترین واحد اندازه گیری در شبکه ای است که یک تصویر دیجیتال را نمایش می دهد. DPI اندازه آن پیکسل ها یا نقاط را هنگام چاپ اندازه می گیرد.
تصویر زیر در DPIهای مختلف نشان داده شده است.
36 DPI
150 DPI
3096 DPI
آنها را دانلود و در یک ویرایشگر تصویر باز کنید تا خودتان ببینید. هر سه یکسان به نظر می رسند زیرا اندازه آنها تغییر کرده است، نه نمونه برداری مجدد.
تغییر اندازه اندازه پیکسل را تغییر می‌دهد. نمونه برداری مجدد تعداد پیکسل ها را تغییر می دهد
دو راه برای بزرگ‌نمایی تصویر وجود دارد: پیکسل‌های بیشتری اضافه کنید یا پیکسل‌ها را بزرگتر کنید. به همین ترتیب، می‌توانید اندازه تصویر را با تراشیدن پیکسل‌ها یا کوچک کردن پیکسل‌ها کاهش دهید. اما کوچک کردن و اصلاح دو فرآیند متفاوت هستند.
در بالا نشان داده شده است، تغییر اندازه یک تصویر اندازه پیکسل های آن را تغییر می دهد، نه تعداد پیکسل های آن. ما تعداد پیکسل‌ها را کم یا زیاد نمی‌کنیم، فقط اندازه آن پیکسل‌ها را در هنگام چاپ تغییر می‌دهیم. این یک رابطه معکوس است: تصاویر با پیکسل های بزرگتر هنگام چاپ تراکم پیکسل کمتری خواهند داشت (پیکسل های کمتر در همان تعداد اینچ).
در بالا نشان داده شده است، نمونه‌گیری مجدد اندازه تصویر را با افزایش یا کاهش تعداد پیکسل‌های آن تغییر می‌دهد. تصاویر با پیکسل های بیشتر حاوی اطلاعات بیشتری هستند و اغلب گرافیک غنی تری دارند.
طراحی وب مربوط به نمونه‌گیری مجدد است، نه تغییر اندازه، زیرا هر پیکسل در یک صفحه وب همیشه یک اندازه خواهد بود. یک صفحه وب با عرض 800 پیکسل می تواند تصاویری تا عرض 800 پیکسل را در خود جای دهد. عریض‌تر کردن هر پیکسل این واقعیت را تغییر نمی‌دهد که چیدمان می‌تواند تنها 800 پیکسل را در خود جای دهد.
شما نمی‌توانید با تغییر اندازه پیکسل‌های تصویر، آن را بزرگتر نشان دهید، زیرا هر پیکسل در همان صفحه همیشه یک اندازه خواهد بود.
تغییر اندازه و نمونه برداری مجدد در فتوشاپ
کادر اندازه تصویر Photoshop (Image ‚Üí Image Size) تغییر اندازه و نمونه برداری مجدد تصاویر را کنترل می کند.
چک باکس “Resample” تعداد پیکسل‌هایی که در یک اینچ خطی قرار می‌گیرند را تغییر می‌دهد – به معنای واقعی کلمه پیکسل در هر اینچ. اگر نمونه برداری مجدد را خاموش کنیم، تنها راه برای تغییر اندازه تصویر، بزرگ کردن پیکسل های آن برای چاپ است.
در صورتی که کادر نمونه‌برداری مجدد علامت نخورده باشد، تغییر کادر «رزولوشن» اندازه فیزیکی تصویر را هنگام چاپ تغییر می‌دهد، اما تعداد پیکسل‌های آن را تغییر نمی‌دهد. هنگام چاپ، یک تصویر بزرگتر یا کوچکتر به نظر می رسد. در یک صفحه وب، اندازه آن یکسان است.
یک آزمایش
فهمیدن اینکه آیا DPI در طرح‌بندی‌های وب اهمیت دارد یا خیر، می‌تواند با یک آزمایش کوچک انجام شود. اگر یک تصویر را از 300 x 100 پیکسل در 72 DPI به 300 x 100 پیکسل در 144 DPI تغییر دهیم، چند پیکسل خواهیم داشت؟
- تصویری با عرض 300 پیکسل و ارتفاع 100 پیکسل با 72 DPI ایجاد کنید.
- بیایید کمی ریاضی انجام دهیم. چند پیکسل خواهد بود؟
- اکنون اندازه تصویر را به 300 x 100 پیکسل در 144 DPI تغییر دهید.
- بیایید کمی ریاضی بیشتری انجام دهیم. این چند پیکسل است؟
پاسخ ها عبارتند از:
- 300 x 100 = 30000
- 300 x 100 هنوز 30000 است
پیکسل در هر اینچ روی صفحه
تعداد پیکسل در هر اینچ هنوز به صورت آنلاین مرتبط است، اما تنظیمات DPI بر نحوه نمایش تصویر تأثیری ندارد.
نمایشگرهای رایانه را می توان به صورت فیزیکی در اینچ اندازه گیری کرد و هر کدام تعداد مشخصی پیکسل را نمایش می دهند. به عنوان مثال، فرض کنید یک مانیتور 19 اینچی 1280 در 1024 پیکسل را نشان می دهد. کاربر می تواند آن را به نمایش 1600 در 1200 پیکسل تغییر دهد، بنابراین PPI آن را افزایش دهد (یعنی اضافه کردن پیکسل های بیشتری در همان تعداد اینچ.) تفاوت مهم در چاپ این است که شما می توانید پیکسل های یک تصویر را در هر اینچ کنترل کنید.
می توانید این را در اکثر رایانه های مدرن امتحان کنید. در Mac، به Apple Menu ‚Üí System Preferences بروید و سپس روی “Displays” کلیک کنید تا رزولوشن های مختلفی را ببینید که می توانید مانیتور خود را در آنها تنظیم کنید. برای ویندوز، روی دسکتاپ کلیک راست کرده و “Personalize” را انتخاب کنید و سپس “Display settings” را انتخاب کنید. وضوح صفحه (تعداد پیکسل ها) را تغییر دهید و به بزرگتر یا کوچکتر شدن موارد روی دسکتاپ Mac یا PC خود نگاه کنید.
بدیهی است که اندازه مانیتور شما تغییر نمی کند. اما اگر خط‌کشی را روی صفحه نگه دارید، می‌بینید که اندازه نمادها و پنجره‌ها با تعداد پیکسل‌های نمایش داده شده متناسب عکس است. برای مثال، یک لپ‌تاپ 13 اینچی، یک مانیتور CRT 17 اینچی و یک صفحه تخت 21 اینچی مانیتور همه می توانند دسکتاپ با ابعاد 1024 x 768 پیکسل را ارائه دهند. پیکسل های بیشتر به معنای نمادهای کوچکتر است. پیکسل کمتر به معنی آیکون های بزرگتر است. پیکسل های بیشتر در همان مانیتور تراکم پیکسلی بالاتری به شما می دهد. پیکسل کمتر کمتر است.
تفاوت با انواع دیگر نمایشگرها بیشتر محسوس می شود:
یک فایل PNG با اندازه 100 در 100 پیکسل در هر دو بیلبورد 888 در 240 و آیفون 320 در 480 قرار می گیرد. اما در بیلبورد بسیار بزرگتر به نظر می رسد زیرا پیکسل های برد 100 برابر بزرگتر از آیفون هستند (1.6 در مقابل 160).
تصویر زیر دو دستگاه را با ابعاد پیکسل متفاوت نشان می‌دهد.
تصویر یکسان در دو نمایشگر مختلف نشان داده می شود. تفاوت در PPI هر نمایشگر باعث می‌شود که تصویر روی نمایشگر سمت راست بزرگتر به نظر برسد، حتی اگر در کل پیکسل‌های کمتری داشته باشد.
می‌توانید خودتان این را آزمایش کنید:
- یک JPG با ابعاد 960 x 100 پیکسل در هر تراکم پیکسلی ایجاد کنید.
- آن را با دست با خط کش اندازه بگیرید.
- به همان تصویر در رایانه ای با نمایشگر بزرگتر یا کوچکتر نگاه کنید. به عنوان مثال، اگر تصویر را روی یک صفحه نمایش 20 اینچی ایجاد کرده اید، آن را روی یک لپ تاپ 13 اینچی آزمایش کنید.
- برای مشاهده اندازه های مختلف بر روی کاغذ، تعداد پیکسل های مشابهی را در تراکم پیکسل های مختلف چاپ کنید.
نتیجه این است که این یک تصویر دارای همان تعداد پیکسل اما عرض متفاوت در اینچ خواهد بود. طرح وب سایت با وجود کد یکسان در اندازه های مختلف ظاهر می شود. (برای یک حالت شدید، کل صفحه را در آیفون نگاه کنید؛ 960 پیکسل به سه اینچ یا کمتر تعبیه شده است، بدون اینکه خود فایل تغییر کند.)
چرا 72 مهم است
بسیاری از فرمت‌های فایل، از جمله JPG، TIF و PSD، تنظیمات تراکم پیکسلی تصویر را ذخیره می‌کنند. اگر یک JPG را با 200 پیکسل/اینچ ذخیره کنید، روی 200 باقی می ماند.
فرمت‌های دیگر، از جمله GIF و PNG، تراکم پیکسل را کنار می‌گذارند. اگر یک تصویر 200 DPI را به صورت PNG ذخیره کنید، آن DPI اصلاً ذخیره نخواهد شد. بسیاری از ویرایشگرهای تصویر، از جمله Adobe Photoshop، فرض می کنند که اگر اطلاعات ذخیره نشده باشد، یک تصویر 72 DPI است. (توجه: ویژگی «ذخیره برای وب» فتوشاپ اطلاعات چاپ غیرضروری، از جمله پیکسل/اینچ را از کادر محاوره‌ای اندازه تصویر آن حذف می‌کند.)
هفتاد و دو عدد جادویی در چاپ و تایپوگرافی است. در سال 1737 پیر فورنیه از واحدهایی به نام ciceros برای اندازه گیری نوع استفاده کرد. شش سیسروس 0.998 اینچ بود.
در حدود سال 1770، فرانسوا آمبرواز دیدو از سیسروس کمی بزرگتر برای تناسب با “پای” استاندارد فرانسوی استفاده کرد. پیکای دیدوت 0.1776 اینچ طول داشت و به طور مساوی به 12 مرحله تقسیم شد. امروز آنها را نقاط می نامیم.
در سال 1886، سیستم نقطه آمریکا یک “پیکا” را با اندازه 0.166 اینچ ایجاد کرد. شش مورد از اینها 0.996 اینچ هستند.
هیچ یک از واحدها هرگز از 12 نقطه در هر پیکا دور نشده اند: 6 پیکا در هر اینچ = 72 امتیاز در هر اینچ. تا سال 1984، زمانی که اپل آماده معرفی اولین کامپیوتر مکینتاش شد، این یک استاندارد مهم بود. رابط مک برای کمک به افراد در ارتباط کامپیوتر با دنیای فیزیکی طراحی شده است. مهندسان نرم‌افزار از استعاره میز برای توصیف عملکرد مخفیانه رایانه استفاده کردند، دقیقاً تا نمادهای «کاغذ»، «پوشه» و «سطل زباله».
هر پیکسل در صفحه نمایش 9 اینچی (مورب) و 512 در 342 پیکسلی Mac اصلی دقیقاً 1×1 نقطه اندازه گیری شده است. یک خط کش را روی شیشه نگه دارید، می بینید که 72 پیکسل در واقع 1 اینچ را پر می کند. به این ترتیب، اگر تصویر یا تکه‌ای از متن را چاپ کنید و آن را در کنار صفحه نگه دارید، اندازه تصویر و نسخه چاپی یکسان خواهد بود.
اما تصاویر دیجیتال اولیه درهم و ناهموار بودند. با بهبود فناوری صفحه نمایش و حافظه، رایانه ها توانستند پیکسل های بیشتری را در مانیتور با همان اندازه نمایش دهند. زمانی که برنامه‌های شطرنجی و برداری به کاربران اجازه بزرگ‌نمایی و بررسی دقیق پیکسل‌ها را می‌دادند، تطبیق یک چاپ با صفحه نمایش حتی کمتر قطعی شد. در اواسط دهه 1990، مایکروسافت ویندوز می‌توانست بین 72 تا 96 پیکسل در هر اینچ روی صفحه نمایش تغییر کند. این باعث می‌شود اندازه فونت‌های کوچکتر خواناتر شوند، زیرا پیکسل‌های بیشتری در هر اندازه نقطه در دسترس بود.
امروزه، طراحان و مشتریان به طور یکسان درک می کنند که اندازه اقلام روی صفحه نمایش مطلق نیستند. تفاوت در اندازه صفحه نمایش و عملکرد زوم رایج است. اما 72 همچنان پیش‌فرض است.
PPI صفحه نمایش بالاتر به معنای خوانایی بهتر در اندازه نقاط کوچکتر است
صفحه نمایش هایی با PPI بالاتر برای خوانایی عالی هستند. پیکسل‌های بیشتر در هر اینچ باعث می‌شود که حروف راحت‌تر خوانده شوند. همچنین به این معنی است که تصاویر و متن باید بزرگتر (به پیکسل) باشند تا قابل خواندن باشند.
اندازه نمونه متن بالا از دو تنظیمات مختلف PPI صفحه تغییر یافته است. ردیف بالایی پیکسل‌های کوچک‌تری دارد (یعنی PPI بالاتر روی صفحه)، بنابراین 8 نقطه کوچکترین اندازه فونت خوانا است. متن در ردیف پایین به سختی زیر 10 امتیاز خوانا است.
از آنجایی که در اواسط دهه 1990، مانیتورهای رایانه شخصی از تراکم پیکسلی مانیتورهای مک فراتر رفتند، وب‌سایت‌های ساخته شده بر روی ویندوز از اندازه فونت‌های کوچک‌تری برخوردار بودند که باعث ناراحتی کاربران Mac شد. امروزه، صفحه‌نمایش‌های هر دو پلتفرم از تراکم پیکسلی آنقدر بالا بهره می‌برند که تفاوت‌ها را آشکار کند.
تصاویر وب الاستیک با مرورگرهای مدرن
ما اکنون می دانیم که DPI به تنهایی اندازه تصویر را در وب تغییر نمی دهد، و ما هیچ کنترلی روی دستگاهی که تصویر در آن نمایش داده می شود نداریم. بنابراین، آیا ابعاد پیکسل یک تصویر تنها چیزی است که اهمیت دارد؟ بله… در حال حاضر.
طرح‌بندی‌های پهنای سیال، که با توجه به اندازه مرورگر تغییر می‌کنند، می‌توانند طیف وسیعی از دستگاه‌ها و نمایشگرها را بهتر در خود جای دهند. مرورگرهای مدرن، از فایرفاکس 3، سافاری 3 و اینترنت اکسپلورر 7 و بالاتر، نسبت به نسخه های قدیمی تر در مقیاس بندی تصاویر در حال پرواز بهتر هستند. ویژگی max-width CSS تصاویر را وادار می کند تا با ظرف خود مطابقت داشته باشند اما از اندازه واقعی خود بزرگتر نشوند. به عنوان مثال:
p { عرض: 25% } /* یک چهارم منطقه محتوا */ img { حداکثر عرض: 100% }
p { عرض: 50% } /* نیمی از ناحیه محتوا */ img { حداکثر عرض: 100% }
p { عرض: 75% } /* سه چهارم منطقه محتوا */ img { حداکثر عرض: 100% }
/* هیچ عرضی برای پاراگراف تنظیم نشده است */ img { max-width: 100% }
در اینجا یک تصویر 800 پیکسلی را می بینیم که به چهار قسمت تقسیم می شود عناصر پاراگراف با اندازه های مختلف اگر عرض صفحه منعطف بود، تغییر اندازه پنجره مرورگر شما تصویر را گسترش می‌داد، اما از ابعاد اصلی 800 x 323 پیکسل نمی‌گذرد. هرگز در اثر گسترش بیش از حد، تحریف یا “پیکسلی” نمی شود.
آماده سازی تصاویر برای وب به معنای برنامه ریزی در پیکسل است. اگر شخصی یک گرافیک 2 اینچی برای وب خواست، نه برای چاپ، از او بپرسید “پیکسل های شما چقدر هستند؟”
به طور انحصاری برای WDD توسط بن گرمیلیون نوشته شده است. بن یک طراح وب آزاد است که مشکلات ارتباطی را با طراحی بهتر حل می کند.
رزولوشن در کدام رسانه مهم است؟ بهترین راه برای اندازه گیری تصاویر آنلاین چیست؟ ایده های خود را در زیر به اشتراک بگذارید.
بدون دیدگاه