آیا عاشق تصاویر نیستید؟

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

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

اما، اگر مراقب نباشید، تصاویر می توانند بیش از نیمی (یا بیشتر) از اندازه کل صفحه وب شما را تشکیل دهند. همین چند سال پیش، اندازه متوسط ​​یک صفحه وب 600-700K بود. اکنون، میانگین 2 مگابایت است و هر سال در حال افزایش است.

این بسیار بزرگ است!

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

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

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

چرا باید تصاویر را بهینه کنید

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

مطالعات نشان می دهد که تا 40 درصد از اگر بارگذاری سایت بیش از سه ثانیه طول بکشد، بازدیدکنندگان روی دکمه برگشت کلیک می‌کنند.

می‌دانم، سه ثانیه واقعاً آنقدر طولانی نیست، اما وقتی در اتصال تلفن همراه هستید و منتظر یک سایت برای بارگیری، یک ثانیه می تواند برای همیشه به نظر برسد.

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

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

بنابراین، چگونه می توانید تشخیص دهید که آیا تصاویر شما سرعت سایت شما را کاهش می دهند؟ سرعت سایت خود را با Google PageSpeed ​​Insights تست کنید.

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

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

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

بیایید نگاهی دقیق تر به هر یک از این قسمت ها بیندازیم.

نوع فایل

تصاویر در وب معمولاً در قالب فایل PNG یا JPEG - یا GIF برای انیمیشن ذخیره می شوند. چه کسی آن گیف های متحرک خنده دار را که در سراسر وب شناور هستند، دوست ندارد!

اکنون از نظر فنی اشکال ندارد اگر تصاویر خود را در هر قالب ذخیره کنید - مرورگر بازدیدکننده شما برای نمایش صفحه وب شما مشکلی نخواهد داشت. – اما برای بهترین کیفیت و بهینه‌سازی، قوانین زیر را رعایت کنید:

• JPEG – استفاده برای عکس‌ها و طرح‌هایی که در آن افراد، مکان‌ها یا چیزها نشان داده می‌شوند
• PNG – بهترین برای گرافیک ، آرم ها، طرح های متنی سنگین، اسکرین شات ها و زمانی که به تصاویر با پس زمینه شفاف نیاز دارید
• GIF – اگر به انیمیشن نیاز دارید، در غیر این صورت از PNG استفاده کنید

پس، چرا فرمت های مختلف وجود دارد ?

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

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

ما بعداً به جزئیات بیشتری در مورد فشرده سازی خواهیم پرداخت، اما در حال حاضر اگر فقط دو چیز را به خاطر دارید، به یاد داشته باشید: JPEG برای عکس ها و PNG برای متن/گرافیک.

ابعاد تصویر

آیا تا به حال یک صفحه وب را بارگذاری کرده اید و متوجه شده اید که یک عکس کوچک (مثلاً ممکن است یک هد شات) برای دانلود f-o-r-e-v-e-r نیاز باشد؟ مثلاً، آنقدر آهسته است که می‌توانید هر خط را ببینید؟ با خود فکر می کنید، چگونه ممکن است دانلود چنین تصویر کوچکی اینقدر طول بکشد؟

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

دلیل اینکه این اتفاق می افتد این است که وبلاگ نویس به درستی اندازه تصویر خود را تغییر نداده و بهینه نکرده است، و در مورد مثال هد شات ما، ممکن است یک JPEG با وضوح کامل را مستقیماً از دوربین DSLR خود آپلود کرده باشد.

و این یک فایل عظیم است!

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

اکنون برخی از پلت‌فرم‌های انتشار وب به طور خودکار چندین تغییر از تصویر با وضوح کامل شما را در موارد مختلف ایجاد می‌کنند. اندازه‌ها، اما اگر نه، باید اندازه تصاویر خود را از قبل در یک ویرایشگر تصویر مانند Photoshop، Lightroom، Pixlr یا حتی MS Paint تغییر دهید. می تواند به معنای تفاوت باشدبین یک فایل 50K و یک فایل 5 مگابایتی.

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

اگر عادت به آپلود عکس‌های استوک عظیم دارید و می‌خواهید فضا را در حساب میزبانی خود ذخیره کنید، افزونه وردپرس Imsanity پشت شماست.

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

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

ارائه تصاویر شما

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

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

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

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

Blogging Wizard از Sucuri استفاده می‌کند (این شامل فایروال برای امنیت و همچنین CDN است)، اما ارائه‌دهندگان با کیفیت دیگری نیز وجود دارد. مانند Cloudfront آمازون یا KeyCDN. حتی CloudFlare محبوب، که کاملاً یک CDN نیست، یک CDN را به صورت رایگان ارائه می‌کند و در اکثر بسته‌های میزبانی مشترک به راحتی تنظیم می‌شود.

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

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

اکثر ابزارهای ویرایش تصویر مانند Visme یا Photoshop فایل ها را با استفاده از فشرده سازی JPEG با اتلاف ذخیره می کنند زیرا بهترین کاهش اندازه فایل را دارد. بنابراین، در حالی که کیفیت تصویر اندکی کاهش می‌یابد، استفاده از فشرده‌سازی تصویر با اتلاف، تصاویر بزرگ را به اندازه‌های مناسب وب کاهش می‌دهد.

من مطمئن هستم که بسیاری از کسانی که از Photoshop استفاده می‌کنند ممکن است ویژگی Save for Web آن را مشاهده کنند. به عنوان تمام و همه چیز بهینه سازی تصویر. و حتی ابزارهای آنلاین ویرایش تصویر مانند PicMonkey یا Visme نیز تصاویر شما را بهینه می‌کنند.

اما آیا می‌دانستید ابزارهایی وجود دارند که می‌توانند تصویر «بهینه‌شده» شما را از Photoshop یا سایر ابزارهای ویرایشی گرفته، آن را خرد و فشرده کنند. 40% دیگر (یا بیشتر)،و هنوز آیا تقریباً با چشم انسان یکسان به نظر می رسد؟

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

ابزارهای دسکتاپ

ImageAlpha / ImageOptim

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

نکته حرفه ای : برای افرادی که با فناوری آشنا هستند ImageOptim– وجود دارد. CLI، جایی که می توانید یک پوشه کامل از تصاویر را به طور همزمان بهینه سازی کنید.

ImageAlpha یک کمپرسور PNG با اتلاف است و می تواند در کوچک کردن فایل های PNG شگفتی ایجاد کند در حالی که ImageOptim فشرده سازی پیشرفته بدون تلفات (با گزینه اتلاف) را انجام می دهد - و این کار را انجام می دهد. ابرداده‌های غیرضروری را از فایل‌های PNG، JPEG و GIF حذف می‌کند.

برای تصاویر PNG، ابتدا آنها را از طریق ImageAlpha اجرا می‌کنم:

در اینجا، تصویر صفحه‌نمایش من را از 103K به 28K کاهش داد.

سپس آن را از طریق ImageOptim اجرا کردم و 10% اضافی ذخیره کردم

JPEGmini

برای فایل های JPEG خود، آنها را با برنامه JPEGmini دسکتاپ که در دسترس است بهینه می کنم. هم برای مک و هم برای ویندوز.

نسخه Lite به شما امکان می دهد تا حداکثر 20 تصویر در روز را به صورت رایگان بهینه سازی کنید و هزینه حذف محدودیت 19.99 دلار است.

نکته حرفه ای : کاربران پیشرفته ای که می خواهند JPEGmini را از طریق یک افزونه در Photoshop یا Lightroom ادغام کنند، می توانند نسخه Pro را برای99.99 دلار.

ابزارهای آنلاین / ابری / SaaS

TinyPNG

اگر به دنبال یک ابزار فشرده سازی تصویر آنلاین با کیفیت بالا هستید، TinyPNG (این ابزار JPEG را بهینه می کند فایل‌ها نیز علی‌رغم نام) یک برنامه وب است که به شما امکان می‌دهد تا 20 تصویر 5 مگابایتی یا کوچک‌تر را به مرورگر خود بکشید و آنها را به یکباره بهینه کنید.

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

TinyPNG 500 بهینه سازی تصویر رایگان در ماه به شما می دهد و پس از آن بسته به حجم، از 0.002 تا 0.009 دلار برای هر تصویر هزینه دریافت می کند.

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

EWWW Image Optimizer

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

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

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

در حال تکمیل آن

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

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

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

بعد، از فشرده‌سازی تصویر مدرن با برنامه‌های دسکتاپ مانند JPEGmini یا ابزارهای ابری مانند TinyPNG یا Kraken استفاده کنید - در صورت امکان آنها را با یک افزونه در وردپرس ادغام کنید.

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

مطالعه مرتبط: 7 راه برای کاهش اندازه فایل های PDF.