راه حل های ساده برای بهینه سازی تصاویر وب سایت (1)

 راه حل های ساده برای بهینه سازی تصاویر وب سایت (1)

راه حل های ساده برای بهینه سازی تصاویر وب سایت  (1)

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

وقتی که طراحی وب سایت شما به اتمام می رسد، باید به سریعترین نوع ممکن،تصاویر را به چشم مخاطبتان برسانید. اما مواردی که جلوتر مطرح خواهند شد، شما را از رسیدن به بالاترین کارایی، باز می دارند. این موارد و راه حل های آنها در ادامه می خوانیم:

تحویل تصاویر مستقیماً از سرورهای شما

تعدادی زیادی از توسعه دهندگان، برای میزبانی تصاویر از سرور های خودشان استفاده می کنند، که همان سرور وب سایت است. در نتیجه فشار سرور بیشتر بر روی تحویل تصاویر است تا محتوای جدید. در این حالت، برای رفع این مشکل می توانید از یک شبکه تحویل محتویات (CDN) استفاده کنید.

راه حل:  CDN ها سرویس های ساده ای هستند که تصاویر وب سایت شما را خیلی سریعتر نسبت به میزبانی خودتان به کاربر تحویل می دهند. این شبکه از تعداد زیادی از سرور ها در گوشه و کنار دنیا تشکیل شده است. وقتی کاربری وارد وب سایت شما می شود، به صورت خودکار، تصاویر از نزدیکترین سرور به وی تحویل می شوند. بنابراین  تصاویر با بهترین سرعت و کارایی به و کمترین تأخیر، به دست کاربر می رسند.

CDN ها بر اساس پهنای باند مورد نیاز، قیمت گذاری می شوند و معمولاً کمی گران تر از سرویس میزبانی کنونی شما هستند، اما CDN ها امروزی مقرون به صرفه تر هستند و ارزش خرید بالایی دارند.

تحویل آیکون های ایستا به صورت یک به یک

علاوه بر تصاویر و ریز عکس ها، معمولاً وب سایت شما به یک سری آیکون کمکی نیاز دارد. مثل نشان تجاری، فلش ها، نماد و علامت ها تا چهره ای خوشایند به وب سایت ببخشند.

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

راه حل: دو راه برای رفع این مشکل وجود دارد، راه حل اول استفاده از فونت آیکون ها است ( مثل fontawesome). و اما راه حل دوم این است که تمام آیکون ها را در یک تصویر قرار دهید و با استفاده از css، برای استفاده از آن آیکون، موقعیت پیکسلی آن را در تصویر اصلی مشخص کنید. اینگونه تعداد بالای آیکون ها فقط یکبار بارگیری خواهد شد.

استفاده از عکس به جای کد های css

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

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

راه حل:  حتماً هر جا که امکان آن وجود دارد، از css استفاده کنید. اگر طراح شما وظیفه طراحی ظاهر وب سایت را بر عهده دارد ، تا جایی که منظقی است، از او درخواست کنید که المان ها و عناصری که طراحی می کند، بر پایه کدهای css باشد.

به اشتراک گذاری این مطلب :