بهینه سازی تصاویر در طراحی سایت

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

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

بگذارید این موضوع را کمی با ادبیات فنی طراحی سایت بررسی کنیم. صفحه نمایش کامپیوتر می تواند تنها تصاویری با وضوح ۷۲dpi (نقطه در اینچ) را نمایش دهد. در نتیجه اولین گام در بهینه سازی تصاویر، کاهش وضوح به ۷۲ dpi است. تصاویر بزرگتر می توانند به قسمتهای کوچکتری تقسیم بندی شوند. هر قسمت، فایل کوچکی است که می تواند در کسر کوچکی از زمان لود شود.

همچنین یادتان باشد که اکثر اطلاعات موجود در یک صفحه سایت مربوط به عکس ها هستند. برای بهینه سازی عکس ها برنامه های گرافیکی به کمک شما می آیند و در حال حاضر  بسیاری از برنامه های گرافیکی این قابلیت را دارند تا تصاویر را با آنها برای وبسایتتان ذخیره کنید. برای مثال برنامه کاربردی Save for the web کلیه اطلاعات غیر ضروری را از تصویر شما حذف کرده و بدون آنکه کیفیت نهایی تصویر کاهش یابد آن را برای بارگذاری در وبسایت ها آماده می کند.

روش دیگری که به ظاهر می تواند زمان بارگذاری را بالاتر برد، استفاده از ویژگی progressive برای تصاویر GIF، یا PNGهای interlaced است. هر دوی این ویژگیها این امکان را می دهند تا زمان بارگذاری صفحات به تدریج صورت گیرد و در ابتدا تصویری مات نمایش داده شود و سپس تصویری با وضوح بیشتر و شفاف تر. در حقیقت این تصاویر حتی چند ثانیه نیز کندتر از تصاویر معمولی بارگذاری می شوند ولی آنها برای بازدید کنندگان سریعتر به نظر می رسند.

خصیصه طول و عرض IMG

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

تعریف پیشنهادهایی برای بارگذاری باکیفیت عکس

• وضوح تصاویر را به ۷۲ dpi کاهش دهید.
• تصاویر متنی را به متن واقعی تبدیل کنید.
• تصاویر را به اندازه ای که مورد نیاز است برش (crop) دهید.
• عمق رنگ را درمواقعی که برای کیفیت مورد نیاز نیست کم کنید.
• طول و عرض واقعی تصاویر را مشخص کنید.
• در صورت لزوم از نسخه کوچک عکسها استفاده کنید.

استاندارد تعداد عکس ها در یک صفحه

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

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

اجازه دهید نگاهی بر برش موثر و بهینه تصاویر داشته باشیم تا بدانیم اینکار به چه معنایی می باشد:

1.  تکه ها را بقدری بزرگ انتخاب نکنید که رنگ های مختلف زیادی را شامل شود. از تعداد کمی برش استفاده کنید بطوریکه تعداد رنگ های استفاده شده محدود شوند.
2.  تکه ها را بقدری بزرگ انتخاب نکنید که شامل ساختار گرافیکی مشابهی باشند
3. . تکه ای کوچک را برش بزنید و از آن در جاهای مختلف در کدهایتان استفاده کنید. این اشتباه مرسومی است که طراحان و برنامه نویسان در رنگهای گرادیانت پیش زمینه ها مرتکب آن می شوند.
4.  از فرمتهای غیر از JPEG نیز استفاده کنید. در برخی حالات، فرمت GIF حجم کمتری را اشغال می کند. بعنوان یک قانون سر انگشتی، تکه ای از تصویر با تعدادی رنگ در فرمت JPEG حجم کمتری را نسبت به GIF خواهد گرفت و برعکس. هر کدام را بطور جداگانه آزمایش کنید. هر کیلوبایتی که از تصاویر کم می کنید در نهایت منجر به کاهش چشمگیری در سایز صفحات خواهد شد.
5.  چنانچه متنی را در پیش زمینه ای با رنگی ساده دارید، هرگز آن را تکه نکنید. از کدهای html برای رنگ پیش زمینه استفاده کنید. به یاد داشته باشید که نمی توان همزمان هم نوع فوننت و هم رنگ پیش زمینه را با استفاده از CSS تعریف کرد.

   

    

نوشته بهینه سازی تصاویر در طراحی سایت اولین بار در طراحی سایت | طراحی وب سایت | شرکت طراحی سایت | بهترین شرکت طراحی سایت در تهران پدیدار شد.