۶ روش بهینه سازی تصاویر برای وب

6 روش بهینه سازی تصاویر برای وب

تصاویر از اجزای اصلی تشکیل دهنده وب سایت ها هستند که برای رساندن پیام وب سایت و جلب توجه بازدید کننده کاربرد فراوانی دارند. همچنین تصاویر در سرعت و میزان ریسپانسیو بودن وب سایت اثر گذار هستند. هماهنگ کردن کیفیت خوب تصاویر و سرعت لود مناسب سایت چیزی است که رضایت بازدیدکننده را جلب می کند. انتخاب فرمت فایل، سایز فایل و میزان فشردگی فایل و … عواملی هستند که در این بهینه سازی تاثیر گذارند. به ۶ نکته ای که در ادامه برای شما ذکر می کنیم توجه کنید تا وب سایت شما بخاطر تصاویر بکار رفته در آن، بازدیدکننده ها را خسته نکند!

انتخاب فرمت فایل

معمولا از ۳ فرمت JPG و GIF و PNG در صفحات وب استفاده می شود. کمی وسوسه کننده است که شما یکی از این فرمت ها را انتخاب کنید و برای همه تصاویر سایت خود بکار ببرید اما چون هر کدام از این فرمت ها خواص متفاوت خود را دارند بهتر است برای هر تصویر انتخاب فرمت مناسب را بررسی کنید. بدین ترتیب بالانس مناسب بین کیفیت و حجم فایل را در بهترین حالت رعایت خواهید کرد. در جدول زیر مقایسه مختصری بین این فرمت ها را مشاهده می کنید:

فرمت تصاویر

پیشنهاد می شود برای عکس ها از JPG و برای لوگو ها و طرح ها از دو فرمت دیگر استفاده کنید. ابزار Save for Web در برنامه ای مثل فتوشاپ به شما به راحتی امکان انتخاب بهینه را می دهد.

ابعاد تصاویر را تنظیم کنید

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

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

فشرده سازی

کیفیت تصاویر JPEG بصورت % انتخاب می شوند. کیفیت بالاتر با سایز بالاتر فایل متناظر است. برای هر تصویر با برنامه فتوشاپ بین ۵۰ تا ۹۰ درصد را امتحان کنید و با چشم خود قضاوت کنید که کدام حالت بالانس مناسبی بین کیفیت و سایز فایل دارد.

حذف تصاویر اضافی

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

استفاده از WebP

فرمت WebP نوع جدید است که به تازگی وارد دنیای وب شده و با داشتن تمام قابلیت های سه فرمت ذکر شده می خواهد جانشین همگی شود. این فرمت با فشرده سازی مناسب و داشتن امکان  transparency و سایز فایل مناسب می تواند بسیار مفید باشد. اما متاسفانه هنوز توسط بسیاری از مرورگر ها ساپورت نمی شود و فعلا فقط Chrome و Opera هستند که بطور پیشفرض آن را لود می کنند. همچنین ویرایشگرهایی مثل فتوشاپ برای باز کردن این نوع فایل نیاز به پلاگین های اضافی دارند. این فرمت، انتخاب آینده طراحان وب سایت ها می باشد و شما هم برای کسب تجربه با آن اقدام کنید اما فعلا زود است که همه تصاویر سایت خود را به WebP تبدیل کنید.

سرعت و سادگی

اگر می خواهید تعداد زیادی تصویر را به سایز کوچک و مناسب تغییر دهید می توانید از نرم افزار Faststone Photo Resizer که برای ویندوز ارائه شده استفاده کنید. در این نرم افزار چند تصویر را انتخاب می کنید و ویرایش دلخواه مثل تغییر به فرمت دیگر یا تغییر سایز را به همه آنها با یک کلیک اعمال می کنید. بدین صورت نسبت به ویرایش تک به تک تصاویر، سرعت کار شما بسیار افزایش می یابد.

یک دیدگاه

ارسال دیدگاه