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

توحید عزیززاده در مارس 31, 2019
فشرده سازی تصاویر بدون افت کیفیت
image_pdfimage_print

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

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

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

ابتدا، چرا انتخاب یک فرمت عکس مناسب مهم است؟

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

انتخاب فرمت صحیح در عکس

انتخاب فرمت صحیح در عکس

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

به همین دلیل لازم است تا عکس ها با توجه به نیاز بهینه سازی شوند و قابلیت های اضافی مانند شفافیت بیش از حد، رنگ های متنوع، جزئیات غیر مهم و … که تنها باعث حجیم تر شدن سایت می شوند کنار گذاشته شوند.

انتخاب یک حجم مناسب برای تصاویر

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

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

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

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

برای اینکه بتوانید فرمت مناسب را از بین فرمت های مختلف انتخاب کنید، باید فرق بین فشرده سازی “lossless” و “lossy” را بدانید. در مورد اول، کیفیت را حفظ خواهید کرد. در مورد دومی، از کیفیت کاسته می شود. در مورد از دست رفتن کیفیت باید خاطر نشان کنیم که لزوما بدین معنی نیست که عکس از لحاظ کیفیت افتضاح می شود.

معرفی ابزار هایی که به صورت آنلاین کار فشردگی تصاویر را بدون افت کیفیت و عالی انجام می دهند:

برخی جزئیات در تصاویر وجود دارند که حتی با چشم انسان قابل رویت نیستند. بر خلاف فشرده سازی lossy، فشرده سازی lossless تمام جزئیات مهم یک تصویر را حفظ کرده و تصویر را می سازد. برخی از فرمت ها قابلیت هر دو نوع فشرده سازی را دارند.

معرفی فرمت های بهینه عکس

معرفی فرمت های بهینه عکس

معرفی فرمت JPEG

این فرمت برای استفاده عکس ها طراحی شده و در اغلب عکس هایی که با موبایل و یا دوربین های عکاسی گرفته می شوند، آن را خواهید دید.

مزایای استفاده از فرمت JPEG

  • فرمت JPEG می تواند میلیون ها رنگ را در خود بگنجاند. در نتیجه عکس هایی غنی و با کیفیت تولید می کند.
  • حتی با وجود رنگ های زیاد و عکس های دقیق می توانند حجم کمتری داشته باشند.

پس تعجبی ندارد که این فرمت عکس در وب بسیار پرکاربرد باشد. اما از آنجایی که برای عکس ها طراحی شده اند، قابلیت پشتیبانی از شفافیت و انیمیشن را ندارند.

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

این فرمت از الگوریتم فشرده سازی lossy برای کاهش حجم عکس ها استفاده می کند.

با این حال می تواند درصد فشرده سازی عکس ها را در آن تعیین کنید. توجه کنید که ۰% فشردگی زیاد و ۱۰۰% فشردگی کم یا به اصطلاح سبک است. معمولا یک فشرده سازی بین ۱۰۰ تا ۷۵ درصد کیفیت مناسبی را خواهد داشت. اما هنوز در همان ۷۵% عکس شما نصف حجم قبلی را خواهد داشت به همین دلیل برخی شبکه های اجتماعی عکس ها را بین ۷۰ تا ۸۰ درصد فشرده سازی می کنند.

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

فرمت jpeg بهتر است یا فرمت png

فرمت JPEG برای عکس هایی که کنتراست بالایی دارند، ضعیف است.

به این دلیل است که اسکرین شات های JPEG با جملات سیاه بر بکگراند سفید، مات بنظر می رسند. JPEG  عموما برای عکس ها، مخصوصا آنهایی که دارای متن نیستند مناسب است.

اما کمتر بودن حجم عکس ها نسبت به کیفیت بالا اولویت دارد. عکس ها با فرمت JPEG به میزانی غیرقابل چشم پوشی حجم کمتری نسبت به فرمت PNG دارند.

معرفی فرمت PNG

یکی دیگر از فرمت های پرکاربرد در زمینه وب PNG است. امروزه PNG عمدتا برای جایگزینی GIF استفاده می شود. نقطه قوت  PNG الگوریتم فشرده سازی Lossless است. در فشرده سازی PNG هیچ گونه داده ای از عکس حذف نمی شود و جزئیات عکس باقی می مانند. اما همان طور که گفته شد این فایل ها نسبتا حجیم تر هستند.

مقاله پیشنهادی مفید و کاربردی: افزایش سرعت لود سایت های وردپرسی [مصاحبه]

دیگر مزیت این فرمت ، پشتیبانی از پشت زمینه شفاف برای طراحی لوگو ها است. اگر یادتان باشد، JPEG فاقد این ویژگی بود. سه نوع فرمت برای PNG وجود دارد که عبارت هستند از : PNG-8, PNG-24 و PNG-32. این فرمت ها را به طور خلاصه بررسی خواهیم کرد. PNG-8  از جهت پشتیبانی ۲۵۶ رنگ در عکس ها، به گیف شباهت دارد ولی برخلاف GIF، انیمیشن را پشتیبانی نمی کند و حجم کمتری هم دارد.

PNG-24 ظرفیت گنجایش ۱۶ میلیون رنگ را دارد و از این جهت به JPEG نزدیک است. اما حجم آن بیشتر است. PNG-32 فایل های حجیم تری هستند که معمولا در وب بکار گرفته نمی شوند. از این فرمت برای طراحی عکس ها و لوگو هایی که به پیشرفتگی های خاصی نیاز دارند استفاده می شود.

معرفی فرمت WebP

بنظر شما عالی نمی شود اگر بتوان نقاط قوت JPEG  و PNG را باهم ترکیب کرد؟

بر همین مبنا گوگل یک فرمت اوپن سورس برای عکس ها طراحی کرد. فرمت WebP یکی از بهترین فرمت ها برای بهینه سازی عکس ها است. این فرمت هر دو نوع فشرده سازی را پشتیبانی می کند. در فشرده سازی lossy می توانید میزان فشرده سازی را تعیین کنید که در JPEG این کار در فشرده سازی Lossless  انجام می شد. در فشرده سازی Lossless عکس شما مانند PNG خواهد بود، حجم ممکن است بالا باشد ولی هیچ جزئیاتی در عکس از دست نمی رود.

اما تفاوت در این است که WebP باز از دو نمونه JPEG و PNG کم حجم تر است. بسیار شگفت انگیز است! اما اگر بدانید که این فرمت هنوز در برخی از مرورگر ها پشتیبانی نمی شود دلسرد خواهید شد. البته پلاگین هایی وجود دارند که پشتیبانی یا عدم پشتیبانی مرورگر از این فرمت را برسی میکنند و در صورت پشتیبانی عکس ها را به این فرمت تبدیل میکنند تا سرعت بارگزاری تصاویر افزایش یابد.

فرمت های دیگری هم مانند GIF و SVG وجود دارند و بسته به نیاز استفاده می شوند. امروزه استفاده از فرمت GIF هم بسیار کمتر متداول است. و SVG هم به دلایل امنیتی در وردپرس آپلود نمی شود‌. به طور کلی توجه داشته باشید که در تولید محتوا تصویری خود نکات مطرح شده را در نظر بگیرید تا عملکرد بهتری داشته باشید.

نویسنده : توحید عزیززاده

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

نیاز به مشاوره بیشتر دارید؟ برای صحبت با متخصصین سریرنوین تماس بگیرید
منتظر نظرات ارزشمند شما در مورد پیرامون این مقاله هستیم و مطمئن باشید در کمترین زمان ممکن به آن پاسخ داده خواهد شد.

4 دیدگاه در “فشرده سازی تصاویر بدون افت کیفیت”

  1. مینا گفت:

    بابت راهنمایی کم کردن حجم عکس خیلی ممنونم. من خیلی مشکل داشتم رو زیاد بودن حجم عکس. واقعا خدا خیرتون بده. عاقبت به خیر بشید ان شا الله.

    1. توحید عزیززاده گفت:

      سلام خوشحالم که مفید واقع بوده

  2. سلیم گفت:

    ممنون واقعا سایت هایی که گفتین مشکلم رو حل کرد دستتون درد نکنه

    1. توحید عزیززاده گفت:

      سلام خوشحالم که مفید واقع بوده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

تازه، وارد دنیای طراحی سایت و سئو سایت شده اید؟

مشاوره در واتس اپ