نکات و روش های بهینه سازی تصاویر برای وب (بدون کاهش کیفیت) در سال جدید


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

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

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

بهینه سازی تصویر چیست؟ (تصاویر بهینه در مقابل تصاویر بهینه نشده چه تفاوتی دارند؟)

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

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

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

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

به صورت ساده شده، سیستم بهینه سازی تصویر با استفاده از تکنولوژی های فشرده سازی مانند Lossy و Lossless کار می کند که به کاهش حجم کلی فایل بدون کاهش قابل توجه کیفیت کمک می کند.

بهینه سازی تصاویر به چه معناست؟

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

چرا بهینه سازی تصویر مهم است؟ مزایای بهینه سازی تصویر چیست؟

در حالی که بهینه سازی تصاویر در سایت می تواند یک پوئن مثبت باشد، مزیت های بسیار دیگری نیز دارد. در لیست زیر بهترین مواردی که باید بدانید آورده شده است:

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

به جز ویدئوها، تصاویر سنگین ترین آیتم بعدی در سایت ها هستند. بر اساس گزارش های سایت آرشیو، تصاویر به طور متوسط ​​21٪ از وزن کل صفحه سایت را تشکیل می دهند. از آنجایی که می دانیم سایت های سریع رتبه بهتری در بهینه سازی سایت برای موتورهای جست و جو (SEO) داشته و به همین دلیل CTR بالاتر و نرخ تبدیل بالاتری دارند، بهینه سازی تصویر کاری است که هر سایتی برای موفقیت باید انجام دهد.

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

الان ممکن است از خود بپرسید که بهینه سازی تصویر واقعا چقدر می تواند تفاوت ایجاد کند بین وقتیکه یک تصویر بهینه نشده است و یک تصویر بهینه شده است؟ طبق یک مطالعه در موسسه Strange loop، یک ثانیه تاخیر در زمان بارگذاری وب سایت می تواند 7 درصد از فروش را کاهش دهد، 11 درصد بازدید کمتر و 16 درصد کاهش رضایت مشتری را به همراه داشته باشد.

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

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

چگونه تصاویر را برای وب بهینه کنیم؟

کلید موفقیت آمیز بهینه سازی تصاویر 3 مورد اساسی است که درباره آن ها صحبت می کنیم. کار ما برای بهینه سازی حداکثری تصاویر، یافتن تعادل کامل بین کمترین اندازه فایل و کیفیت تصویر قابل قبول است.

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

  • فرمت فایل تصویر (JPEG و PNG و GIF و WEBP)
  • فشرده سازی (فشرده سازی بیشتر = اندازه فایل کوچکتر در نهایت)
  • ابعاد تصویر (ارتفاع و عرض)

با انتخاب ترکیب مناسب از این سه، می توانید اندازه تصویر خود را تا 80 درصد یا بیشتر (در صورت کشش) کاهش دهید. برای مثال اگر شما یک تصویر سیاه و سفید png داشته باشید نیاز نیست که از 256 رنگ اصلی در فرمت PNG استفاده کنید و فقط 2 رنگ کافی است که باعث کاهش حداکثری حجم آن عکس می شود.

در ادامه هر یک از این موارد را با جزئیات بیشتر بررسی کنیم.

1. فرمت فایل تصویری چیست؟

هرچند که فرمت های بیشتری مانند WEBP هم وجود دارند اما کاملا جا نیافتاده و برای اکثر مدیران سایت، تنها سه فرمت فایل تصویری که واقعا مهم هستند JPEG و PNG و GIF است. انتخاب فرمت تصویر مناسب، نقش مهمی در بهینه سازی تصویر دارد.

ساده ترین کار این است که این کار را انجام دهید > از JPEG برای عکس‌ها یا تصاویر با رنگ‌های زیاد استفاده کنید. از PNG برای تصاویر ساده یا زمانی که به تصاویر شفاف نیاز دارید استفاده داشته باشید و از GIF فقط برای تصاویر متحرک استفاده کنید. برای کسانی که تفاوت بین هر نوع فایل را نمی دانند، فرمت تصویر PNG فشرده نشده است که به این معنی است که تصویر با کیفیت بالاتری است. نکته منفی این است که اندازه فایل بسیار بزرگتر است.

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

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

2. فشرده سازی تصاویر

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

اکثر ابزارهای ویرایش تصویر مانند Adobe Photoshop ، On1 Photo ، GIMP، Affinity Photo و سایر ابزارها دارای ویژگی فشرده سازی درون برنامه هستند. همچنین می توانید تصاویر را به طور معمولی ذخیره کنید و سپس از ابزارهای آنلاین و تحت وب مانند TinyPNG یا JPEG Mini برای فشرده سازی آسان تر تصویر استفاده کنید. اگرچه استفاده از آن ها کمی دستی است، اما این دو ابزار به شما اجازه می‌دهد تا تصاویر را قبل از آپلود در سایت وردپرسی خود فشرده کنید.

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

همچنین چندین پلاگین محبوب وردپرس مانند Optimole ،EWWW و Image Optimizer و سایر پلاگین‌ها وجود دارد که می‌توانند به‌ طور خودکار تصاویر را وقتی در وردپرس آپلود می کنید، فشرده کنند. بسیاری از مبتدیان و حتی شرکت های بزرگ ترجیح می دهند از این پلاگین های بهینه سازی تصویر استفاده کنند زیرا این کار آسان و راحت است.

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

3. ابعاد تصویر

معمولاً وقتی عکسی را از گوشی یا دوربین  خود در سایت می‌کنید، دارای وضوح بسیار بالا و ابعاد فایل بزرگ (ارتفاع و عرض) است. معمولا، این عکس ها دارای وضوح 300 DPI و ابعاد از 2000 پیکسل و بیشتر هستند. این عکس‌ های باکیفیت برای انتشار چاپی یا کارهای دیگر مناسب هستند. آنها برای وب سایت ها مناسب نیستند. چون در سایت و محیط کلی وب به تصاویری نیاز است که در عین وضوح و کیفیت، حجم کمی داشته باشند.

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

به عنوان مثال، ما یک عکس با اندازه فایل اصلی 1.8 مگابایت، وضوح 300 DPI و ابعاد تصویر 4900×3200 پیکسل را بهینه کردیم. ما فرمت jpeg را برای فشرده سازی بیشتر انتخاب کردیم و ابعاد را به 1200×795 پیکسل تغییر دادیم و حجم فایل تصویر را به 103 کیلوبایت کاهش دادیم. این 94 درصد کمتر از اندازه فایل اصلی است. همچنین می توان با استفاده از ابزارهای معرفی شده حجم آن را بیشتر نیز کاهش داشت. حجم مناسب برای استفاده در وب کمتر از 80 کیلوبایت و ایده آل آن کمتر از 40 کیلوبایت است.

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

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

فتوشاپ

Adobe Photoshop یکی از بهترین نرم افزارهای موجود در زمینه گرافیک است وا دارای ویژگی ذخیره تصاویر بهینه شده برای محیط وب است. کافی است به سادگی تصویر خود را در فتوشاپ وارد کرده و سپس از منوی فایل، روی گزینه Save for web یا ذخیره برای وب کلیک کنید.

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

GIMP

GIMP یک جایگزین رایگان و اپن سورس برای نرم افزار محبوب Adobe Photoshop است. می توان از آن برای بهینه سازی تصاویر خود برای وب استفاده کرد. نکته منفی این است که استفاده از آن به آسانی سایر راه حل های موجود در این لیست نیست.

ابتدا باید تصویر خود را در GIMP باز کنید و سپس گزینه File » Export As را انتخاب کنید. با این کار کادر ذخیره فایل ظاهر می شود. حالا باید به فایل خود یک نام جدید بدهید و سپس بر روی دکمه ذخیره کلیک کنید. با این کار گزینه های خروجی گرفتن از تصویر مشاهده می شود. برای فایل های jpeg، می توانید درجه فشرده سازی را برای کاهش حجم فایل انتخاب کنید. در نهایت بر روی دکمه ذخیره کلیک کنید تا فایل تصویری بهینه شده ذخیره شود.

TinyPNG

TinyPNG یک ابزار تحت وب رایگان است که از یک تکنیک فشرده سازی هوشمند برای کاهش حجم فایل های PNG شما استفاده می کند. تنها کاری که باید انجام دهید این است که به وب سایت آنها بروید و تصاویر خود را آپلود کنید (با استفاده از Drog and drop یا همان کشیدن و رها کردن ساده).

آنها تصویر را فشرده می کنند و لینک دانلود را به شما می دهند. می توانید از سایت خواهر آن، یعنی TinyJPG برای فشرده سازی تصاویر JPEG استفاده کنید. آنها همچنین یک بخش برای ویرایش پسوند Adobe Photoshop یا همان PSD دارند که کار شما را خیلی ساده می کند. چون سایت های TinyPNG و TinyJPG به شما اجازه می دهند که فایل های خروجی گرفته شده از فتوشاپ با فرمت PSD را با استفاد از این ابزارها بهینه کنید.

JPEG Mini

JPEGmini از فناوری فشرده سازی بدون کاهش کیفیت استفاده می کند که به میزان قابل توجهی اندازه تصاویر را بدون تأثیر بر کیفیت ملموس بر آنها کاهش می دهد. همچنین می توانید کیفیت تصویر اصلی خود را با تصویر فشرده مقایسه کنید. می توانید از نسخه تحت وب آنها به صورت رایگان استفاده کنید. نسخه ویندوزی آن نیز موجود است و همچنین یک API پریمیوم برای خودکار کردن فرآیند بهینه سازی تصاویر روی سرور شما دارند.

ImageOptim

ImageOptim یک ابزار برای سیستم عامل مک است که به شما امکان می دهد با یافتن بهترین پارامترهای فشرده سازی و حذف پروفایل های رنگی غیر ضروری، تصاویر را بدون از دست دادن کیفیت فشرده کنید. جایگزین این ابزار در ویندوز ابزار “Tr image” است.

بهترین پلاگین های بهینه سازی تصاویر برای وردپرس

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

در زیر لیست زیر 7 مورد از بهترین پلاگین های فشرده سازی تصاویر وردپرس آمده است:

  1. Optimole – پلاگین خوبی است که توسط تیم ThemeIsle ارائه داده شده است.
  2. EWWW Image Optimizer
  3. Tiny compress images – پلاگین توسط تیم TinyPNG که در مقاله به آن اشاره داشتیم ساخته شده است.
  4. Imagify – پلاگینی ساخته شده توسط تیم متخصص سازنده پلاگین WP Rocket
  5. ShortPixel Image Optimizer
  6. WP Smush
  7. reSmush.it

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

نتیجه گیری پایانی

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

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