مشکلات نسبت ابعاد تصاویر و عدم نمایش حاشیه های عکس


یکی از مشکلات رایج بین پیاده کنندگان وبسایت (طراحان سایت) و تیم های مدیریت محتوا بحث درمورد عدم نمایش کامل یک عکس در سایتشان است. مشکلی که شخصا از دیرباز در توضیح آن به مشتریانم زمان و انرژی زیادی گذاشته ام و امروز تصمیم گرفتم این متن را به نحوی آماده کنم که بتوانم مشتریان را ابتدا به اینجا ارجاع بدهم.

نسبت (ابعاد) تصویر چیست؟

یک عکس جدای از اینکه با چه کیفیتی و با چه ابعادی گرفته شده باشد نسبت عرض به طول مشخضی دارد. مثلا عکس 2x3 یا 3x4 به ترتیب نسبتی مساوی با عکس 4x6 و 9x12 دارند. در حقیقت عکس هایی با ابعاد 4x6 6x9 8x12 و ... همه نسبت ابعاد تصویر یکسان 2x3 دارند و این عدد تنها به معنی نسبت عرض به ارتفاع است که به کوچکترین اعداد صحیح بیان میشود. مثالی دیگر در اندازه تصاویر فیلم ها است که فیلم های HD با اندازه  720x1280 = 720p و FullHD (فول اچ دی)  با ابعاد 1080x1920 = 1080p و 4K همه دارای نسبت تصویر 16:9 هستند.

نسبت (ابعاد) تصویر

مشکل از جایی شروع میشود که بخواهیم یک عکس با یک نسب تصویر مشخص را در فضایی با نسبت تصویر متفاوت نمایش دهیم. این کار برای فیلم ها  در تلوزیون و یا صفحه سینما معمولا با خالی گذاشتن چپ و راست تصویر یا بالا و پایین آن انجام میشود:
نمایش نسبت تصویرهای مختلف در هم

 

ازین روش میتوان برای نمایش عکس ها در سایت ها نیز استفاده کرد اما بسیار ظاهر زشتی را به ارمغان خواهد آورد و اساسا نمیتواند به عنوان یک راه تلقی شود!

نمایش عکس طراحی سایت به صورت pillarbox و letterbox

راه حل صحیح تر این است که عکس را crop-resize شده نمایش دهیم یعنی از سمت راست و چپ و یا بالا و پایین مقداری از عکس را نشان ندهیم تا اندازه مد نظر اتفاق بیفتد:

امکان crop-resize برای عکس ها

در این روش حداکثر ممکن از یک تصویر در قاب مورد نظر نمایش داده میشود اما متاسفانه در این حالت گاهی مشتریان ازین نکته که قسمت هایی از تصویرشان بریده شده است گله مند هستند. معمولا این موضوع هم زمانی اتفاق می افتد که در تصویر متن استفاده شده است و این متن ها ناقص میشوند و یا عکس به صورتی گرفته شده است که شی مورد نظر تا گوشه های تصویر کشیده شده است.

برای این مشکل دو دسته راه حل وجود دارد که یک دسته به 1.طراحی و یک دسته به 2.انتخاب عکس برمیگردد که در ادامه به آنها میپردازیم.

1. طراحی مناسب قالب سایت برای جلوگیری از حذف قسمت های عکس در نمایش:

اساسا دو روش وجود دارد برای این موضوع که اولین روش استفاده از یک نسبت تصویر یکسان برای تمام عکسهای سایت و یا برای تمام نمایش های یک عکس میباشد.

استفاده از یک نسبت تصویر یکسان:

به طور مثال اگر شما عکس یک محتوا را هم در صفحه اصلی سایت نمایش میدهید (به عنوان یک اسلایدر) و هم در لیست آرشیو محتواها و هم در صفحه جزئیات آن محتوا؛ در تمام این موارد عکس را اگر چه با اندازه های مختلف نمایش میدهید تمام آنها باید نسبت تصویر یکسان داشته باشند.

نسبت تصویر یکسان و اندازه متفاوت

اگرچه این راه حل ساده ای است اما قدرت مانور را از گرافیست و طراح سایت میگیرد. معمولا اسلایدرهای مدرن با نسبت تصویرهای عریض زیبا میشوند و در صفحات بلاگ معمولا نسبت به مربع نزدیک است.

 

استفاده از طراحی masonry یا پینترستی:

سایت پینترست احتمالا اولین سایتی بوده است که این ایده را پیاده سازی کرده است که در آن عرض عکس ها همه ثابت و به تناسب هر عکس ارتفاع عکس ها متفاوت می باشند. البته میتوان ارتفاع های یکسان و عرض های متفوات هم داشت. به هر شکل هر دوی این مدل ها با عنوان معروف ماسونری (masonry) که نام یک کتابخانه جاواسکریپت نیز هست که همین کار را میکند شناخته میشوند.

نمایش عکس ماسونری masonry

اگر چه به ظاهر این نوع نسبت بندی خیلی جاها مشکل را حل میکند اما نمیتواند در تمام انواع طراحی ها مورد استفاده قرارگیرد.

2. انتخاب عکس صحیح (بهترین روش):

در روش های بالا اگر شما قالب سایتتان عوض بشود و یا به هر شکل تصمیم به تغییر طراحی خود بگیرید دچار چالش اساسی خواهید شد چرا که حجمی از محتوا دارید که مثلا تمام عکس هایشان برای نسبت تصویری 3:4 تدوین شده اند اما به یکباره طراحی تان میخواهد تغییر کند و از نسبت تصویر (برای مثال) 6:9 استفاده نمایید.

اگر بجای محدود کردن طراحی عکس هایی انتخاب کنید که محتوای اصلی عکس در مرکز عکس ها باشد و حاشیه غیر مهم کنار محتوای اصلی در نظر گرفته شود آنگاه عکس های شما برای اغلب نسبت تصویرها با crop-resize شدن ارزش خود را ازدست نخواهند داد:

ارتباط با ما

  • location_on   مشهد-دانش آموز2-نبش آموزش2-پلاک 32-طبقه 2
  • email   info@webyka.com
  • phone   0513-8660993

ما را دنبال کنید

تمامی حقوق نرم افزاری برای رایافید محفوظ است