طراحی سایت آسا

طراحی سایت ,سئو و دیجیتال مارکتینگ

با تصاویر رتینا وبسایت خود را طراحی کنیم

  سارا نصیری

 ۹/ آذر/ ۹۵

  2280

  ۰

رتینا ردی

در آموزش قبل در مورد اینکه رتینا از کجا آمده و لزوم استفاده از آن صحبت کردیم .در این آموزش در مورد تبدیل وب سایت خودبه رتینا مینویسم.

چگونه تصاویر رتینا بسازیم؟

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

برای مثال ,اگر لوگوی شما ۴۰۰x ۳۰۰px باشد یک نسخه دیگر برای دستگاه های رتینا با اندازه ی ۸۰۰x ۶۰۰px میسازید.تصویر بزرگتر را دستگاه رتینا نمایش داده میشودالبته در همان ابعاد تصویر اول.

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

مقدار دهی بهhtml و css (مشخص کردن ابعاد تصاویر)

ساده ترین راه برای طراحی رتینا وب سایت استفاده از تصاویر با ابعاد دو برابر است .به این تصاویر بزرگتربا دادن سایز  برای نمایش در صفحه نمایش معمولی آماده میشوند,در صفحه نمایش رتینا هم این تصاویر اندازه هستند.که خود به خود تصاویر رتینا هستند.

برای مثال برای نمایش تصویری ۴۰۰x ۳۰۰ px میخواهیم این تصویر را ۸۰۰x ۶۰۰px ذخیره میکنیم و به آن ابعاد ۴۰۰x ۳۰۰px میدهیم.

در css با کد های زیر عمل میکنیم:

.image {
  background-image: url(example@2x.png);
  background-size: 400px 300px;
  height: 300px;
  width: 400px;
}

و در html با کد زیر:

<img src="example@2x.png" width="200" height="300" />

مزایای این روش پیاده سازی آسان و سازگاری با مرورگر هاست و معایب آن دستگاه های عادی مجبورند تصاویر بزرگ را دانلود کنند.

پرس و جوی تراکم پیکسل دستگاه

شاید محبوب ترین راه برای ارائه وب سایت رتینا آگاه شدن از میزان تراکم پیکسلی دستگاه و با توجه به معرفی تصویر مناسب باری نمایش است. این کار را میتوان با  css وJavaScript انجام داد.

استفاده از  CSS MEDIA

برای استفاده از آن از پیشوند   device-pixel-ratio و فرزندان آن min-device-pixel-ratio وmax-device-pixel-ratio استفاده میشود.

.icon {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

مزیت این روش هر دستگاه فقط تصویر متعلق به خود  را دانلود میکند و عیب آن پیاده سازی خسته کننده مخصوصا در وب سایت های بزرگ است.

با استفاده از جاوا اسکریپت

تراکم پیکسلی در جاوااسکریپت با window.devicePixelRatio نشان داده میشود . مانند همتای css خود تراکم پیکسل دستگاه را مشخص میکند و تصویر مورد نظر را جا گذاری میکند. کد آن به صورت زیر است.

$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var lowresImages = $('img');

    images.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace(".", "@2x.");
      $(this).attr('src', highres);
    });
  }
});

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

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

تصاویر برداری مقیاس پذیر و آیکون فونت ها تصاویر رتینا هستند

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

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

برچسب‌ها


مطالب زیر را حتما بخوانید