یکی از موضوعاتی که در دنیای وب و به ویژه وب مدرن مطرح میشود اهمیت بارگذاری سریع صفحات جهت نمایش به کاربر است. کاربرانی که مایل به صفحه وبی کاراتر و با رتبه بالاتر هستند باید به سرعت بارگذاری صفحات خود توجه خاصی داشته باشند.
یکی از مواردی که میتواند به کاهش چشم گیر این زمان کمک شایانی داشته باشند، تصاویر استفاده شده در سایت شما و حجم آنهاست. در این قسمت قصد داریم شما را با چند سرویس آنلاین جهت کاهش سایز تصاویر آشنا نماییم.
سرعت بارگذاری سایت من چقدر است؟
اگر میخواهید از این نکته به صورت علمی و دقیق آگاه شوید می بایست نگاهی به سایت https://gtmetrix.com داشته باشید. با وارد کردن نام وب سایت خود، این سرویس به صورت آنلاین به بررسی سایت شما می پردازد و تمامی مواردی که از زمان فشردن کلید enter تا بارگذاری کامل صفحه اتفاق می افتد را به شما نمایش میدهد.
پس از تحلیل سایت کافیست به رتبه بندی که این سایت به شما اختصاص داده است نگاهی بیندازید، پیداست که هرچه به حرف A نزدیک تر شوید وضعیت بهتری خواهید داشت.
این سرویس اطلاعات دقیقی از زمان بارگذاری تصاویر، کدهای جاوااسکریپت، تعداد درخواست ها HTTP و … را در اختیار شما قرار میدهد. شما میتوانید از زمان مورد نیاز هر یک از پردازش های فوق در تب Page Speed به تفکیک مطلع شوید.
این وب سایت همچنین این امکان جامع را به شما میدهد تا ببینید کدام پردازش در اولویت قرار داد، کدامیک زودتر انجام میشود و کدامیک بیشترین زمان را به خود اختصاص داده است. این موارد را میتوانید از تب Waterfall به تفکیک مشاهده نمایید. (در دنیای وب زمان و نحوه بارگذاری صفحات را همگی با منوی آبشاری نمایش میدهد)
تا اینجا بررسی دقیقی از اطلاعات بارگذاری سایت خود داشتیم، میخواهیم در قسمت اولِ راهکارهای بهبود سرعت بارگذاری سایت چند سرویس آنلاین به شما معرفی نماییم تا به کمک آنها حجم تصاویر و عکس های موجود در سایت خود را تا حد امکان و بدون از دست دادن کیفیت پایین بیاورید.
دقت کنید، همه سرویس های فوق از روش زیر استفاده میکنند:
- انتخاب و بارگذاری تصویر از سمت کاربر
- انتخاب ویژگی هایی مانند سایز، کیفیت، فرمت تصویر خروجی و … (دقت کنید برخی از سرویس ها همان سایز و فرمت را بعنوان خروجی انتخاب می نمایند و پردازش کیفیت نهایی را خود به صورت اتوماتیک انجام میدهند)
- دانلود تصویر خروجی
در ادامه به معرفی چند وب سایت مطرح در این حوزه می پردازیم:
- http://resizeimage.net
- http://www.reduceimages.com
- http://compressjpeg.com (این وب سایت به شما در تهیه یک فایل زیپ از چند تصویر کمک میکند)
- http://www.imageoptimizer.net/Pages/Home.aspx
- http://www.picresize.com
- https://tinyjpg.com
این وب سایت ها همگی سرویس های خود را به صورت کاملا رایگان ارائه داده و همین ویژگی بسیار حائز اهمیت است. بگذارید بعنوان مثال به سراغ وب سایت آخر رفته و یک تصویر را که برای نمونه انتخاب کرده ایم به کمک این وب سایت کاهش حجم دهیم.
ما تصویر زیر ار انتخاب کرده ایم:
حجم: 864KB سایز: 1200*1920
تصویر را در وب سایت https://tinyjpg.com بارگذاری نمودیم و خروجی این سایت به ما تصویری با مشخصات زیر بود:
حجم: 309KB سایز 1200*1920
خود وب سایت نیز به ما اعلام میدارد که 65 درصد در حجم عکس صرفه جویی رخ داده است!
کافیست تصویر خروجی را دانلود نماییم. تصویر خروجی را در ادامه ببینید تا مشاهده کنیم که کیفیت تصویر آنچنان نیز افت پیدا نکرده است.
سخن آخر:
راه های دیگری نیز وجود دارند که بدون احتیاج به اینترنت و بعنوان مثال با کمک برنامه Adobe Photoshop نسبت به کاهش سایز تصاویر خود اقدام کنیم. کافیست در همان صفحه که عکس خود را باز کرده اید هم زمان با هم کلید های Shift + ctrl + alt + s را فشار دهید تا صفحه ای باز شده و عکس خود را با کم کردن محسوس کیفیت جهت بارگذاری در صفحات وب آماده سازید.
به ترتیب از بالا:
مستطیل اول نوع تصویر خروجی را مشخص میکند. مستطیل دوم کیفیت تصویر را تعیین میکند (هر چه به عدد به 100 نزدیک تر باشد کیفیت تصویر افت کمتری پیدا میکند) و در نهایت مستطیل سوم که سایز تصویر خروجی و مدت زمان بارگذاری آن را نشان میدهد.
شما نیز میتوانید نظرات خود را با ما در میان بگذارید، از تجربیات خود در کاهش سایز تصاویر و زمان بارگذاری سایت خود بگویید و راهکارهای بیشتری را با اعضا یک وب در میان بگذارید.
به نظرم فتوشاپ برنامه عالیه در این زمینه ! هر چند در کاهش حجم نباید اونقدر به گرافیک و کیفیت عکس ها ضربه بزنیم که باعث کاهش جذب کاربر بشه