تصاویر جزء کلیدی در طراحی وب سایت هستند. آنها نه تنها به انتقال پیام و حفظ توجه بازدید کننده کمک می کنند، بلکه در سرعت و پاسخگویی وب سایت شما هم نقش بسزایی دارند.
برقراری تعادل بین کیفیت و سرعت بارگزاری سایت در رضایت بازدیدکنندگان بسیار موثر است. مهم است که زمانی که تصویری را برای وب سایت خود انتخاب می کنید به فرمت، سایز، فشرده سازی و… آن توجه نمایید. استفاده از این 6 ترفند و راهنمایی تضمین می کند که صفحات وب شما به خاطر تصاویرشان، عقب نمی مانند.
1- فرمت خود را انتخاب نمایید.
صفحات وب تمایل دارند تا برای نمایش تصاویر از 3 فرمت اصلی GIF ، JPEG و PNG استفاده کنند. ایده آل است که یک فرمت بی عیب و نقص برای کل سایت خود انتخاب کنید. اما چون آنها با روش های مختلف کار می کنند عملا بهترین روش انتخاب بر پایه مورد به مورد است. در این روش این اطمینان به شما داده می شود که بازخورد تعادل صحیح بین کیفیت تصاویر و زمان بارگزاری وجود دارد. در اینجا مقایسه ای بین این فرمت ها داریم:
توصیه می شود، JPEG را برای عکس ها انتخاب کنید و پس از آن بینGIF و 8 بیتی PNG برای آرم ها و تصاویر ساده تصمیم گیری نمایید. با در نظر گرفتن مزیت پشتیبانی فرمت برای شفافیت، شما به راحتی می توانید مکانی از آرم را برش بزنید و روی تصویر یا بالای یک پس زمینه رنگی و یا حتی عکس قرار دهید.
با این حال،اگر شما میخواهید یک صفحه وب آراسته و شکیل تر داشته باشید تصور نکنید که یک فرمت همیشه و در همه حال بهتر از دیگری است: اگر شما از فتوشاپ یا ابزارهای مشابه برای ساختن تصویر استفاده می کنید،یک گزینه برای ذخیره سازی به نام ‘Save for Web’ وجود دارد ، این تنظیم، گزینه هایی برای همه ی سه فرمت به صورت کامل با پنجره ی پیش نمایش، فراهم می کند و سایز فایل را تخمین می زند و به شما اجازه می دهد تا بهترین انتخاب را برای تصویر خود داشته باشید.
2- تغییر اندازه برای وب
تصاویر بزرگ را مستقیما در صفحه وب خود قرار ندهید. پس از تغییر اندازه آنها برای صفحه وب خود – صفحه وب زمانی که باز می شود تمام عکس را دانلود می کند و به طور قابل توجهی سرعت بارگزاری را کند می کند- در عوض، بارگزاری این تصویر در ویرایشگر تصویر شما باعث ایجاد یک کپی thumbnail به همان اندازه ای که در صفحه نمایش داده می شود، می شود. اگر شما میخواهید مردم بتوانند تصاویر را در اندازه کامل مشاهده کنند، آن را جداگانه آپلود کنید و سپس، یک لینک قابل کلیک اضافه کنید.
3- فشرده سازی با دقت
کیفیت تصویر JPEG بر اساس درصد مشخص است اندازه ی بالاتر تصویر برابر کیفیت بهتر تصویر است. با تنظیمات مختلف از حدود 50% تا 90% امتحان کنید و از دید خود برای قضاوت روی بهترین تعادل بین سایز و کیفیت بهره ببرید.
4- رها کردن تصاویر جمعی
از خودتان بپرسید آیا واقعا سایت شما به تمام تصاویر آپلود شده نیاز دارد؟ اگر شما در حال رندر کردن متن به جای یک تصویر هستید، بررسی کنید ببینید آیا می شود از فونتهای وب به جای آن استفاده کنید؟ – این بسیار سریعتر ازنمایش یک تصویر است، می توان در میان متن اسکرول نمایید و همچنین قابلیت جستجو دارد- به طور مشابه، از جلوه های CSS و انیمیشن مانند شیب و سایه به جای اثرات مبتنی بر تصویر، می توانید استفاده نمایید. اما به یاد داشته باشید این را میان انواع مختلف مرورگرهای وب از لحاظ تمامی استاندارد ها تست کنید،، به ویژه در مرورگرهای قدیمی تر.
5- WebP را چک کنید.
WebP جدید است، از تصاویر فرمت شده که هدف جایگزینی آنها با فرمتهای JPEG و GIF و PNG با همه ی قابلیتهایشان است- با درنظر گرفتن تنظیمات فشرده سازی یا بدون آن- پشتیبانی می کند و تبدیل به یک فرمت واحد که وعده ی آن اندازه فایل کوچکتر از هر دو PNG و JPEG است را می دهد. با این حال به طور گسترده پشتیبانی نمیشود- تنها مرورگرهای بومی اپرا و کروم آنها را پشتیبانی میکنند.- برای مثال با وجودی که بسیاری از ویرایشگرهای عکس هنوز آن را پشتیبانی نمی کنند(بقیه مثل فتوشاپ،نیاز به یک پلاگین جداگانه دارند) این توسعه هیجان انگیزی است که ممکن است آینده ی تصاویر وب را نشان دهد، در حال حاضر برخی ها این راه را در پیش گرفته اند. شروع به آزمایش کرده اند، اماهنوز تمام تصاویر خود را نمیتوانند روی آن سوئیچ کنند.
6- سریع و آسان
اگر شما تعداد زیادی تصویر برای پردازش داشته باشید-برای مثال،شما میخواهید تعدادی از تصاویر thumbnail ایجادکنید- نگاهی به ابزار پردازش دسته ای Faststone Photo Resizer برای ویندوز بیندازید. به سادگی تصاویر خود را و اینکه چه ویرایش می خواهید انجام دهید انتخاب کنید، (مانند تغییر اندازه و یا تبدیل به یک فرمت تصویری دیگر) و سپس یک پوشه خروجی را انتخاب کنید. شما همچنین می توانید تصاویر تبدیل شده را تغییر نام دهید (مثلا با اضافه کردن _thmb به پایان نام فایل). بسیار سریعتر ازاین است که کارها را دستی انجام دهید.
