۴ ابزار رایگان برای بهینه‌سازی تصاویر سایت + |ویدیو|

⏳ سلامی به فشرده‌گی عکس‌ها و درودی با ۴ ابزار رایگان برای بهینه‌سازی تصاویر سایت ⏳

❔ آیا به دنبال راه‌کاری دقیق و گام‌به‌گام برای بهینه‌سازی تصاویر سایت هستید؟

❔ آیا از مباحث تئوری بهینه‌سازی عکس‌های سایت خسته شده‌اید؟

❔ آیا می‌دانید ابزار GTMetrix به‌طور خودکار تصاویر سایت ما را بهینه می‌کند؟

❔ آیا آماده‌اید با ۴ ابزار رایگان بهینه‌سازی تصاویر آشنا شوید؟

در مطلب ۴ ابزار رایگان برای بهینه‌سازی تصاویر سایت با شما هستیم تا به‌طور جامع، پرسش‌های بالا را مورد بحث و بررسی قرار دهیم. این شما و این هم:

 

آموزش گام‌به‌گام بهینه‌سازی عکس برای وب‌سایت

در مقاله قبل عوامل موثر در سرعت سایت را مورد بحث و بررسی قرار دادیم. در این مطلب قصد داریم به‌صورت کاملاً عملی تصاویر خود را برای وب، استاندارد نماییم.

در ادامه با ۴ مورد از بهترین ابزارهای بهینه‌سازی عکس آشنا خواهیم شد.

۱. آموزش فشرده‌سازی عکس با فوتوشاپ

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

کم‌کردن حجم عکس بدون افت کیفیت در کامپیوتر

خب بدون فوت وقت کار با فتوشاپ را آغاز می‌کنیم؛

ابتدا تصویر مورد نظر خود را در برنامه Adobe Photoshop باز کرده و سپس مطابق با عکس زیر، از قسمت منو، به‌ترتیب گزینه‌های Export، File و Save for Web را انتخاب می‌کنیم.

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

بهترین‌ فرمت عکس برای قرار دادن در سایت کدام‌اند؟

مبحث انتخاب فرمت تصاویر بسیار مفصل است و در این مطلب، محلِ بحث ما نیست. اما اگر بخواهیم اشاره‌ای داشته باشیم، به‌طور کلی دو فرمت JPEG و PNG برای قرار دادن در وب‌سایت توصیه می‌شود.

⚪ پیشنهاد بنده: برای تصاویری که از دنیای واقعی  (مانند: طبیعت، انسان‌ها، حیوانات و غیره) گرفته‌ شده‌اند از فرمت JPEG استفاده کنید و برای تصاویری با تعداد رنگ پایین (مثل اسکرین‌شات از صفحه Word و Excel) از PNG استفاده شود.

❔ یک سوال مهم: آیا راه‌کار مشخصی برای انتخاب PNG و JPEG وجود دارد؟

برای این‌که بفهمیم کدام‌یک از این دو فرمت برای تصویر ما مناسب‌تر است، فقط کافیست در برنامه فوتوشاپ، یک‌بار با فرمت PNG و یک‌مرتبه نیز با فرمت JPEG عملیات Save for Web را انجام دهیم. در نهایت هر کدام از عکس‌ها کم‌حجم‌تر بود، آن تصویر برنده‌ی این مسابقه خواهد بود?

فشرده‌سازی تصاویر PNG در فتوشاپ

اگر قصد خروجی PNG را داشته باشیم، مانند تصویر زیر فقط کافیست روی گزینه PNG-8 کلیک نماییم. در قسمت شماره ۲ در تصویر زیر، حداکثر تعداد رنگ‌هایی که فرمت PNG-8 می‌تواند پشتیبانی کند، برابر با ۲۵۶ قرار داده شده است.

درصورتی‌که عکس شما از تعداد رنگ‌های کمتری تشکیل شده است می‌توانید به عنوان مثال عدد ۶۴ یا ۱۲۸ را انتخاب نمایید. هرچقدر این اعداد کمتر شوند، حجم تصویرِ خروجی نیز کم‌تر خواهد شد. بدیهی است که تعداد رنگ را تاحدی کاهش می‌دهیم که لطمه‌ای به کیفیت عکس وارد نشود.

? نکته کنکوری: فرمت PNG از حدود ۱۶ میلیون رنگ پشتیبانی می‌کند و اگر تصویر شما بیش‌از ۲۵۶ رنگ داشت، می‌توانید به‌جای PNG-8، گزینه‌ی PNG-24 را انتخاب نمایید.

همچنین در قسمت شماره ۳ می‌توانید حجمِ عکس فشرده را مشاهده کنید. در آخر نیز دکمه‌ی Save را می‌فشاریم. به همین راحتی تصویر ما با فرمت PNG برای وب بهینه‌ شد. البته ناگفته نماند که در بخش Image Size نیز قادر هستیم اندازه‌ی تصاویر خود را کاهش دهیم. طبیعتاً با این کار، حجم تصویر زیر کاهش پیدا خواهد کرد و حدالامکان توصیه می‌شود این اقدام را انجام دهید.

برای تصاویری که داخل محتوا قرار می‌گیرند، عرض ۷۰۰px تا ۹۰۰px پیشنهاد می‌شود (البته هیچ قانونی برای این ماجرا وجود ندارد و مطابق با نیاز خود می‌تواند دست‌خوش تغییراتی شود، ضمناً حجم تصاویر داخل مقالات هم بهتر است از ۱۰۰Kb بیش‌تر نشود).

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

اکنون قصد داریم همان تصویر قبل را که با فرمت PNG خروجی گرفتیم را به صورت JPEG ذخیره نماییم.

حال مطابق با تصویر زیر، صرفاً کافیست گزینه JPEG را انتخاب نماییم. در مرحله بعد باید تعیین کنیم، بهینه‌سازی با چه کیفیتی انجام شود. اگر عدد روی ۱۰۰ یا Very High باشد، مسلماً خروجیِ ما بسیار پرحجم خواهد بود و در اغلب موارد، اعداد ۵۵ تا ۶۰ مناسب‌ترین انتخاب هستند. البته این به کیفیت تصویر شما بستگی دارد و باید تست شود.

⚪ قانون کلی: اُفت کیفیت تاحدی مجاز است که با چشم قابل تشخیص نباشد.

? نکته جالبِ توجه: این عکس در مرحله قبل با فرمت PNG-8 ذخیره شد و حجم خروجی آن بیش‌از ۳۳۶Kb بود اما زمانی‌که با فرمت JPEG عملیات Save for Web را انجام دادیم، حجم عکس به ۱۱۵Kb کاهش پیدا کرد. در نهایت هم شاید باورتان نشود اما فقط کافیست دکمه‌ی Save را بفشاریم تا به همین سادگی عکس ما برای انتشار در وب‌سایت، آماده شود.

? نکته کنکوری: برای بازکردن پنجره‌ی Save for Web همیشه لازم نیست به روش معمولی‌ها عمل کنید. بلکه شما حرفه‌ای‌ها فقط کافیست کلیدهای ترکیبی Alt+Shift و Ctrl+S را هم‌زمان روی کیبورد بفشارید و در کسری از ثانیه این پنجره برای شما نمایان خواهد شد?.

بهینه‌سازی گروهی تصاویر در فتوشاپ

یکی از امکانات جالبی که ابزار هیجان‌انگیز Photoshop در اختیار ما قرار می‌دهد، فشرده‌سازی گروهی تصاویر است.

تصور کنید ۲۰ عکس دارید و باید همه‌ی آن‌ها در سایت شما منتشر شوند. یک راه کُمِدی این است که هرکدام از ۲۰ تصویر را تک‌تک Save for Web کنیم. اما راهِ مفید استفاده از امکان Image Processor فتوشاپ است.

برای این کار، ابتدا لازم است تمامی تصاویر خود را در یک فولدر قرار دهیم. سپس مطابق با عکس زیر، در برنامه فتوشاپ به‌ترتیب گزینه‌های Script، File و Image Processor را انتخاب نماییم.

سپس در پنجره‌ی بازشده ابتدا روی دکمه‌ی Select Folder کلیک می‌کنیم و پوشه‌ای که ازقبل تمامی عکس‌ها در آن قرار گرفته‌اند را انتخاب می‌نماییم (باتوجه تصویر زیر):

در گام بعد، باتوجه به قسمت شماره ۲ از عکس فوق، کیفیت و اندازه تصاویر را مشخص نماییم. گزینه‌ی Qualityبهتر است بین ۶ تا ۸ باشد و اگر می‌خواهیم طول عرض تمامی عکس‌ها یکسان شوند، فقط کافیست تیک مربوط به گزینه‌ی Resize to Fit را بزنید تا به‌صورت دستی Image Size را تغییر دهید. اگر می‌خواهید اندازه‌ی تصاویر تغییری نکند و صرفاً عملیات بهینه‌سازی انجام شود، تیک گزینه‌ی Resize to Fit را بردارید.

۲. آموزش بهینه‌سازی تصاویر با GTMetrix

یکی‌دیگر از ابزارهای بهینه‌سازی تصاویر، GTMetrix است که متأسفانه در آموزش‌ها کم‌تر از آن یاد می‌شود.

شاید با خود بگویید که آقای یعقوبی، GTMetrix یک ابزار برای بررسی خطاهای موثر در سرعت لود سایت است و نه ابزاری برای فشرده‌سازی تصاویر❗

کاملاً حق با شماست (البته نه کاملاً). اما جالب است بدانید که همین سایت در قسمتی که خطاهای مربوط به بهینه‌سازی تصاویر را به شما نشان می‌دهد، نسخه‌ی بهینه‌شده‌ی عکس شما را نیز در اختیارتان می‌گذارد.

برای شروع، ابتدا به آدرس GTMetrix.Com مراجعه کرده و آدرس یکی از صفحات سایت خود را در آن وارد می‌کنیم. پس از آن، اگر خطای Optimize Images را بررسی کنیم (مطابق با تصویر زیر) متوجه می‌شویم که از قسمت Optimize Version می‌توانیم نسخه‌ی فشرده‌شده‌ی تصاویر سایت خود را دانلود کرده و با تصویر غیربهینه قبلی، جایگزین نماییم.

⚪ نکته: این ابزار اغلب برای زمانی مورد استفاده قرار می‌گیرد که قصد بهبود تصاویر قدیمی سایت را داشته باشیم.

فشرده‌سازی آنلاین فایل (عکس)

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

۳. آموزش فشرده‌سازی عکس‌ها با Tinypng و Tinyjpg

ابزار خارق‌العاده اول، Tinypng می‌باشد که احتمالاً با آن آشنا هستید. برای بهره‌گیری از این ابزار آنلاین، فقط کافیست به آدرس Tinypng.Com یا Tinyjpg.Com (هیچ فرقی با یک‌دیگر ندارند) مراجعه نمایید و مطابق با تصویر زیر، تصاویر خود را بِکشید و در قلب Tinypng رها کنید و در نهایت نسخه بهینه‌شده‌ی آن را دانلود کنید.

ضمناً شما می‌توانید حداکثر تا ۲۰ تصویر را به‌صورت یک‌جا در این ابزار آپلود کنید و به‌صورت یک‌جا نیز نسخه‌ی بهینه‌شده‌ی آن‌ها را نیز دریافت نمایید.

۴. آموزش کار با ابزار قدرتمند Compressor.io

ابزار اعجاب‌آور دوم، Compressor می‌باشد. این ابزار آنلاین هم مشابه Tinypng عمل می‌کند. اما باتوجه تست‌هایی که انجام شد، متوجه شدیم گویا در برخی موارد الگوریتم فشرده‌سازی این ابزار، کمی قوی‌تر از Tinypng عمل می‌کند. به همین خاطر نمی‌توان به‌سادگی از کنار آن عبور کرد.

برای استفاده از آن نیز ابتدا به آدرس Compressor.io مراجعه نمایید و سپس باتوجه به تصویر بالا روی گزینه Select File کلیک کرده و توسط این ابزار عکس‌اَفکَن، تصاویر خود را بهینه‌ نمایید.

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

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

برای بهینه‌سازی تصاویر سایت و حل این مشکل یک پلاگین عکس‌اَفکَن تحت عنوان WP-Smush وجود دارد که به‌صورت خودکار تمامی تصاویر شما را بهینه می‌کند.

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

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

استفاده از آیکون‌های بدون حجم❕

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

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

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

برای یافتن و استفاده نمودن از Emojiها فقط کافیست مانند تصویر زیر، عبارات Emoji in html را در گوگل جستجو نمایید و سپس لینک مربوط به سایت W3Schools را باز نمایید.

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

? امیدوارم از آموزش بهینه‌سازی تصاویر سایت، حسابی کیف کرده باشید و منتظر کامنت‌های انرژی‌بخش شما خوبان هستم. شاداب و پرنشاط باشید. ارادتمند شما، محمدرضا یعقوبی. ?