نحوه بهینه سازی تصاویر برای وب سایت(بخش اول)

نحوه بهینه سازی تصاویر برای وب سایت(بخش اول)

نوشته شده توسط: admin در تاریخ: ۱۳۹۸-۰۹-۰۹ ۱۶:۱۵:۵۱

شما چه وبلاگ، فروشگاه آنلاین یا وب سایت معمولی داشته باشید که بخواهید جالب به نظر برسد ، باید هر تصویری که آپلود می کنید را بهینه سازی کنید.برای بهینه سازی تصاویر وب سایتتان باید به سه مورد زیر توجه داشته باشید: 1) خوب به نظر رسیدن تصاویر ، 2) بارگذاری سریع تصاویر و 3) آسان سازی تصاویر برای موتورهای جستجو.

در اکثرمقالات تنها به یک جنبه از سه موردی که در بالا اشاره شد توجه کرده اند. اما تیم وارش تلاش کرده است تا با ارائه  این مقاله یک راهکار جامع برای آن ارائه کند.

حتی بهتر این است که شما می توانید تصاویر را با ابزارهای رایگان و با کاربردی آسان بهینه کنید - نیازی به فتوشاپ نیست. (در این پست من اکثراً با نسخه مبتنی بر مرورگر رایگان Pixlr نشان می دهم ، که ابزاری ساده برای ویرایش تصویر اولیه است).

1. با تصاویر با کیفیت بالا شروع کنید

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

  • Pixabay
  • Unsplash
  • Barn Images
  • PicJumbo
  • SplitShire
  • Little Visuals و ...

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

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

گرافیک: اگر به دنبال چیزی گرافیکی ترهستید ، یک ابزار آنلاین رایگان و جدید وجود دارد که می توانید برای ساخت اینفوگرافیک یا عکسهای با پوشش فونت خود استفاده کنید. Canva و PiktoChart ازجمله آنهاست.

2. از فرمت مناسب استفاده کنید: JPEG یا PNG

اگر در مورد فرمت های مختلف تصویری مانند JPG ، PNG ، GIF و SVG اطلاعی ندارید، فقط بدانید که در وب سایت خود به احتمال زیاد از یک فرمت JPEG (JPG) یا PNG میتوانید استفاده کنید. هر یک جنبه های مثبت و منفی دارند ، اما در بیشتر موارد می توانید موارد زیر را به خاطر بسپارید:

  • عکس هایی که باید به صورت JPG ذخیره شوند و بارگذاری شوند. این فرمت می تواند در یک اندازه نسبتاً کوچک و کارآمد از کلیه رنگهای موجود در عکس استفاده کند. با استفاده از JPEGs ، در صورتی که عکسی را به فرمت PNG ذخیره کنید، با حجم عظیمی ازتصاویر روبرونخواهید شد.
  • گرافیک ها ، به ویژه آنهایی که از مناطق بزرگ و مسطح رنگ استفاده می کنند ، باید به صورت PNG ذخیره شوند. این شامل بیشتر طرح ها ، اینفوگرافی ها ، تصاویر با متن زیاد و آرم ها است. PNG ها کیفیت بالاتری نسبت به JPEG دارند ، اما به طور معمول سایز بزرگتری دارند. پرونده SVG هم ،مثل PNG با قسمت هایی از رنگ و متن با خطوط واضح و زیبا برخورد می کنند ، بنابراین می توانید بزرگنمایی کرده و هیچ کیفیتی را از دست ندهید. آنها همچنین از پس زمینه های شفاف پشتیبانی می کنند (اگر از یک آرم استفاده می کنید). اگر گزینه ای دارید ، به دلیل کیفیت بهتر و آرایش غنی تر از رنگ های پشتیبانی شده ، توصیه می کنیم PNG ها را به عنوان فرمت "24 بیتی" و نه "8 بیتی" ذخیره کنید.

 

معمولاً عکسها باید به صورت JPEG ذخیره شوند و گرافیک ها و آرم ها باید به عنوان PNG ذخیره شوند.

اگر از عکسی با متن روی آن استفاده می کنید چه می کنید؟ اکثر تصویر یک عکس است ، پس به JPEG تبدیل کنید.

اکثر برنامه های ویرایش تصویرساده به شما امکان می دهند تا یکی از " Save As"، " Export " یا " Save for web " و فرمت مورد نظر خود ، JPG یا PNG را انتخاب کنید. همچنین ابزارهای آنلاین رایگان مبتنی بر وب مانند Zamzar وجود دارند که فرمت ها را برای شما تبدیل می کنند.

 

شما می توانید یک PNG را به JPEG تبدیل کنید ، اما با تبدیل یک JPEG به یک پرونده PNG هیچ چیزی به دست نمی آورید. این بدان دلیل است که یک پرونده JPG در حال حاضر در آنچه که به عنوان یک قالب ضرر نامیده می شود ذخیره شده است - داده های تصویر هنگام فشرده سازی از بین رفته اند ، بنابراین نمی توانید جادویی آن را برگردانید. به عنوان مثال ، اگر لوگو خود را به عنوان JPG دارید ، باید به جای اینکه سعی کنید مهندسی معکوس انجام دهید و از PNG  یک فایل JPEG تهیه کنید ، مستقیماً سراغ طرح خود بروید و از برنامه طراحی اصلی خود یک فایل PNG بگیرید.

 

3. برای بهینه سازی سرعت و ظاهر صفحه اندازه تصاویر را تغییر دهید

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

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

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

اندازه بهینه تصویر: آپلود و بارگذاری با تعداد بایت های فایل رابطه مستقیم دارد. بنابراین این عاملی است که می تواند باعث کاهش سرعت وب سایت شما شود. یک تصویر 15 مگابایتی (مگابایت) بسیار زیاد است. یک تصویر 125KB (کیلوبایت) بسیار معقول تر است. اگر اندازه پرونده شما واقعاً بزرگ باشد ، این نشانگر این است که یا ابعاد تصویر شما خیلی بزرگ است یا وضوح تصویر بسیار زیاد است.

اندازه تصویر: ابعاد واقعی تصویر شما در پیکسل ها. شما احتمالاً به عکس های چاپ شده سنتی به اندازه 6 4 4 ، 7 5 5 یا 10 8 8 فکر می کنید. اما در وب ، قد و عرض در پیکسل ها اندازه گیری می شود. به عنوان مثال ، یک تصویر معمولی در یک وب سایت یا وبلاگ ممکن است 300 × 300 پیکسل باشد.

وضوح برای تصاویر وب: وضوح تصویر یا کیفیت آن در دنیای چاپ باقی مانده است و اندازه آن در نقاط در هر اینچ (dpi) اندازه گیری می شود. یک چاپگر حرفه ای ممکن است به تصاویر حداقل 300dpi نیاز داشته باشد. اما اکثر مانیتورهای رایانه ای 72dpi یا 92dpi را نشان می دهند ، بنابراین هر چیزی بالاتر از آن زیاد overkill است و باعث می شود تصویر شما بی اندازه بزرگ شود. هنگامی که یک برنامه طراحی گزینه "صرفه جویی در وب" را دارد ، به معنای ذخیره آن با وضوح پایین و مناسب برای وب است.

اندازه پرونده ، اندازه تصویر و وضوح تصویر خود را چگونه بیابیم؟

اندازه فایل و اندازه تصویر را می توانید درست در رایانه پیدا کنید. اگر در رایانه شخصی هستید ، با کلیک راست بر روی پرونده تصویر ، گزینه "Properties"  و سپس زبانه "Summary"  را انتخاب کنید. در Mac ، Ctrl +  را روی پرونده تصویری کلیک کرده و " Get Info" را انتخاب کنید.

یافتن وضوح تصویر نیاز به یک برنامه عکس پیشرفته تر مانند Photoshop دارد ، اما بیشتر برنامه های ویرایش تصویر به طور خودکار تصاویر را با یک dpi پایین تر و دوستانه وب ذخیره می کنند که وضوح بهتری برای تصاویر وب دارد.

برگه تقلب برای اندازه تصویر، اندازه پرونده و وضوح تصویر

اکنون که روش های مختلف توصیف اندازه یک تصویر را می دانید ، باید چند قانون انگشت شست را در خاطر داشته باشید:

  • اندازه بهینه پرونده: تصاویر بزرگ یا تصاویر پس زمینه تمام صفحه باید بیش از 1 مگابایت نباشد.
  • بیشتر گرافیک های وب کوچک می توانند 300 کیلوبایت یا کمتر باشند.
  • وضوح برای تصاویر وب: اگر گزینه مورد نظر خود را دارید ، همیشه " Save for web" را انتخاب کنید که به تصویرتان یک وضوح مناسب برای وب می دهد.
  • می توانید یک تصویر بزرگ را کوچکتر کنید ، اما بزرگتر کردن یک تصویر بسیار سخت است. همانطور که مرکز پشتیبانی Pixlr بیان می کند ، "اگر تصویری 100 × 100 پیکسل دارید و می خواهید آن را به یک بنر خیره کننده ی یوتیوب 2560 × 1460 تبدیل کنید ، تصویر بدست آمده پیکسلی خواهد شد ... اگر به حجم فکر می کنید ، شما نمی توانید با یک گالن آب در استخر شنا کنید. "

اگر تصویر شما برای وب سایت شما خیلی بزرگ باشد چه می کنید؟

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

  • تغییر اندازه تصویر اگر عکس شما 5000 پیکسل پهن است ، بسته به نوع برنامه ریزی برای استفاده از آن در وب سایت خود ، به راحتی می توانید اندازه آن را در 2000 پیکسل ، 1200 پیکسل عرض یا حتی کوچکتر تغییر دهید. با این کار اندازه پرونده به میزان قابل توجهی کاهش می یابد. هنگام تغییر اندازه ، حتماً نسبت ها را یکسان نگه دارید تا تصویر خود را تحریف نکنید.
  • وضوح را کاهش دهید. اکثر برنامه های عکس وضوح تصویر شما را به طور خودکار فشرده می کنند و به ابعاد "سازگار با وب" (به ترتیب 72dpi و 92dpi). می توانید این کار را در گزینه Photoshop نیز انجام دهید. همچنین می توانید در بسیاری از برنامه های عکسSave As" " را ذخیره کرده و سطح کیفیت را از آنجا تنظیم کنید.
  • تصویر خود را با یک برنامه رایگان مانند TinyPNG یا TinyJPG فشرده کنید. هر دو بدون دخالت کیفیت ، اندازه پرونده شما را به میزان قابل توجهی کاهش می دهند.

ادامه مطلب را در بخش دوم مقاله بخوانید