7 روش برای کاهش اندازه تصویر و فیلم برای وب
در این پست، ما در یک زمینه بهینه سازی با هفت روش بررسی خواهیم کرد که می توانید برای کاهش اندازه پرونده تصاویر و فیلم ها استفاده کنید. فایده اصلی اندازه های کوچکتر تصویر این است که باعث بارگیری سریعتر صفحات وب می شود. کارشناسان می گویند هرچه زمان بارگیری یک صفحه وب از 1 ثانیه به 7 ثانیه افزایش یابد ، احتمال تندرست شدن بازدید کننده تلفن همراه (بلافاصله رفتن مجدد بلافاصله) 113٪ افزایش می یابد. بی بی سی دریافت که سایت هایی با سرعت بارگذاری پایین در هر ثانیه برای بارگیری سایتشان 10٪ از کاربران اضافی را از دست می دهند؛ که این میتواند برای سایت شما بسیار مضر باشد.
وضوح معقول را انتخاب کنید
مقیاس بندی تصاویر و فیلم ها در اندازه هایی که در نهایت در آنها نمایش داده نمی شود، بهترین روش است. هیچ فایده ای ندارد که یک مرورگر بارگیری یک تصویر 2mb که 2000 پیکسل ’s 1000 پیکسل است را فقط برای مرورگر انجام دهد تا آن را به 400 پیکسل × 200 پیکسل کاهش دهد. همچنین می توانید تصویر را در وضوح تصویر ارائه دهید تا در همان ابتدا از همان ابتدا نمایش داده شود.
در مورد تصاویر و فیلم هایی که قصد پر کردن بسیاری از پنجره مرورگر را دارید، مانند فیلم های هدر یا تصاویر پس زمینه لغزان، من حداکثر عرض 1200px را پیدا می کنم که 1500 پیکسل معمولاً کافی است ، به شرطی که حاوی جزئیات بسیار خوبی نباشد. تصاویر بزرگتر به طور کلی می توانند با کمی ایمنی برای صفحه های بزرگ کوچک شوند بدون اینکه خیلی قابل توجه باشند.
قالب مناسب فایل را انتخاب کنید
تصاویر و فیلم ها باید در قالب فایل منطقی ذخیره شوند. برخی از قوانین کلی:
- عکس ها باید به صورت JPG ذخیره شوند
- آرم ها و سایر جزئیات مبتنی بر خط به صورت ایده آل در SVG یا به عنوان PNG برای برنامه هایی که SVG به درستی کار نمی کند ارائه می شوند. در زمان نوشتن مقاله ، برای بارگذاری SVG ها در وب سایت وردپرس باید از افزونه ای مانند Safe SVG استفاده کنید.
ats قالب های فایل مناسب برای فیلم در وب MP4 ، WebM ، WebVTT یا OGV است (اگرچه OGV با اینترنت اکسپلورر و سافاری سازگار نیست). پس از بارگذاری تصاویر در یکی از آن قالب ها ، می توانید آنها را با قالب مدرن WebP با استفاده از یک افزونه به مرورگرهایی که از آن پشتیبانی می کنند تحویل دهید (هنوز همه این کار را نمی کند) قالب فایل WebP توسط گوگل ساخته شده و فشرده سازی تصویر برتر را بدون افت کیفیت زیاد فراهم می کند.
اینترنت اکسپلورر و Safari هنوز قادر به نمایش تصاویر WebP نیستند ، بنابراین شما باید تصاویر را با استفاده از قالب های پرونده ذکر شده در بالا بارگذاری کنید و به یک افزونه اعتماد کنید تا نسخه های WebP را فقط به مرورگرهایی که از آن پشتیبانی می کنند نشان دهد. وب سایت هایی که روی LiteSpeed کار می کنند می توانند از فشرده سازی بومی WebP که در پلاگین رایگان LiteSpeed Cache تعبیه شده استفاده کنند.
به هر حال ، من توصیه می کنم فقط فایلهای ویدیویی کوچک را با وب سایت خود میزبانی کرده و با استفاده از سرویسی مانند Vimeo ، YouTube ، Metacafe ، Dailymotion ، Veoh یا موارد مشابه ، ویدیوهای گسترده تری را به بازدیدکنندگان ارائه دهید.
قبل از بارگذاری فشرده کنید
فشرده سازی تصاویر و فیلم ها قبل از بارگذاری بسیار مهم است.
کدهای فشرده سازی از بسیاری از تکنیک ها برای کاهش داده های مورد نیاز برای توصیف یک تصویر یا فریم های یک فیلم استفاده می کنند ، و داده های غیرضروری را که به هر حال در پرونده نهایی دیده نمی شوند کوتاه می کنند. برای فشرده سازی عکس ، فتوشاپ یک ویژگی عالی برای این دارد که «ذخیره در وب» است. با این کار می توانید قالب پرونده ، وضوح تصویر و میزان فشرده سازی مورد نیاز را تنظیم کنید. فشرده سازی بیشتر به معنای اندازه پرونده کوچکتر است ، اما تصویر با کیفیت پایین - کیفیت بالا (60٪) معمولاً نقطه شیرین است.
اگر همیشه نمی توانید فشرده سازی تصاویر را قبل از بارگذاری کنترل کنید (به عنوان مثال اغلب از تلفن خود پست منتشر می کنید یا به کاربران وب سایت اجازه می دهید تصاویر را بارگذاری کنند) ، می توانید از یک پلاگین فشرده سازی تصویر مانند Shortpixel یا Smush استفاده کنید که پس از بارگذاری تصاویر ، آنها را به طور خودکار فشرده کنید. فشرده سازی ویدئو به اندازه تصاویر ساده نیست زیرا تعداد زیادی کدک و قالب فایل در دسترس است. علاوه بر این ، فشرده سازی ویدئو میزان جزئیات بین فریم ها را در نظر می گیرد و از فریم های کلیدی برای ذخیره داده های تصویر استفاده می شود تا در سایر فریم ها استفاده شود.
دو مورد از محبوب ترین برنامه های رایگان برای فشرده سازی فیلم ، Freemake (استفاده آسان) و ترمز دستی (ارائه گزینه های پیکربندی بیشتر) هستند. با این حال ، اگر ویدیویی را ویرایش کرده اید ، بهتر است هنگام صادرات ، تنظیمات صحیح فشرده سازی را تنظیم کنید نه اینکه آن را از طریق نرم افزار فشرده سازی اضافی منتقل کنید ، زیرا هر تصویب بدون نیاز کیفیت تصویر را کمی بیشتر کاهش می دهد.
تصاویر و فیلم ها را با جزئیات کمتر انتخاب کنید
یکی از بهترین راه ها برای اینکه اندازه تصاویر و فیلم های شما کم باشد ، انتخاب تصاویر ساده تر از همان ابتدا است. جزئیات همان چیزی است که اندازه پرونده آنها را در اختیار تصاویر قرار می دهد ، بنابراین اگر مدل هایی با مناطق کوچکتر را انتخاب کنید که دارای جزئیات ظریف هستند ، آن تصاویر دارای اندازه پرونده کوچکتر خواهند بود.
تاری را اضافه کنید
تصاویر یا فیلم های گرفته شده در شرایط تاریک با دوربین با استفاده از ISO بالا می تواند بسیار دانه ریز باشد و این می تواند اندازه پرونده را به طرز چشمگیری افزایش دهد. خنثی سازی تصاویر و فیلم هایی که حاوی مقدار زیادی دانه یا سر و صدا در برنامه ای مانند Photoshop ، GIMP یا Premiere Pro هستند می تواند کمک کند. متناوباً ، افزودن حتی کمی تاری گاوسی در کل تصویر یا فیلم می تواند به شدت اندازه پرونده آن را کاهش دهد. یا برای جلوه ای ظریف تر ، اگر بخشی از تصویر از قبل دارای تاری طبیعی لنز است ، کمی آن را برجسته کنید.
رنگ اضافه کنید یا نور را کم کنید
کاهش دامنه دینامیکی تصویر با تاریک کردن آن نیز می تواند کمک کند. افزودن شستشوی رنگی روی تصویر روش دیگری برای کاهش اندازه فایل است. می توانید از رنگ مارک خود استفاده کنید تا همزمان با طراحی وب سایت شما مطابقت داشته باشد.
از نظر دید ، ایجاد تاری یا تاریک شدن تصویر می تواند ایده ای عالی برای تصاویر مورد استفاده به عنوان تصاویر پس زمینه باشد زیرا باعث می شود جزئیات تصویر پس زمینه با هر چیزی که روی آن پوشانده شده است ، خواه متن باشد یا نماد ، درگیر نشود.
اشباع و کنتراست را با فیلترهای CSS دوباره اضافه کنید
خوب ، این مورد "آنجا" کمی بیشتر خواهد بود و این روش فقط با تصاویر و نه فیلم ها امکان پذیر است. هر مرورگری به غیر از IE و Opera Mini (که 1.7٪ - 2.2٪ از ترافیک اینترنت را به خود اختصاص می دهد ، بستگی به درخواست شما دارد) می تواند با فیلترهای CSS کار کند. فیلترها به مرورگر دستور می دهند تا میزان اشباع ، کنتراست ، تاری ، رنگ و غیره یک تصویر را تنظیم کند.
ممکن است به این مطلب نیز علاقه مند باشید: 10 نمایشگر برتر برای طراحی