parsgreen.com
article

آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ

web-photoshop-resize-image

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

آشنایی با فرمت های تصاویر


قبل از اینکه بخواهیم حجم تصاویر خود را با فتوشاپ کاهش دهیم، باید با فرمت های رایج تصویر آشنایی داشته باشیم، جهت یادآوری در زیر لیستی از این فرمت ها با توضیح مختصری آمده است:
- فرمت تصویر 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 تقریبا محدودیتی ندارد و از استاندارد truecolor (با 16 میلیون ترکیب رنگی) پشتیبانی می کند.
- فرمت تصویر tiff
فرمت tiff یا (Tagged Image File Format) نیز یکی از فرمت هایی است که در کارهای گرافیکی مخصوصا در هنگام خروجی گرفتن جهت چاپ به کار می رود، tiff تقریبا از تمام ویژگی های سایر تصاویر و از استاندارد رنگی 48 بیت پشتیبانی می کند، اما خود این فرمت توسط برخی مرورگرها پشتیبانی نمی شود و این یکی از معایب استفاده از آن در وب است.
- فرمت تصویر raw
فرمت raw عموما در برخی از دوربین های دیجیتال مورد استفاده قرار می گیرد و جنبه کاربرد عمومی ندارد، خیلی از شرکت های تولید کننده دوربین های عکاسی از این فرمت برای ذخیره تصاویر خام استفاده می کنند و هر کدام برنامه ها و الگوریتم های خاص خودشان را برای خواندن و نوشتن آن دارند، علاوه بر این برنامه های سوم شخص (3rd party) زیادی نیز در این زمینه وجود دارد.
- فرمت تصویر bmp
فرمت bmp یا (Windows bitmap) تنها در سیستم عامل های شرکت مایکروسافت پشتیبانی می شود و قابلیت برجسته ای ندارد، در برخی از مواقع در کار با برنامه های تحت ویندوز ممکن است کاربرد داشته باشد.

کاهش حجم تصویر در فتوشاپ


در کاهش حجم یک تصویر باید به چند نکته توجه کنید، یک مورد وضوح یا میزان فشردگی پیکسل های یک تصویر است (مثلا 72 پیکسل/اینچ یا 300 پیکسل/اینچ و ...)، هر چقدر وضوح یک تصویر بالاتر باشد، معمولا حجم و کیفیت آن نیز بالاتر است، از طرفی اندازه (ارتفاع و عرض) تصاویر نیز اهمیت زیادی در میزان حجم نهایی آنها خواهند داشت، چرا که تصاویر بزرگتر از تعداد پیکسل بیشتری تشکیل شده اند و به این دلیل حجم بیشتری را اشغال می کنند، اندازه های استاندارد در فتوشاپ به صورت پیش فرض 640 در 480 پیکسل، 800 در 600 پیکسل و 1024 در 768 پیکسل و ... است، این اندازه ها را می توانید با توجه به نیازتان تغییر دهید.
برای کاهش حجم یک تصویر در فتوشاپ، ابتدا تصویر مورد نظر را در برنامه وارد کنید، سپس اندازه دلخواه خود را در قسمت image و image size تنظیم نمایید، در این قسمت به دو مورد باید توجه کنید، اگر می خواهید با تغییر اندازه ارتفاع، اندازه عرض تصویر نیز به طور خودکار تغییر کند، گزینه Constrain Proportions یا تحمیل کردن مقیاس باید فعال باشد، از طرفی دقت کنید که بهتر است اندازه تصویر خود را به واحد پیکسل (pixel) تغییر دهید نه درصد (percent)، اگر چه ممکن است در نتیجه چندان فرقی با هم نداشته باشند،  اما واحد پیکسل کاربرد بیشتری دارد، در همین قسمت می توانید وضوح خروجی تصویر را هم تعیین کنید، کافی است در فیلد مربوط به عبارت Resolution، میزان  وضوح تصویر مورد نظر خود را وارد کنید (بهتر است این وضوح را حداکثر 1000 و حداقل 72 در نظر بگیرید، وضوح 300 پیکسل برای کارهای چاپی معمولی کفایت می کند)، تصویر زیر گویا است:
web-photoshop-resize
همچنین اگر تعداد زیادی لایه در فتوشاپ باز کرده باشید و بخواهید از آنها خروجی بگیرید، بهتر است ابتدا از قسمت Layer گزینه Flatten Image را انتخاب کنید تا تمام لایه ها تبدیل به یک لایه شوند.

ذخیره تصاویر به صورت کم حجم با فتوشاپ


اکنون که اندازه و وضوح تصاویر را متعادل کردیم، باید هنگام خروجی از امکانات خاص فتوشاپ در زمینه تصاویر وب استفاده کنیم، در حالت عادی اگر بخواهیم از تصاویر خود خروجی بگیریم از قسمت File و Save As یک فرمت را انتخاب کرده و فایل خود را در سیستم ذخیره می کنیم، اما برای تصاویر وب، گزینه ای تحت عنوان Save for Web در منوی File وجود دارد، آن را انتخاب و در پنجره ظاهر شده، از قسمت Preset یا تنظیمات پیش فرض یک فرمت و کیفیت را تعیین  می کنیم، بسته به اینکه میزان کاهش حجم تصویر مورد نظر با توجه به کیفیت آن چقدر باشد، می توانید تنظیمات را کم یا زیاد کنید، در همین قسمت امکان مشاهده پیش نمایش و تخمین حجم تقریبی تصویر با تنظیماتی که شما انجام داده اید، در لحظه وجود دارد، در نهایت تصویر خود را ذخیره کرده و اگر کیفیت و حجم آن مورد رضایت شما بود، از آن استفاده کنید، در غیر اینصورت می توانید یک بار دیگر با فرمت، کیفیت و تنظیمات دیگر مجددا تصویر را ذخیره کنید، مطمئنا تصویر خروجی با حالت اولیه آن خیلی تفاوت از نظر حجم خواهد داشت.
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» قابلیت های کاربردی CSS3 در طراحی وب
» آموزش انتقال قالب از فتوشاپ به کد html و css
» طراحی هدر قالب سایت و وبلاگ با فتوشاپ و css
» چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
» زیبا سازی فرم های وب با css
commentنظرات (۱۰ یادداشت برای این مطلب ارسال شده است)
نویسنده: مسعود
زمان: ۱۵:۲۰:۲۹ - تاریخ: ۱۳۹۲/۰۶/۱۶
سلام
دستتون درد نکنه خیلی خوب توضیح داده اید
ممنون
نویسنده: محمد
زمان: ۰۳:۱۵:۱۶ - تاریخ: ۱۳۹۳/۰۴/۰۷
سلام
مشکلاتی در خصوص اندازه تصویر دارم لطفا راهنمایی کنید
در قسمت گالری تصاویر ابتدا یک تصویر کوچک از هر عکس هست و با کلیک روی تصویر کوچک عکس مورد نظر در اندازه واقعی نشون داده میشه مشکل اینجاست که هر عکس اندازه ای خاص داره و اگه بخوام با 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);
?>
نکته: کد و فایل تصویر اصلی باید در دایرکتوری file و تصاویر کوچک در دایرکتوری thumb (درون دایرکتوری file) قرار گیرد.
نویسنده: محمد
زمان: ۱۹:۳۵:۲۲ - تاریخ: ۱۳۹۳/۰۵/۰۱
سلام
خیلی ممنون تابع کاربردی و مفیدی بود و کارمو راه انداخت
آیا امکان کروپ کردن هم وجود داره ؟
پاسخ: 
سلام
بله، یک جستجوی کوتاه در وب با عنوان "PHP Image Crop" انبوهی از توابع آماده را در اختیارتان قرار می دهد.
نویسنده: سیامک
زمان: ۰۱:۲۰:۱۳ - تاریخ: ۱۳۹۳/۰۵/۰۶
سلام. خسته نباشین. میخواستم بدونم کدی هست که تصاویری رو که کاربر آپلود کرده رو کم کنه؟ یا کدی که کاربر رو محدود کنه که مثلا نتونه عکس با حجم بیشتر از 500kb رو آپلود کنه؟
پاسخ: 
سلام
کد ساده ای برای این موارد وجود ندارد! باید به دنبال تابع ایجاد تصاویر بندانگشتی با PHP باشید، همچنین برای اعمال محدودیت حجم آپلود، باید با نحوه مدیریت آپلود فایل در PHP آشنا باشید که آموزش های آن هم در وب و هم در سایت وجود دارد، عبارت "نحوه آپلود فایل با PHP" را در وب و عبارت "نحوه آپلود فایل" را در سایت جستجو کنید.
نویسنده: یو پی اس
زمان: ۱۲:۴۵:۲۸ - تاریخ: ۱۳۹۳/۰۵/۱۹
عالی بود ممنونم
نویسنده: عبدالرحیم مدنی
زمان: ۰۸:۰۳:۱۷ - تاریخ: ۱۳۹۳/۰۵/۲۴
ممنون از مطالب مفیدتون
نویسنده: maryam
زمان: ۲۱:۰۲:۱۵ - تاریخ: ۱۳۹۵/۰۴/۱۸
سلام خسته نباشید
میخواستم بپرسم چرا یک شیپ سه بعدی رو تو فتوشاپ با ctrl+T کوچیک میکنم لبه های شکل دندانه ای میشه؟ برای کوچیک کردن ی شیپ باید چکار کنم؟
ممنونم
پاسخ: 
دندانه ای شدن shape بستگی به فرمت و تراکم پیکسلی آن دارد، به طور مثال تصاویر وکتور (برداری) معمولا انعطاف پذیری بیشتری دارند تا تصاویر پیکسلی، در هر صورت می توانید از مقادیر درصدی W و H که نماد عرض و ارتفاع هستند نیز استفاده کنید (پس از انتخاب شکل با Ctrl + T در منوی بالایی).
نویسنده: محمد
زمان: ۰۰:۵۷:۴۴ - تاریخ: ۱۳۹۵/۰۶/۰۳
سلام من میخوام یه گیف را باحجم 815 کیلوبایت واتر مارک زدم بعد واتر مارک حجمش شد 8 مگ از این توضیحات شما پیش برم حجم گیف کم میشه؟
پاسخ: 
بله، البته برای تصاویر GIF بهتر است ابتدا فریم ها بهینه شوند و سپس فایل نهایی.
نویسنده: samira
زمان: ۱۰:۴۰:۳۰ - تاریخ: ۱۳۹۵/۰۷/۱۳
سلام ممنون از مقاله خوبتون. میشه در رابطه با چگونگی کاهش حجم تصاویر چند تا سایت معرفی کنید
ممنون میشم
پاسخ: 
لطفا آدرس زیر را در مرورگر وارد کنید:
https://www.google.com/search?q=reduce+image+file+size
نویسنده: نیوشا آریامنش
زمان: ۰۲:۳۴:۴۸ - تاریخ: ۱۳۹۵/۰۷/۲۹
سلام متشکرم از اطلاعات خوبتون
من برای یه سازمانی باید عکس با عمق رنگی 24 بیت تهیه کنم ولی فوتوشاپ من 8 و 16 و 32 بیتی رو ساپورت می کنه من روی 32 بیتی کار کردم نمی دونم باید چی بکنم؟؟
و یه سوال دیگه هم دارم وقتی روی 32 بیت کار کردم امکان ذخیره ی عکس از فوتوشاپ به صورت jpg وجود نداره باید چی کار بکنم؟؟؟
بازم سپاس
پاسخ: 
معمولا قابلیت های برنامه ها در این خصوص محدود است که فتوشاپ نیز از این قاعده مستثنی نیست! می توانید تصاویرتان را به صورت 16 بیتی و یا 32 بیتی با یک فرمت دیگر (مانند PNG) ذخیره کرده و سپس تبدیل به فرمت JPG کنید، البته باید برنامه های تبدیل تصویر را امتحان کنید و ببینید آیا قابلیت تبدیل بیت تصاویر بدون افت کیفیت را دارند یا خیر! در غیر این صورت باید سایر برنامه های ویرایش تصویر مانند Paint ویندوز را امتحان کنید!




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

4 × 2
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...