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

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

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

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

برای داشتن تصویر مناسب بایستی چند نکته را درنظر داشته باشید. هنگامی که شما قصد دارید تصویر خود را مناسب برای وب ذخیره کنید 2 مورد بسیار مهم را باید رعایت کنید. اولین مورد انتخاب پسوند فایل مناسب و مورد دوم و مهم نیز فشرده سازی (بهینه سازی برای وب). با انتخاب صحیح این 2 مورد سایز تصاویر شما تا 5 برابر میتواند کاهش یابد.

اکثر تصاویری که در وب استفاده میگردند Png و JPG میباشند. البته این 2 فرمت برای تصاویر ثابت میباشد. برای تصاویر بنری و  متحرک از فرمت Gif استفاده میگردد.

هنگامی که شما قصد دارید تصاویر ترنسپرنت استفاده کنید وتعداد رنگ های استفاده شده در تصاویر نیز پایین است باید نوع خروجی PNG را برای تصویر خود استفاده کنید. هنگام خروجی گرفتن از تصاویر PNG بهتر است تعداد رنگ هایی که قابل انتخاب هست بسته به کیفیت تصویر خود میتوانید PNG8 و یا PNG 24 را انتخاب و فایل خود  را متناسب با سایت خود خروجی بگیرید. جهت ذخیره تصاویر مناسب وب در ادامه خروجی نرم افزار Adobe Photoshop برای وب را بررسی خواهیم نمود.

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

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

بهینه سازی و کاهش حجم تصاویر با Adobe Photoshop

در صورتی که شما تصاویر خود را در محیط های دیگری همچون Paint یا سایر نرم افزار ها تهیه نموده اید پیشنهاد میگردد فتوشاپ را نصب کنید و با چند قدم ساده تصاویر بهینه برای سایت خود ذخیره کنید. در قدم اول از منو Image گزینه Image Size را انتخاب کنید تا طبق تصویر زیر بتوانید سایز عکس  خود را بصورت مناسب تغییر دهید.

در این قسمت میتوانید تصاویر خود را با PX و یا CM و… تغییر اندازه دهید.

بعد از انتخاب سایز مناسب برای عکس خود میتوانید با توجه به فرمت خود تصاویر با فشرده سازی بیشتر و  حجم کمتری ذخیره کنید. برای این منظور از منو File نرم افزار فتوشاپ گزینه Save For Web را انتخاب کنید تا ابزار ذخیره سازی فتوشاپ برای و وب را همانند تصویر زیر مشاهده کنید.

همانطوری که مشاهده میکنید در این تصویر ما خروجی PNG را با حالت Transparent انتخاب نموده ایم تا بتوانیم تصویر را در همه جا بدون پشت زمینه استفاده کنیم. همچنین فرمت PNG نیز بصورت 24 بیتی انتخاب شده است. در صورتی که تعداد رنگ های عکس PNG شما کمتر باشد میتوانید بصورت 8 بیتی نیز ذخیره کنید تا تصویر شما حجم کمتری داشته باشد.

در صورتی که عکس شما بصورت Transparent نباشد شما میتوانید آنرا بصورت JPG با فشرده سازی بیشتری ذخیره کنید. برای این منظور در همان منو File و Save For Web نوع خروجی را همانند تصویر زیر JPG انتخاب کنید.

همانطوری که در تصویر فوق نیز مشاهده میکنید میتوانید کیفیت خروجی را از 0 تا 100 مشخص کنید. میتوانید کیفیت خروجی را تغییر داده و تاثیر آن روی عکس خود را مشاهده کنید. بهترین عدد برای جلوگیری از افت کیفیت بسیار زیاد 80 میباشد. البته معمولا در بسیاری از تصاویر این عدد تا 70 نیز تغییر خیلی زیادی در کیفیت تصویر نخواهد داشت.

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