آموزش برنامه نویسی وب و مهارتهای مرتبط
شنبه ۲۲ شهریور ۱۴۰۴
Saturday, September 13, 2025 GMT +3:30
Saturday, September 13, 2025 GMT +3:30
آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
یکی از مسائلی که طراحان وب باید همیشه به آن توجه داشته باشند استفاده از المان های گرافیکی سبک و از جمله تصاویر کم حجم در قالب ها و پروژه های وب است، علاوه بر این سایر کاربران هم در برخی مواقع نیاز دارند که حجم تصاویر خود را برای انتشار در وب یا ارسال به دیگران به فرض از طریق ایمیل کاهش دهند، البته برنامه های زیادی در زمینه کاهش حجم تصاویر و مناسب کردن آنها برای انتشار در فضای وب وجود دارد اما برنامه قدرتمند فتوشاپ تقریبا ما را از تمام آنها بی نیاز می کند، ابزارهای بسیار خوبی در فتوشاپ وجود دارد که به نحو مطلوبی علاوه بر اینکه حجم عکس را کاهش می دهد از کیفیت آن چندان نمی کاهد، در ادامه این آموزش می خواهیم ببینیم که چگونه با فتوشاپ می توانیم حجم تصاویر وب را با کیفیت قابل قبول کاهش دهیم.
کاهش حجم تصاویر در وب چه فایده ای دارد؟
اولین سوالی که در این رابطه به ذهن می رسد این است که اصلا کاهش حجم تصاویر در وب چه ضرورت و فایده ای دارد؟
در پاسخ باید گفت ساز و کار دنیای وب با سیستم های شخصی یا گوشی های تلفن همراه متفاوت است، دو محدودیت سرعت انتقال فایل ها و فضای موجود ذخیره سازی آنها باعث می شود تا برای سهولت فرآیندها و جلوگیری از ایجاد مشکل حجم تصاویر وب را پیش از استفاده کاهش دهیم، تصاویر وب همواره دو مرحله آپلود و دانلود را بر سر راه خود دارند یعنی پیش از انتشار باید از سیستم کاربر به یک سرور آنلاین آپلود و در هنگام مشاهده فایل باید از سرور به سیستم کاربر دانلود شوند، مشخص است که سرعت این فرآیند در اینترنت های با کیفیت پائین خسته کننده و برای فایل های خیلی حجیم بعضا ناممکن خواهد شد، از طرفی وقتی فایلی را به فضای اینترنت آپلود می کنیم این فایل باید در فضای هارددیسک سرور مقصد نگهداری شود که معمولا این فضا مقداری مشخص و محدود شده است، به همین دلیل هرچه حجم تصاویر کمتر باشد تعداد بیشتری فایل قابل آپلود است و در میزان فضای موجود ذخیره سازی سرور صرفه جویی خواهد شد.
آشنایی با فرمت های رایج تصاویر
قبل از اینکه بخواهیم حجم تصاویر خود را با فتوشاپ کاهش دهیم، باید با فرمت های رایج تصویر آشنایی داشته باشیم، جهت یادآوری در زیر لیستی از این فرمت ها با توضیح مختصری ذکر می شود:
- فرمت تصویر jpg یا jpeg
jpeg مخفف عبارت (Joint Photographic Experts Group) و به معنی گروه مشترک متخصصان تصویر که مربوط به ایجاد کنندگان این فرمت است، در مجموع از فرمت jpeg جهت فشرده کردن فایل های عکس در مصارف عمومی استفاده می شود، به طور مثال برای انتشار تصاویر در وب یا فایل های PDF و یا مشاهده تصاویر در مانیتورها (و نه کار چاپ) از این فرمت می توانیم استفاده کنیم، فشرده سازی با فرمت jpeg معمولا حجم تصاویر را کاهش می دهد اما اندکی از کیفیت آنها در مقایسه با فرمت های مناسب کار چاپ می کاهد، این فرمت تا عمق رنگی استاندارد 24 بیت (RGB) را پوشش داده و در حال حاضر رایج ترین فرمتی است که در فضای وب مورد استفاده قرار می گیرد.
- فرمت تصویر gif
فرمت gif یا (Graphics Interchange Format) به فایل های تصویری با قابلیت نمایش چندین فریم و به صورت متحرک گفته می شود، این فرمت محدودیت هایی دارد و بیشتر مناسب ایجاد انیمیشن ها و تصاویر کم حجم و تحت وب است، gif تنها از عمق تصاویر با استاندارد 8 بیت یا 256 رنگ پشتیبانی می کند، یعنی ممکن است برخی از طیف های رنگی و جلوه های ویژه گرافیکی به خوبی در آن نشان داده نشوند.
- فرمت تصویر png
فرمت png یا (Portable Network Graphics) با هدف ایجاد فرمتی قوی و انعطاف پذیر و در عین حال قابل انتقال و مشاهده در بستر شبکه و مرورگرهای وب، تحت یک پروژه متن باز (Open-source) به وجود آمد، در مقایسه با gif و jpeg این فرمت از قدرت خیلی بیشتری از لحاظ حفظ کیفیت تصاویر برخوردار است و البته حجم تصاویر png معمولا بیشتر از سایر فرمت ها است، از نظر پشتیبانی رنگی png تقریبا محدودیتی ندارد و از استاندارد True-color (با 16 میلیون ترکیب رنگی) پشتیبانی می کند.
- فرمت تصویر tiff
فرمت tiff یا (Tagged Image File Format) نیز یکی از فرمت هایی است که در کارهای گرافیکی مخصوصا در هنگام خروجی گرفتن جهت چاپ به کار می رود، tiff تقریبا از تمام ویژگی های سایر تصاویر و از استاندارد رنگی 48 بیت پشتیبانی می کند، اما این فرمت توسط برخی مرورگرها پشتیبانی نمی شود و این یکی از معایب استفاده از آن در وب است.
- فرمت تصویر raw
فرمت raw عموما در برخی از دوربین های دیجیتال مورد استفاده قرار می گیرد و جنبه کاربرد عمومی ندارد، خیلی از شرکت های تولید کننده دوربین های عکاسی از این فرمت برای ذخیره تصاویر خام استفاده می کنند و هر کدام برنامه ها و الگوریتم های خاص خودشان را برای خواندن و نوشتن آن دارند، علاوه بر این برنامه های سوم شخص (Third-party) زیادی نیز در این زمینه وجود دارد.
- فرمت تصویر bmp
فرمت bmp یا (Windows Bitmap) تنها در سیستم عامل های شرکت مایکروسافت (مانند ویندوز) پشتیبانی می شود و قابلیت برجسته ای ندارد اما در برخی از مواقع در کار با برنامه های تحت ویندوز ممکن است کاربرد داشته باشد.
نحوه کاهش حجم تصویر در فتوشاپ
در هنگام کاهش حجم تصویر باید به دو نکته توجه کنیم:
نکته اول وضوح (Resolution) یا میزان تراکم پیکسلی تصویر است که با واحد PPI یا Pixels Per Inch تعیین می شود، به طور مثال 72 پیکسل در هر اینچ یا 300 پیکسل در هر اینچ، هر چقدر وضوح تصویر بالاتر باشد معمولا حجم و کیفیت آن نیز بالاتر است.
نکته دوم اندازه ابعاد ارتفاع و عرض (Height و Width) کلی تصویر است که اهمیت زیادی در میزان حجم نهایی آن خواهد داشت، چرا که تصاویر با ابعاد بزرگتر از تعداد پیکسل بیشتری تشکیل شده اند و به این دلیل حجم بیشتری اشغال می کنند، اندازه های استاندارد در فتوشاپ معمولا به صورت پیش فرض 640 در 480 پیکسل، 800 در 600 پیکسل، 1024 در 768 پیکسل و موارد مشابه است، این اندازه ها را می توانیم با توجه به نیازمان تغییر دهیم.
برای کاهش حجم فایل نهایی در فتوشاپ ابتدا تصویر مورد نظر را در برنامه وارد و سپس اندازه دلخواه خود را در قسمت Image و Image Size تنظیم می کنیم، در این قسمت نیز به دو مورد باید توجه کنیم:
اگر می خواهیم با تغییر اندازه ارتفاع اندازه عرض تصویر نیز به طور خودکار تغییر کند، گزینه Constrain Proportions یا تحمیل کردن مقیاس باید فعال باشد، بهتر است اندازه تصویر خود را به واحد پیکسل (Pixel) تغییر دهیم نه درصد (Percent)، اگر چه ممکن است نتیجه دو حالت فرق چندانی با هم نداشته باشد اما واحد پیکسل برای گرفتن خروجی وب کاربرد بیشتری دارد.
علاوه بر ابعاد ارتفاع و عرض در همین قسمت می توانیم وضوح و تراکم پیکسلی تصویر خروجی را هم تعیین کنیم، برای این کار در فیلد مربوط به عبارت Resolution میزان وضوح مورد نظر را به پیکسل در هر اینچ درج می کنیم (در حال حاضر بهتر است این وضوح را حداکثر 1000 و حداقل 72 در نظر بگیریم، وضوح 300 پیکسل برای کارهای چاپی معمول و 72 پیکسل برای وب کفایت می کند)، برای درک بهتر توضیحات بالا تصویر زیر گویا است:
همچنین اگر تعداد زیادی لایه در فتوشاپ باز کرده باشیم و بخواهیم از آنها در قالب یک تصویر نهایی خروجی بگیریم، بهتر است ابتدا از قسمت Layer گزینه Flatten Image را انتخاب کنیم تا تمام لایه ها تبدیل به یک لایه شوند، فراموش نکنیم که پس از گرفتن خروجی و در صورت نیاز به نگهداری فایل پروژه، باید تصویر را از حالت Flatten خارج کرده و (با زدن دکمه Ctrl + Z یا گزینه Undo) به حالت لایه های باز ذخیره کنیم.
ذخیره تصویر به صورت کم حجم با فتوشاپ
اکنون که اندازه و وضوح تصویر را متعادل کردیم باید هنگام گرفتن خروجی از امکانات خاص فتوشاپ در زمینه کاهش حجم تصاویر وب استفاده کنیم، در حالت عادی اگر بخواهیم از تصویر خود خروجی بگیریم از قسمت File و Save As یک فرمت را انتخاب کرده و فایل را در سیستم ذخیره می کنیم، اما برای تصاویر وب گزینه ای تحت عنوان Save for Web در منوی File وجود دارد، این گزینه را انتخاب و در پنجره ظاهر شده از قسمت Preset یا تنظیمات پیش فرض یک فرمت و کیفیت را تعیین می کنیم، بسته به اینکه میزان کاهش حجم تصویر مورد نظر با توجه به کیفیت آن چقدر باشد می توانیم تنظیمات را کم یا زیاد کنیم، در همین قسمت امکان مشاهده پیش نمایش و تخمین حجم تقریبی تصویر با تنظیماتی که انجام داده ایم در لحظه وجود دارد، در نهایت تصویر خود را ذخیره کرده و اگر کیفیت و حجم آن مورد رضایتمان بود به کارمان خاتمه می دهیم، در غیر این صورت می توانیم یک بار دیگر با فرمت، کیفیت و تنظیمات دیگر مجددا تصویر را ذخیره و امتحان کنیم، در اغلب موارد تصویر خروجی با حالت اولیه آن تفاوت چشمگیری از نظر حجم خواهد داشت.
نکته: در نسخه های جدیدتر برنامه فتوشاپ برای گرفتن خروجی نهایی باید از منوی File گزینه Export و در نهایت Save for Web (Legacy) را انتخاب کنیم.
دسته بندی: مهارتهای وب » طراحی وب
برچسب ها: طراحی وب - دانستنی ها
مطالب بیشتر:قابلیت های کاربردی CSS3 در طراحی وب
زیبا سازی فرم های وب با CSS
طراحی باکس جستجو با فتوشاپ و CSS
چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟
دیدگاه
۱۳ دیدگاه برای این مطلب ارسال شده است. چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.نازی
۱۳:۰۳ ۱۴۰۱/۰۶/۰۲
عالی
سارا
۱۰:۳۳ ۱۴۰۰/۰۳/۰۲
با سلام. تصویری در فتوشاپ آماده کردم که احتیاج داشتم کیفیت بالایی داشته باشه و از عمق ۳۲ برای اون استفاده کردم. ولی الان که میخوام فایل psd رو به jpg تبدیل کنم میبینم که نمیشه! میشه راهنمایی کنید چطور این فایلو به ۱۶ بیت تبدیل کنم یا همین ۳۲ بیت رو چطور به jpg تبدیل کنم. تشکر
اگر امکان خروجی گرفتن از قسمت
File > Export > Save for Web (Legacy)۱۹:۰۷ ۱۳۹۶/۱۲/۲۴
سلام ممنونم خیلی به دردم خورد
۱۱:۵۲ ۱۳۹۶/۰۳/۳۱
ممنون
نیوشا آریامنش
۰۲:۳۴ ۱۳۹۵/۰۷/۲۹
سلام متشکرم از اطلاعات خوبتون
من برای یه سازمانی باید عکس با عمق رنگی 24 بیت تهیه کنم ولی فوتوشاپ من 8 و 16 و 32 بیتی رو ساپورت می کنه من روی 32 بیتی کار کردم نمی دونم باید چی بکنم؟؟
و یه سوال دیگه هم دارم وقتی روی 32 بیت کار کردم امکان ذخیره ی عکس از فوتوشاپ به صورت jpg وجود نداره باید چی کار بکنم؟؟؟
بازم سپاس
من برای یه سازمانی باید عکس با عمق رنگی 24 بیت تهیه کنم ولی فوتوشاپ من 8 و 16 و 32 بیتی رو ساپورت می کنه من روی 32 بیتی کار کردم نمی دونم باید چی بکنم؟؟
و یه سوال دیگه هم دارم وقتی روی 32 بیت کار کردم امکان ذخیره ی عکس از فوتوشاپ به صورت jpg وجود نداره باید چی کار بکنم؟؟؟
بازم سپاس
معمولا قابلیت های برنامه ها در این خصوص محدود است که فتوشاپ نیز از این قاعده مستثنی نیست! می توانید تصاویرتان را به صورت 16 بیتی و یا 32 بیتی با یک فرمت دیگر (مانند PNG) ذخیره کرده و سپس تبدیل به فرمت JPG کنید، البته باید برنامه های تبدیل تصویر را امتحان کنید و ببینید آیا قابلیت تبدیل بیت تصاویر بدون افت کیفیت را دارند یا خیر! در غیر این صورت باید سایر برنامه های ویرایش تصویر مانند Paint ویندوز را امتحان کنید!
۱۰:۴۰ ۱۳۹۵/۰۷/۱۳
سلام ممنون از مقاله خوبتون. میشه در رابطه با چگونگی کاهش حجم تصاویر چند تا سایت معرفی کنید
ممنون میشم
ممنون میشم
لطفا آدرس زیر را در مرورگر وارد کنید:
https://www.google.com/search?q=reduce+image+file+sizeمحمد
۰۰:۵۷ ۱۳۹۵/۰۶/۰۳
سلام من میخوام یه گیف را باحجم 815 کیلوبایت واتر مارک زدم بعد واتر مارک حجمش شد 8 مگ از این توضیحات شما پیش برم حجم گیف کم میشه؟
بله، البته برای تصاویر GIF بهتر است ابتدا فریم ها بهینه شوند و سپس فایل نهایی.
maryam
۲۱:۰۲ ۱۳۹۵/۰۴/۱۸
سلام خسته نباشید
میخواستم بپرسم چرا یک شیپ سه بعدی رو تو فتوشاپ با ctrl+T کوچیک میکنم لبه های شکل دندانه ای میشه؟ برای کوچیک کردن ی شیپ باید چکار کنم؟
ممنونم
میخواستم بپرسم چرا یک شیپ سه بعدی رو تو فتوشاپ با ctrl+T کوچیک میکنم لبه های شکل دندانه ای میشه؟ برای کوچیک کردن ی شیپ باید چکار کنم؟
ممنونم
دندانه ای شدن shape بستگی به فرمت و تراکم پیکسلی آن دارد، به طور مثال تصاویر وکتور (برداری) معمولا انعطاف پذیری بیشتری دارند تا تصاویر پیکسلی، در هر صورت می توانید از مقادیر درصدی W و H که نماد عرض و ارتفاع هستند نیز استفاده کنید (پس از انتخاب شکل با Ctrl + T در منوی بالایی).
عبدالرحیم مدنی
۰۸:۰۳ ۱۳۹۳/۰۵/۲۴
ممنون از مطالب مفیدتون
سیامک
۰۱:۲۰ ۱۳۹۳/۰۵/۰۶
سلام. خسته نباشین. میخواستم بدونم کدی هست که تصاویری رو که کاربر آپلود کرده رو کم کنه؟ یا کدی که کاربر رو محدود کنه که مثلا نتونه عکس با حجم بیشتر از 500kb رو آپلود کنه؟
کد ساده ای برای این موارد وجود ندارد! باید به دنبال تابع ایجاد تصاویر بندانگشتی با PHP باشید، همچنین برای اعمال محدودیت حجم آپلود، باید با نحوه مدیریت آپلود فایل در PHP آشنا باشید که آموزش های آن هم در وب و هم در سایت وجود دارد، عبارت "نحوه آپلود فایل با PHP" را در وب و عبارت "نحوه آپلود فایل" را در سایت جستجو کنید.
محمد
۱۹:۳۵ ۱۳۹۳/۰۵/۰۱
سلام
خیلی ممنون تابع کاربردی و مفیدی بود و کارمو راه انداخت
آیا امکان کروپ کردن هم وجود داره ؟
خیلی ممنون تابع کاربردی و مفیدی بود و کارمو راه انداخت
آیا امکان کروپ کردن هم وجود داره ؟
بله، یک جستجوی کوتاه در وب با عنوان "PHP Image Crop" انبوهی از توابع آماده را در اختیارتان قرار می دهد.
محمد
۰۳:۱۵ ۱۳۹۳/۰۴/۰۷
سلام
مشکلاتی در خصوص اندازه تصویر دارم لطفا راهنمایی کنید
در قسمت گالری تصاویر ابتدا یک تصویر کوچک از هر عکس هست و با کلیک روی تصویر کوچک عکس مورد نظر در اندازه واقعی نشون داده میشه مشکل اینجاست که هر عکس اندازه ای خاص داره و اگه بخوام با width و height اندازه عکس ها رو یکی کنم شکل زیبایی نداره حالا بر فرضی که من اندازه عکس رو یا width و height کم کردم ، در لود صفحه مشکل پیش میاد و کاربر هر بار باید حجم زیادی از عکس براش لود بشه
به این نتیجه رسیدم که برای هر عکس در گالری تصاویر دو تا عکس ذخیره کنم ، یک عکس کوچک و بسیار کم حجم مثلا (100px * 150px) برای نمایش در گالری و با کلیک روی اون ، عکس دوم با اندازه واقعی نمایش داده میشه ولی مشکل اینجاست که من نمیتونم به مشتری بگم با فوتوشاپ عکس هات رو کوچیک کن!!
کدی هست که بشه باهاش عکس رو کوچک کرد ؟
اگه پیشنهاد دیگه ای هم دارید ممنون میشم ارائه کنید ولی کد کوچک کردن عکس اگه هست بهم بدید چون در جاهای دیگه هم نیازش دارم
ممنون
مشکلاتی در خصوص اندازه تصویر دارم لطفا راهنمایی کنید
در قسمت گالری تصاویر ابتدا یک تصویر کوچک از هر عکس هست و با کلیک روی تصویر کوچک عکس مورد نظر در اندازه واقعی نشون داده میشه مشکل اینجاست که هر عکس اندازه ای خاص داره و اگه بخوام با width و height اندازه عکس ها رو یکی کنم شکل زیبایی نداره حالا بر فرضی که من اندازه عکس رو یا width و height کم کردم ، در لود صفحه مشکل پیش میاد و کاربر هر بار باید حجم زیادی از عکس براش لود بشه
به این نتیجه رسیدم که برای هر عکس در گالری تصاویر دو تا عکس ذخیره کنم ، یک عکس کوچک و بسیار کم حجم مثلا (100px * 150px) برای نمایش در گالری و با کلیک روی اون ، عکس دوم با اندازه واقعی نمایش داده میشه ولی مشکل اینجاست که من نمیتونم به مشتری بگم با فوتوشاپ عکس هات رو کوچیک کن!!
کدی هست که بشه باهاش عکس رو کوچک کرد ؟
اگه پیشنهاد دیگه ای هم دارید ممنون میشم ارائه کنید ولی کد کوچک کردن عکس اگه هست بهم بدید چون در جاهای دیگه هم نیازش دارم
ممنون
استفاده از تصاویر کوچک (بندانگشتی) یا Thumbnail در وب امری متداول است، با استفاده از تابع زیر در PHP می توانید این تصاویر را به صورت خودکار ایجاد کنید:
<?php
function makeThumbnail($file, $path, $size){
$src_img = $path.$file;
$src_thumb = $path.'thumb/'.$file;
$type = substr($file, strrpos($file, '.') + 1);
switch($type){
case 'jpg':
case 'jpeg':
$src_img = imagecreatefromjpeg($src_img);
break;
case 'png':
$src_img = imagecreatefrompng($src_img);
break;
case 'gif':
$src_img = imagecreatefromgif($src_img);
break;
}
$width = imagesx($src_img);
$height = imagesy($src_img);
$new = imagecreatetruecolor($size, $size);
imagecopyresampled($new, $src_img, 0, 0, 0, 0, $size, $size, $width, $height);
switch($type){
case 'jpg':
case 'jpeg':
$src_img = imagejpeg($new, $src_thumb);
break;
case 'png':
$src_img = imagepng($new, $src_thumb);
break;
case 'gif':
$src_img = imagegif($new, $src_thumb);
break;
}
}
//echo dirname(__FILE__);
//نحوه استفاده
makeThumbnail('image.jpg', dirname(__FILE__).'/file/', 100);
?>مسعود
۱۵:۲۰ ۱۳۹۲/۰۶/۱۶
سلام
دستتون درد نکنه خیلی خوب توضیح داده اید
ممنون
دستتون درد نکنه خیلی خوب توضیح داده اید
ممنون
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.