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

انواع مدل های بهینه سازی تصاویر

سه نوع فایل اصلی وجود دارد که می خواهیم برای بهینه سازی تصاویر روی آنه ا تمرکز کنیم: GIF ،JPG و PNG.

هر نوع پرونده نقاط قوت و ضعف خاص خود را دارد و در نظر داشتن این نکات هنگام ذخیره تصاویر بسیار مهم است.

کار با JPG ها

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

JPG ها (همچنین با عنوان JPEG نیز شناخته می شوند) محبوب ترین نوع فایل برای تصاویر در وب هستند.

JPG ها برای عکس یا تصاویر پیچیده ای که حاوی تعداد زیادی رنگ، سایه ها و الگوهای پیچیده هستند مناسب هستند.

JPG ها برای این نوع تصاویر بسیار مناسب هستند، زیرا یک پالت رنگی گسترده برای کار با آن ها دارند.

JPG ها همچنین می توانند در تمامی کیفیت ها ذخیره شوند که به شما این امکان را می دهد تا دقیقاً همانطور که می خواهید تصاویر را تنظیم کرده و ذخیره کنید و همچنین کیفیت و حجم فایل ها را متعادل کنید.

کار با PNG ها

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

PNG ها یکی دیگر از فرمت های رایج هستند، در Adobe Photoshop شما می توانید PNG ها را به عنوان PNG-8 یا PNG-24 ذخیره کنید.

  • PNG-8 یک پالت رنگی بسیار محدود با 256 رنگ دارد و برای تصاویری با حجم کم مناسب است، این گزینه مناسبی برای تصاویر و عکس های پیچیده مناسب نخواهد بود.
  • PNG-24 تصاویری با کیفیت بسیار بالاتر اما با حجمی بیشتر ارائه می دهد.

مهم تر از همه این است که PNG ها می توانند شفافیت را کنترل کنند، این یکی از بزرگترین نقاط تمایز بین PNG و JPEG است.

کار با GIF ها

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

GIF ها از سال ها پیش محبوبیت داشتند.

تقریباً مانند PNG-8، پرونده های GIF فقط به 256 رنگ محدود می شوند. به همین دلیل، هرگز نباید از GIF ها برای عکس های محصول استفاده شود.

نحوه ذخیره سازی صحیح تصاویر

همانطور که انتظار می رود، تصاویر با حجم بالا برای بارگذاری زمان بیشتری می برد.

وقتی صحبت از حجم بالا می شود، بیشتر به ابعاد فایل اشاره می کنیم نه ابعاد یک تصویر، یعنی KB ،MB ،GB و … .

مطالعه بیشتر …

برای کسب اطلاعات بیشتر در مورد ریسپانسیو کردن تصاویر، می توانید به مقاله ” چگونه تصاویر وردپرس را ریسپانسیو کنیم؟ ” مراجعه نمایید.

با توجه به اینکه 47٪ از کاربران انتظار دارند کمتر از 2 ثانیه یک صفحه وب بارگذاری شود و 40٪ صفحه هایی را که بیش از 3 ثانیه برای لود شدن طول می کشد، رها می کنند، مهم است که تصاویر شما به اندازه کافی کم حجم باشند تا وب سایت شما از سرعت بالا برخوردار شود.

سه روش وجود دارد که می توانید برای بهینه سازی تصاویر خود انجام دهید:

کاهش ابعاد تصاویر

شما باید تصاویر را در فتوشاپ باز کنید و آن را به صورت 100٪ مشاهده کنید.

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

ذخیره سازی تصاویر با Save for Web

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

کاهش اندازه فایل بدون کاهش چشمگیر کیفیت تصاویر ممکن است، روش مورد علاقه ما در کاهش اندازه فایل ها بدون کاهش قابل توجه کیفیت تصویر، استفاده از عملکرد “Save for Web” است.

تصویر خود را در Photoshop باز کنید و به (File> Export> Save for Web (Legacy بروید…. پنجره ای ظاهر می شود که به شما امکان می دهد کیفیت تصویر خود را انتخاب کنید.

COMPRESS عکس ها برای وب

برنامه های فشرده سازی تصاویر ساده ترین روش برای کاهش اندازه فایل تصاویر هستند.

این نوع ابزارها داده های پنهان موجود در فایل تصاویر را که لازم نیستند، حذف می کنند.

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

برنامه های فشرده سازی تصویر

  • ImageOptim
  • ShortPixel
  • TinyJPG
  • TinyPNG
  • Compressor.io
  • Kraken
  • ImageOptimizer
  • Crush Pics
  • Minifier

اندازه تصویر را کاهش دهید!

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

بسته به نوع برنامه ای که شما تصمیم به استفاده از آن دارید، می توانید:

  • قبل از بهینه سازی، اندازه تصویر را کاهش دهید.
  • در ضمن ذخیره تصویر، اندازه تصویر را کاهش دهید.
  • تصویر را ذخیره کنید، سپس اندازه تصویر را کاهش دهید

در کادر “Save For Web”، باید چند مورد را انتخاب کنیم:

  • نوع تصویر: نوع فایل بر کیفیت و اندازه خروجی آن تأثیر می گذارد.
  • کیفیت تصویر: این مورد مهم است و می تواند به شدت بر اندازه نهایی فایل تأثیر بگذارد.
  • ابعاد: ما در مرحله اول این کار را انجام دادیم، بنابراین نیازی به انجام مجدد آن نیست، اما اگر در مرحله اول این کار را نکردیم فقط می توانیم ابعاد تصویر را در اینجا تغییر دهیم.

برای کیفیت تصویر 5 مورد از پیش تعیین شده که می توانید انتخاب کنید. (این اطلاعات در گوشه پایین پنجره ذخیره تصویر نمایش داده می شود):

  • Maximum: 1.38 MB
  • Very High: 611 KB
  • High: 339 KB
  • Medium: 152 KB
  • Low: 86k

نتیجه

ما با چند قدم ساده اندازه تصاویر را می توانیم کاهش دهیم تا آن را برای صفحه اصلی خود مناسب کنیم.

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