تصاویر بزرگ باعث کاهش سرعت صفحات وب شما می شود که تجربه کاربری کمتر از حد مطلوبی ایجاد می کند. بهینه سازی تصاویر فرآیند کاهش اندازه فایل آنها با استفاده از یک پلاگین یا اسکریپت است که به نوبه خود باعث افزایش سرعت بارگذاری صفحه می شود. فشرده سازی بدون تلفات و اتلاف دو روشی هستند که معمولاً مورد استفاده قرار می گیرند.
فهرست مطالب
مزایای قالب بندی تصاویر چگونه تصاویر را برای وب و عملکرد بهینه کنیم؟ پلاگین های بهینه سازی تصویر که می توانید استفاده کنید بهینه سازی تصاویر برای مطالعه موردی وب استفاده از SVG: مزایایی که باید بدانید بهترین روش ها برای بهینه سازی تصاویر برای وب
اول، چرا باید تصاویر خود را قالب بندی کنید؟ مزایای آن چیست؟ بهینه سازی تصاویر شما برای عملکرد فواید زیادی دارد. طبق بایگانی HTTP ، از نوامبر ۲۰۱۸، تصاویر به طور متوسط ۲۱٪ از وزن کل صفحه وب را تشکیل می دهند . بنابراین وقتی صحبت از بهینه سازی سایت شما می شود ، پس از محتوای ویدیویی، تصاویر تا حد زیادی اولین جایی هستند که باید شروع کنید!
مهمتر از اسکریپت و فونت است. و از قضا، یک گردش کار خوب بهینه سازی تصویر یکی از ساده ترین چیزها برای پیاده سازی است، با این حال بسیاری از صاحبان وب سایت این موضوع را نادیده می گیرند.
در اینجا به مزایای اصلی نگاهی می اندازیم:
سرعت بارگذاری صفحه شما را بهبود می بخشد (مطالعه موردی ما را در زیر ببینید تا چه اندازه بر سرعت شما تأثیر می گذارد). اگر بارگذاری صفحه شما بیش از حد طول بکشد، بازدیدکنندگان شما ممکن است از انتظار خسته شوند و به سراغ چیز دیگری بروند. برای اطلاعات بیشتر در مورد بهینه سازی زمان بارگذاری صفحه، راهنمای بهینه سازی سرعت صفحه عمیق ما را ببینید .
همراه با یک افزونه عالی SEO وردپرس ، سئوی شما را بهبود می بخشد . سایت شما در نتایج موتورهای جستجو رتبه بالاتری خواهد داشت. فایل های بزرگ سرعت سایت شما را کاهش می دهند و موتورهای جستجو از سایت های کند متنفرند. همچنین احتمالاً گوگل تصاویر شما را سریعتر برای جستجوی تصویر گوگل می‌خزد و فهرست می‌کند. کنجکاو هستید که چند درصد از ترافیک شما از جستجوی تصویر گوگل می آید؟ می‌توانید از افزونه یا بخش Google Analytics WordPress برای بررسی ترافیک جستجوی تصاویر Google استفاده کنید .
ایجاد پشتیبان سریعتر خواهد بود.
اندازه فایل های تصویری کوچکتر از پهنای باند کمتری استفاده می کنند. شبکه ها و مرورگرها از این موضوع قدردانی خواهند کرد.
به فضای ذخیره سازی کمتری در سرور شما نیاز دارد (این بستگی به تعداد تصویر بند انگشتی شما دارد)
هدف اصلی از قالب‌بندی تصاویر، یافتن تعادل بین کمترین اندازه فایل و کیفیت قابل قبول است .
بیش از یک راه برای انجام تقریباً همه این بهینه سازی ها وجود دارد. یکی از محبوب ترین راه ها فشرده سازی آنها قبل از آپلود در وردپرس است . معمولاً این کار را می توان در ابزاری مانند Adobe Photoshop یا Affinity Photo انجام داد. برخی از این کارها را می توان با استفاده از افزونه ها نیز انجام داد که در ادامه به آن ها خواهیم پرداخت.
دو مورد اصلی که باید در نظر بگیرید فرمت فایل و نوع فشرده سازی است که استفاده می کنید. با انتخاب ترکیب مناسب فرمت فایل و نوع فشرده سازی می توانید اندازه تصویر خود را تا ۵ برابر کاهش دهید. شما باید با هر تصویر یا فرمت فایل آزمایش کنید تا ببینید چه چیزی بهترین کار را دارد.
فرمت فایل مناسب را انتخاب کنید مراقب کیفیت فشرده سازی در مقابل اندازه باشید بهینه سازی Lossy vs Lossless را درک کنید از ابزارها و برنامه های بهینه سازی تصویر استفاده کنید تغییر اندازه تصاویر به مقیاس
قبل از شروع به اصلاح تصاویر خود، مطمئن شوید که بهترین نوع فایل را انتخاب کرده اید . چندین نوع فایل وجود دارد که می توانید استفاده کنید:
PNG JPEG – از بهینه‌سازی با اتلاف و بدون ضرر استفاده می‌کند . می توانید سطح کیفیت را برای تعادل خوبی بین کیفیت و اندازه فایل تنظیم کنید.GIF
چندین مورد دیگر مانند JPEG XR و WebP وجود دارد، اما همه مرورگرها از آنها پشتیبانی نمی کنند . در حالت ایده آل، باید از JPEG یا JPG برای تصاویر با رنگ زیاد و PNG برای تصاویر ساده استفاده کنید.JPG در مقابل JPEG : درک رایج ترین فرمت فایل تصویری )
۲. مراقب کیفیت فشرده سازی در مقابل اندازه باشید
در اینجا نمونه ای از اتفاقاتی است که ممکن است رخ دهد که یک تصویر را بیش از حد فشرده می کنید. اولین مورد استفاده از نرخ فشرده سازی بسیار پایین است که منجر به بالاترین کیفیت (اما اندازه فایل بزرگتر) می شود. دوم استفاده از نرخ فشرده سازی بسیار بالا است که منجر به یک تصویر با کیفیت بسیار پایین (اما اندازه فایل کوچکتر) می شود. توجه: تصویر اصلی دست نخورده ۲.۰۶ مگابایت است.
فشرده سازی بالا (کیفیت پایین) JPG – ۶۸ کیلوبایت
همانطور که می بینید تصویر اول ۵۹۰ کیلوبایت است. برای یک عکس بسیار بزرگ است! به طور کلی بهترین کار این است که بتوانید وزن کل یک صفحه وب را زیر ۱ یا ۲ مگابایت نگه دارید. ۵۹۰ کیلوبایت یک چهارم آن در حال حاضر خواهد بود. تصویر دوم بدیهی است که وحشتناک به نظر می رسد، اما پس از آن تنها ۶۸ کیلوبایت است. کاری که می‌خواهید انجام دهید این است که یک رسانه شاد بین نرخ فشرده‌سازی (کیفیت) و اندازه فایل خود پیدا کنید.
بنابراین ما دوباره تصویر را با نرخ فشرده سازی متوسط گرفتیم و همانطور که در زیر می بینید، کیفیت در حال حاضر خوب به نظر می رسد و حجم فایل ۱۵۱ کیلوبایت است که برای یک عکس با وضوح بالا قابل قبول است. این تقریبا ۴ برابر کوچکتر از عکس اصلی با فشرده سازی کم است. معمولاً تصاویر ساده‌تر مانند PNG برای بهترین عملکرد باید کمتر از ۱۰۰ کیلوبایت یا کمتر باشد.
فشرده سازی متوسط (کیفیت عالی) JPG – ۱۵۱ کیلوبایت
۳. بهینه سازی Lossy vs Lossless را درک کنید
همچنین درک این نکته مهم است که دو نوع فشرده سازی وجود دارد که می توانید استفاده کنید: با اتلاف (Lossy) و بدون اتلاف (Lossless) .
Lossy: این فیلتری است که برخی از داده ها را حذف می کند. این کار تصویر را ضعیف می کند، بنابراین باید مراقب باشید که چقدر تصویر را کاهش دهید. اندازه فایل را می توان به مقدار زیادی کاهش داد. می توانید از ابزارهایی مانند Adobe Photoshop، Affinity Photo یا سایر ویرایشگرهای تصویر برای تنظیم تنظیمات کیفیت یک تصویر استفاده کنید. مثالی که در بالا استفاده کردیم استفاده از فشرده سازی با اتلاف است .
Lossless: این فیلتری است که داده ها را فشرده می کند. این کیفیت را کاهش نمی دهد، اما نیاز به فشرده سازی تصاویر قبل از رندر شدن دارد. می‌توانید با استفاده از ابزارهایی مانند Photoshop، FileOptimizer یا ImageOptim فشرده‌سازی بدون تلفات را روی دسکتاپ خود انجام دهید .
بهتر است تکنیک های فشرده سازی خود را آزمایش کنید تا ببینید چه چیزی برای هر تصویر یا فرمت بهتر عمل می کند. اگر ابزار شما این گزینه را دارد، مطمئن شوید که تصویر را برای وب ذخیره کرده اید. این گزینه در بسیاری از ویرایشگرهای تصویر است و تنظیمات کیفیت را در اختیار شما قرار می دهد تا بتوانید فشرده سازی بهینه را انجام دهید. مقداری از کیفیت را از دست خواهید داد، بنابراین برای یافتن بهترین تعادلی که می توانید بدون زشت کردن تصاویر، آزمایش کنید.
ابزارها و برنامه های زیادی وجود دارد، هم ممتاز و هم رایگان، که می توانید برای بهینه سازی تصاویر خود از آنها استفاده کنید.
برخی ابزارهایی را در اختیار شما قرار می دهند تا بهینه سازی های خود را انجام دهید و برخی دیگر کار را برای شما انجام می دهند. ما شخصاً از طرفداران پر و پا قرص Affinity Photo هستیم ، زیرا ارزان است و ویژگی‌های تقریباً یکسانی با Adobe Photoshop به شما می‌دهد.
فشرده سازی عکس در Affinity Photo
در اینجا چند ابزار و برنامه اضافی برای بررسی وجود دارد:
فراموش نکنید که روش های شما برای ارائه تصاویر به اندازه اندازه فایل مهم هستند. بسیاری از هاست های پریمیوم یک CDN را برای تحویل سریع تصاویر و سایر فایل ها به کاربران پیاده سازی می کنند.
۵. اندازه تصاویر را به مقیاس تغییر دهید
در گذشته بسیار مهم بود که تصاویر را در مقیاس آپلود کنید و اجازه ندهید CSS اندازه آنها را تغییر دهد. با این حال، از آنجایی که وردپرس ۴.۴ اکنون از تصاویر پاسخگو (که توسط CSS کوچک نشده است) پشتیبانی می کند، این دیگر آنقدر مهم نیست .
اساسا، وردپرس به طور خودکار چندین اندازه از هر تصویر آپلود شده در کتابخانه رسانه را ایجاد می کند. با گنجاندن اندازه های موجود یک تصویر در یک srcset ویژگی، مرورگرها اکنون می توانند مناسب ترین اندازه را دانلود کنند و بقیه را نادیده بگیرند. نمونه ای از شکل واقعی کد شما را در زیر ببینید.
نمونه تصاویر پاسخگو srcset در کد
بنابراین امروزه با وجود نمایشگرهای HiDPI بیشتر و بیشتر، پیدا کردن یک رسانه شاد می تواند خوب باشد. اندازه ستون یا div وب سایت خود را ۲x یا ۳x کنید، اما باز هم کمتر از اندازه اصلی. مرورگر بر اساس وضوح دستگاه، مورد صحیح را نشان می دهد.
کتابخانه رسانه وردپرس تصاویر کوچک را بر اساس تنظیمات شما ایجاد می کند . با این حال، نسخه اصلی هنوز حفظ شده و دست نخورده است. اگر می خواهید اندازه تصاویر خود را تغییر دهید و فضای دیسک را با ذخیره نکردن نسخه اصلی ذخیره کنید، می توانید از یک افزونه رایگان مانند Imsanity استفاده کنید .
Imsanity به شما اجازه می دهد تا حد عقلانی تنظیم کنید تا همه تصاویر آپلود شده به اندازه معقولی محدود شوند که هنوز برای نیازهای یک وب سایت معمولی به اندازه کافی بزرگ است.
Imsanity بلافاصله پس از آپلود تصویر، اما قبل از پردازش وردپرس، به وردپرس متصل می شود. بنابراین وردپرس از همه جهات دقیقاً یکسان رفتار می‌کند، با این تفاوت که انگار مشارکت‌کننده تصویر خود را قبل از آپلود به اندازه معقولی تغییر داده است.
اگر به دنبال ابزاری برای صرفه جویی در فضا و همچنین پاکسازی کتابخانه رسانه خود هستید، می توانید از Media Cleaner برای یافتن فایل های رسانه ای استفاده نشده استفاده کنید. این افزونه تمام فایل های رسانه ای شما را اسکن می کند و موارد استفاده نشده را در داشبورد Media Cleaner فهرست می کند تا بتوانید آنها را مرور و حذف کنید.
Media Cleaner یک سیستم سطل زباله هوشمند را پیاده سازی می کند: وقتی فایل ها حذف می شوند، به فهرست زباله منتقل می شوند. به این ترتیب، می توانید وب سایت خود را برای مدتی تست کنید و مطمئن شوید که همه چیز خوب است. اگر یک فایل یا مدخل رسانه وجود ندارد، می‌توانید به راحتی آن را با یک کلیک بازیابی کنید یا اگر همه چیز به نظرتان خوب است، سطل زباله را خالی کنید.
پلاگین های بهینه سازی تصویر که می توانید استفاده کنید
خوشبختانه، با وردپرس، لازم نیست تمام قالب بندی یا فشرده سازی را با دست انجام دهید. می توانید از افزونه ها استفاده کنید تا حداقل برخی از کارها را به صورت خودکار برای شما انجام دهند.
چندین پلاگین وجود دارد که به صورت خودکار فایل های تصویری شما را هنگام آپلود آنها بهینه می کنند. آنها حتی تصاویری را که قبلا آپلود کرده اید بهینه می کنند. این یک ویژگی مفید است – به خصوص اگر قبلاً یک وب سایت پر از تصاویر دارید. در اینجا نگاهی به برخی از بهترین پلاگین ها برای قالب بندی تصاویر شما برای عملکرد بهتر است.
اگرچه مهم است که شما فقط به خود افزونه ها اعتماد نکنید. به عنوان مثال، شما نباید تصاویر ۲ مگابایتی را در کتابخانه رسانه وردپرس خود آپلود کنید. این می تواند باعث شود فضای دیسک میزبان وب شما بسیار سریع مصرف شود.
بهترین روش این است که اندازه تصویر را از قبل در ابزار ویرایش عکس به سرعت تغییر دهید و سپس آن را آپلود کنید و از یکی از پلاگین های زیر برای کاهش بیشتر آن استفاده کنید.
با این حال، قبل از متعهد شدن به یکی از این ابزارها یا افزونه ها، باید مطمئن شوید که ارائه دهنده میزبان وب شما ابزارهای داخلی را برای انجام کار برای شما ارائه نمی دهد.
Imagify Image Optimizer Optimole Optimus Image Optimizer WP Smush TinyPNG (همچنین JPG های فشرده) ImageRecycle EWWW Image Optimizer
۱. Imagify Image Optimizer
افزونه Imagify Image Optimizer
Imagify توسط همان تیمی ساخته شده است که افزونه قدرتمند کس وردپرس یعنی WP Rocket را توسعه داده است، که احتمالاً اکثر شما با آن آشنا هستید. این افزونه با WooCommerce ، NextGen Gallery و WP Retina سازگار است. همچنین دارای ویژگی بهینه سازی انبوه است و می توانید بین سه سطح مختلف فشرده سازی معمولی، تهاجمی و فوق العاده یکی را انتخاب کنید. همچنین دارای ویژگی بازیابی است، بنابراین اگر از کیفیت ناراضی هستید، می توانید با یک کلیک بازیابی و فشرده سازی مجدد را در سطحی که بیشتر با نیازهای شما مطابقت دارد، انجام دهید. یک نسخه رایگان و یک نسخه پریمیوم وجود دارد. شما محدود به سهمیه ۲۵ مگابایت تصویر در ماه با یک حساب کاربری رایگان هستید.
خلاص شدن از شر تصویر اصلی و تغییر اندازه تصاویر بزرگتر نیز با این افزونه قابل انجام است.
تغییر اندازه تصاویر در Imagify
Imagify همچنین تصاویر را روی سرورهای شخص ثالث خود فشرده می کند ، نه سرورهای شما، که در مورد عملکرد بسیار مهم است. Imagify نباید سرعت سایت وردپرس شما را کاهش دهد.
۲. Optimole
پلاگین Optimole
Optimole یک افزونه وردپرس بهینه سازی تصویر است که به طور خودکار اندازه تصاویر شما را بدون نیاز به هیچ کاری کاهش می دهد. وقتی نوبت به سرعت بارگذاری سایت شما می‌رسد، مزیت بزرگی دارد، زیرا کاملاً مبتنی بر ابر است و هرگز تصاویری بزرگتر از آنچه که باید ارائه نمی‌دهد، همچنین اندازه تصویر عالی را برای نمای و مرورگر بازدیدکننده نمایش می‌دهد.
علاوه بر این، این افزونه بارگذاری تنبل و جایگزینی کارآمد تصویر را فراهم می کند – در صورتی که بازدیدکننده اتصال اینترنتی کندتری داشته باشد کیفیت تصویر را کاهش می دهد – که باعث می شود آن را از بقیه متمایز کند. همچنین به طور خودکار مرورگر کاربر را شناسایی می کند و در صورت پشتیبانی به WebP سرویس می دهد.
تمام تصاویری که Optimole فشرده می‌کند از طریق یک CDN سریع ارائه می‌شوند. در صورت نیاز به پهنای باند و فضای پردازش اضافی، می توانید Optimole را به صورت رایگان امتحان کنید یا به طرح برتر ارتقا دهید.
۳. Optimus Image Optimizer
افزونه Optimus Image Optimizer
Optimus WordPress Image Optimizer از فشرده سازی بدون تلفات برای بهینه سازی تصاویر شما استفاده می کند. Lossless به این معنی است که هیچ افت کیفیتی نخواهید دید. از WooCoomerce و چند سایت پشتیبانی می کند و دارای یک ویژگی بهینه سازی انبوه خوب برای کسانی است که از قبل کتابخانه های رسانه ای بزرگی دارند. همچنین با افزونه WP Retina WordPress سازگار است. یک نسخه رایگان و پریمیوم وجود دارد. در نسخه پریمیوم شما سالی یک بار پرداخت می کنید و می توانید تعداد نامحدودی از تصاویر را فشرده کنید. اگر آن را با افزونه Cache Enabler خود ترکیب کنید، می‌توانید به تصاویر WebP نیز شیرجه بزنید ، که یک فرمت تصویر سبک وزن جدید از Google است.
۴. WP Smush
افزونه WP Smush
WP Smush هر دو نسخه رایگان و پریمیوم دارد. این اطلاعات پنهان از تصاویر را کاهش می دهد تا اندازه را بدون کاهش کیفیت کاهش دهد. این تصاویر را اسکن می کند و با آپلود آنها در سایت خود آنها را کاهش می دهد. همچنین تصاویری را که قبلا آپلود کرده‌اید اسکن می‌کند و آنها را نیز کاهش می‌دهد. تا ۵۰ فایل را به صورت انبوه در یک زمان پخش می کند. همچنین در صورت تمایل می توانید به صورت دستی smush کنید. این نوع تصاویر JPEG، GIF، و PNG را به هم می زند. اندازه فایل محدود به ۱ مگابایت است.
این افزونه با برخی از محبوب ترین پلاگین های کتابخانه رسانه مانند WP All Import و WPML سازگار است.
تمام بهینه سازی تصویر با تکنیک های فشرده سازی بدون تلفات انجام می شود و کیفیت تصویر شما را بالا نگه می دارد.
مهم نیست که تصاویر خود را در کدام دایرکتوری ذخیره می کنید. Smush آنها را پیدا کرده و فشرده می کند.
Smush گزینه ای برای تنظیم خودکار عرض و ارتفاع برای همه تصاویر دارد، بنابراین اندازه همه تصاویر شما به نسبت های یکسان تغییر می کند.
۵. TinyPNG (همچنین JPG فشرده)
پلاگین TinyPNG
TinyPNG از خدمات TinyJPG و TinyPNG (حساب رایگان به شما امکان می دهد حدود ۱۰۰ تصویر در ماه فشرده کنید) برای بهینه سازی تصاویر JPG و PNG خود استفاده می کند. به طور خودکار تصاویر جدید را فشرده می کند و تصاویر موجود شما را به صورت انبوه فشرده می کند. برای صرفه جویی در فضا، CMYK را به RGB تبدیل می کند. تصاویر JPEG را تا ۶۰٪ و تصاویر PNG را تا ۸۰٪ بدون کاهش قابل مشاهده در کیفیت تصویر فشرده می کند. محدودیت حجم فایل ندارد.
۶. ImageRecycle
ImageRecycle – افزونه بهینه ساز تصویر و پی دی اف
افزونه ImageRecyle یک بهینه ساز خودکار تصاویر و PDF است. این افزونه نه تنها بر فشرده سازی تصاویر بلکه بر روی فایل های PDF نیز تمرکز دارد. یکی از ویژگی های بسیار مفید، امکان تنظیم حداقل اندازه فایل برای فشرده سازی است. به عنوان مثال، اگر تصاویری با حجم ۸۰ کیلوبایت دارید، می توانید به طور خودکار آنها را از فشرده سازی حذف کنید. این تضمین می کند که تصاویر و فایل ها هرگز بیش از حد فشرده نمی شوند. همچنین شامل بهینه سازی انبوه و تغییر اندازه خودکار تصویر است. توجه: آنها یک آزمایش ۱۵ روزه رایگان دارند، اما این یک سرویس برتر است و تصاویر با استفاده از سرورهای آنها آپلود و فشرده می شوند. آنها در ماه شارژ نمی شوند، بلکه بر اساس تعداد کل تصاویر فشرده شده، از ۱۰ دلار برای ۱۰۰۰۰ مورد شروع می شود.
۷. EWWW Image Optimizer
EWWW Image Optimizer به شما کمک می کند تا تصاویر خود را کوچکتر و سایت خود را سریعتر با دردسر کمتر کنید. بدون محدودیت اندازه و انعطاف‌پذیری زیاد برای کاربران پیشرفته، می‌توانید از پیش‌فرض‌ها استفاده کنید یا افزونه را کاملاً مطابق میل خود سفارشی کنید.
حالت رایگان امکان فشرده سازی نامحدود JPG و تبدیل WebP را فراهم می کند و برای سایت های سرگرمی یا وبلاگ هایی که تازه شروع به کار کرده اند عالی است. همه کاربران EWWW IO می‌توانند از Bulk Optimizer برای فشرده‌سازی تصاویر موجود خود استفاده کنند یا از حالت فهرست Media Library برای انتخاب و انتخاب تصاویر خاص برای فشرده‌سازی استفاده کنند. پوشه های اضافی را می توان اسکن کرد تا مطمئن شوید که تک تک تصاویر سایت شما به درستی بهینه شده اند.
EWWW IO حتی به شما امکان می دهد تصاویر خود را به فرمت های نسل بعدی مانند WebP تبدیل کنید یا بهترین فرمت تصویر را برای یک تصویر با گزینه های تبدیل چند فرمتی پیدا کنید.
Compres API ممتاز به شما امکان می دهد فشرده سازی را به سطح کاملاً جدیدی برسانید بدون اینکه کیفیت و میانگین صرفه جویی ۵۰ درصدی را به خطر بیندازید. همچنین فشرده سازی PDF را باز می کند و شامل پشتیبان گیری راحت ۳۰ روزه از تصویر است. با Easy IO CDN اختیاری، تصاویر به‌طور خودکار فشرده می‌شوند، برای تناسب با اندازه صفحه و دستگاه، مقیاس‌بندی می‌شوند، تنبل بارگذاری می‌شوند و به فرمت WebP نسل بعدی تبدیل می‌شوند.
بهینه سازی تصاویر برای مطالعه موردی وب
ما تصمیم گرفتیم که مطالعه موردی و آزمایش های کوچک خود را انجام دهیم تا به شما نشان دهیم که بهینه سازی تصاویر شما برای وب چقدر می تواند بر سرعت کلی سایت وردپرس شما تأثیر بگذارد.
JPG های فشرده نشده
ما ابتدا ۶ JPG غیرفشرده، که همه آنها بیش از ۱ مگابایت حجم داشتند، در سایت آزمایشی خود آپلود کردیم. سپس ۵ تست را از طریق Pingdom انجام دادیم و میانگین را گرفتیم. همانطور که از تست سرعت زیر می بینید ، کل زمان بارگذاری ما ۱.۵۵ ثانیه و حجم کل صفحه ۱۴.۷ مگابایت بود.
تست سرعت با JPG های فشرده نشده
JPG های فشرده
سپس JPG ها را با استفاده از افزونه Imagify WordPress، با استفاده از “تنظیمات تهاجمی” فشرده کردیم. سپس ۵ تست را از طریق Pingdom انجام دادیم و میانگین را گرفتیم. همانطور که از تست سرعت زیر می بینید ، کل زمان بارگذاری ما به ۴۷۶ میلی ثانیه کاهش یافت و حجم کل صفحه به ۲.۹ مگابایت کاهش یافت. مجموع زمان بارگذاری ما ۵۴.۸۸٪ کاهش یافت و اندازه صفحه ۸۰.۲۷٪ کاهش یافت .
تست سرعت با JPG های فشرده
تقریباً هیچ بهینه سازی دیگری وجود ندارد که بتوانید در سایت خود انجام دهید که باعث کاهش بیش از ۵۰ درصدی زمان بارگذاری شود. به همین دلیل است که بهینه سازی تصویر بسیار مهم است، فرآیند بالا همه توسط افزونه خودکار شد. این یک رویکرد دستی برای یک سایت وردپرس سریعتر است.
تنها بهینه سازی چشمگیر دیگری که می توانید انجام دهید این است که هاست خود را تغییر دهید.
با بهینه‌سازی تصاویر خود، چه با استفاده از ابزار ویرایش عکس یا افزونه وردپرس، می‌توانید اخطار «بهینه‌سازی تصاویر» را که در Google PageSpeed Insights دریافت می‌کنید (مانند شکل زیر) برطرف کنید.
PageSpeed Insights هشدار تصاویر را بهینه می کند
اگر هشدارهای بهینه‌سازی دیگری از ابزارهای تست سرعت دارید، حتماً پست ما را در Google PageSpeed Insights و بررسی عمیق Pingdom ما بررسی کنید .
استفاده از SVG: مزایایی که باید بدانید
توصیه دیگر این است که از فایل های SVG در کنار سایر تصاویر خود استفاده کنید. SVG یک فرمت برداری مقیاس پذیر است که برای لوگوها، نمادها، متن و تصاویر ساده عالی عمل می کند. در اینجا چند دلیل وجود دارد:
SVG ها به طور خودکار هم در مرورگرها و هم در ابزارهای ویرایش عکس مقیاس پذیر هستند. این باعث ایجاد رویای طراحان وب و گرافیک می شود!
گوگل SVG ها را ایندکس می کند، به همان روشی که PNG و JPG را انجام می دهد، بنابراین لازم نیست نگران سئو باشید.
SVG ها به طور سنتی (نه همیشه) در اندازه فایل کوچکتر از PNG یا JPG هستند. این می تواند منجر به زمان بارگذاری سریعتر شود.
Genki یک مقاله عالی نوشت که در آن اندازه SVG را در مقابل PNG در مقابل JPEG مقایسه کرد . در زیر چند نکته از آزمایش این مقاله وجود دارد که در آن او سه نوع مختلف تصویر را با هم مقایسه کرد.
JPG (اندازه بهینه: ۸۱.۴ کیلوبایت)
تصویر JPG
PNG (اندازه بهینه: ۸۵.۱ کیلوبایت)
تصویر PNG
SVG (اندازه بهینه: ۶.۱ کیلوبایت)
تصویر SVG
همانطور که در بالا می بینید، SVG در مقایسه با JPG در اندازه فایل ۹۲.۵۱ درصد کاهش می یابد. و در مقایسه با PNG، ۹۲.۸۳٪. آموزش ما را در مورد نحوه استفاده از SVG در سایت وردپرس خود بررسی کنید .
بهترین روش ها برای بهینه سازی تصاویر برای وب
در اینجا چند روش کلی برای بهینه سازی تصاویر برای وب آورده شده است:
اگر از یک افزونه وردپرس استفاده می کنید، از افزونه ای استفاده کنید که تصاویر را به صورت خارجی روی سرورهای آنها فشرده و بهینه می کند. این به نوبه خود بار روی سایت شما را کاهش می دهد.
در صورت امکان از تصاویر برداری در کنار PNG و JPG خود استفاده کنید.
از یک CDN برای ارائه سریع تصاویر خود به بازدیدکنندگان در سراسر جهان استفاده کنید.داده های تصویر غیر ضروری را حذف کنید.
فضای سفید را برش داده و با استفاده از CSS برای ارائه بالشتک آن را دوباره ایجاد کنید.
تا حد امکان از افکت های CSS3 استفاده کنید.
تصاویر خود را در ابعاد مناسب ذخیره کنید. اگرچه به یاد داشته باشید که وردپرس اکنون از تصاویر واکنشگرا پشتیبانی می کند تا آنها را بدون تغییر اندازه با CSS ارائه دهد.
همیشه از فرمت فایل .ico برای فاویکون خود استفاده کنید .
به جای قرار دادن متن در تصاویر از فونت های وب استفاده کنید – وقتی مقیاس بندی شده اند بهتر به نظر می رسند و فضای کمتری را اشغال می کنند.
از تصاویر شطرنجی فقط برای صحنه هایی با اشکال و جزئیات زیاد استفاده کنید.
عمق بیت را به یک پالت رنگ کوچکتر کاهش دهید.
در صورت امکان از فشرده سازی با اتلاف استفاده کنید. برای یافتن بهترین تنظیمات برای هر قالب آزمایش کنید.
اگر به انیمیشن نیاز دارید از GIF استفاده کنید. (اما GIF های متحرک خود را فشرده کنید )
اگر به جزئیات بالا و وضوح بالا نیاز دارید از PNG استفاده کنید.
از JPG برای عکس ها و اسکرین شات های عمومی استفاده کنید.
ابرداده های غیرضروری تصویر را حذف کنید.
تا حد امکان فرآیند را خودکار کنید.
در برخی موارد، ممکن است بخواهید تصاویر را برای رندر سریعتر صفحه اول بارگذاری کنید.
تصاویر را به عنوان “بهینه شده برای وب” در ابزارهایی مانند فتوشاپ ذخیره کنید.
از WebP در کروم برای نمایش در تصاویر کوچکتر استفاده کنید.
هنگامی که تصاویر خود را برای عملکرد بهتر قالب بندی کردید و بهترین روش ها را دنبال کردید، سایت شما توسط موتورهای جستجو، مرورگرها و شبکه ها بیشتر پسندیده می شود و برای خوانندگان شما سریعتر بارگذاری می شود.
آیا برای عملکرد بهتر تصاویر خود را فرمت کرده اید؟ آیا آنها را با دست فرمت می کنید، از یک افزونه استفاده می کنید یا هر دو؟ آیا ابزار یا افزونه دیگری پیشنهاد می کنید؟ چیزی برای اضافه کردن دارید؟ در نظرات زیر در مورد تکنیک ها و بهترین شیوه های خود به ما اطلاع دهید!
و بخوانید:
![دانلود کتاب: فضای مجازی و سلامت روانی [راهکارهای بهبود روانشناختی در دنیای آنلاین]](https://ivsi.ir/wp-content/uploads/2023/05/virtual-space-and-mental-health-book-300x300.webp)
