‫راھنمای شماره ‪١‬‬

‫فرمت ھاي عكس در وب‬

‫عكسھا داراي فرمت ھاي زيادي مي باشند ولي فرمتھايي كه در وب بكار‬
‫برده مي شوند عبارتند از ‪:‬‬
‫‪Graphic interchange Format - gif‬‬
‫‪Joint Photographic Experts Group - jpg‬‬
‫‪Portable Network Graphics - Png‬‬

‫فرمت‪JPEG :‬‬

‫پسوند فايل آن ‪ jpeg‬يا ‪ jpg‬مي باشد‪ JPEG.‬ﯾکی از بھترﯾن فرمت ھای‬

‫استاندارد ذخيره سازی تصاوﯾر است ‪ .‬تمام تصاوﯾری که تحت ‪ JPEG‬ذخيره‬
‫شده اند دارای کيفيت مناسب و قابل قبولی ھستند‪ .‬اين فرمت جھت ارسال‬
‫تصاوير تمام رنگي استفاده مي گردد‪ ،‬مخصوصاً كه در اين فرمت مي توانيد‬
‫‪ ١۶‬ميليون رنگ مختلف را نمايش دھيد‪ .‬فشرده سازی تصاوﯾر در وب بسيار‬
‫مھم است‪ .‬زﯾرا تعداد زﯾادی از کاربران اﯾنترنت در اﯾران از خطوط ارتباطی‬
‫نامناسب و ‪ ISP‬ھای غير استاندارد استفاده می کنند‪ .‬در واقع ‪ JPEG‬به دليل‬
‫فشرده سازی بسيار خوبی که دارد معروف شده است‪ .‬فرمت ‪JPEG‬‬
‫تصاوﯾری را که از رنگھای بی شماری بر خوردارند را به خوبی فشرده می‬
‫کند‪ .‬البته استفاده از اﯾن فرمت باعث کاھش نا محسوسی در کيفيت تصوﯾر‬
‫می شود‪ .‬در واقع می توان گفت اﯾن فرمت فشرده سازی مقداری از‬
‫اطالعات تصوﯾر را کاھش می دھد‪.‬‬

‫به دليل اينكه ‪ jpeg‬يك قالب تصوير با اتالف است ‪ ،‬تعادلي بين كيفيت تصوير‬
‫و اندازه ي فايل برقرار مي شود ‪ .‬با وجود اينكه قالب ‪ jpeg‬تصاوير رنگي با‬
‫كيفيت باالي ‪ ٢٤‬بيت را نسبت به ‪ GIF‬در فضاي كوچكتر ذخيره مي كنند ‪،‬‬
‫ذخيره كردن ديسك ھاي با ارزش در وب باعث حفظ فضاي گران بھاي ديسك‬
‫و زمان بارگذاري كمتري خواھد شد ‪ .‬نمونه ايي از كيفيت در مقابل تعادل بين‬
‫اندازه فايل در ‪ JPEG‬در زﯾر نشان داده شده است ‪ .‬با كمي صرفنظر از‬
‫كيفيت مي توان به حجم باالتري از ديسك دست يافت‪.‬‬

‫‪8-Bit Gif - 41.6KB‬‬ ‫‪100% JPEG - 65.3KB‬‬

‫‪7-Bit Gif - 33.7KB‬‬ ‫‪80% JPEG - 32.8KB‬‬

‫‪6-Bit Gif - 26.7KB‬‬ ‫‪60% JPEG - 19.8KB‬‬

 ‫‪5-Bit Gif - 20.8KB‬‬ ‫‪40% JPEG - 12.6KB‬‬

‫‪4-Bit Gif - 15.1KB‬‬ ‫‪20% JPEG - 9.24KB‬‬

‫ممكن است كه قالب ‪ JPEG‬تصاوير عكسبرداري شده را به خوبي فشرده‬

‫كند ‪ ،‬اما اين كار براي خط كشي ھا ‪ ،‬زمينه ھايي با تصاوير رنگي ‪ ،‬يا متن‬
‫ھا مناسب نيست ‪ .‬در زﯾر مي توانيد اندازه ھاي دوفايل ‪ JPEG‬و ‪ GIF‬را باھم‬
‫مقايسه كنيد ‪ .‬اما انتخاب بين اين دو خيلی ساده است ‪ .‬عكس ھا را با‬
‫‪JPEG‬و شكل ھا را با ‪ GIF‬نمايش دھيد‪.‬‬
 ‫‪6-Bit Gif - 11.4KB‬‬ ‫‪60% JPEG - 23.3KB‬‬

‫‪Photograph‬‬

‫‪6-Bit Gif - 26.7KB‬‬ ‫‪60% JPEG - 19.8KB‬‬

‫فرمت ‪GIF‬‬

‫فرمت ‪ GIF‬که توسط ‪ CompuServe‬اﯾجاد شده است به علت استفاده‬

‫زﯾاد در اﯾنترنت و صفحات وب مشھور شده است‪ .‬بدليل اﯾنکه اﯾن فرمت تا‬
‫‪ ٢٥٦‬رنگ محدود شده است‪ ،‬تصاوﯾری که با آن ذخيره شده اند از کيفيت‬
‫کمتری برخوردارند و فشرده سازی تصاوﯾر تحت فرمت ھای ‪ JPEG‬و ‪ PNG‬بھتر‬
‫است‪ .‬ﯾکی از مھمترﯾن علل راﯾج شدن ‪ GIF‬پشتيبانی مرورگرھای وب‬
‫قدﯾمی با آن است و اکثر طراحان صفحه ترجيح می دھند تصاوﯾر ساﯾت خود‬
‫را با اﯾن فرمت فشرده سازی کنند‪.‬‬

‫از ويژگي ھاي ديگر آن ‪ interlacing , transparency , animation‬است البته‬

‫محبوبيت آن بيشتر براي حجم كم آن است ‪.‬‬
‫‪ Transparency‬به شفافيت يك عكس مي گويند كه در اصطالح پشت نما‬
‫ناميده مي شود اين ويژگي است كه يك عكس آنقدر شفاف است كه شما‬
‫مي توانيد تا تصوير متن با رنگ زير آن عكس را ببينيد ‪.‬‬

‫‪: interlacing‬گاھي وقت ھا شما منتظر مي شويد تا يك عكس به دليل‬

‫بزرگي اندازه بارگذاري شود بعد آنرا ببينيداما اگر عكسي ويژگي ‪interlacing‬‬
‫راداشته باشد كم كم عكس كامل خواھد شد يعني خط به خط به عكس‬
‫اضافه مي شود تاكامل بارگذاري شود ‪.‬‬

‫‪ Animation‬عكسھاي متحرك را مي گويند و فقط اين فرمت ھست كه از‬

‫متحرك سازي عكس حمايت مي كند ‪ .‬عكس ھايي با فرمت ‪ . jpeg‬حدود‬
‫‪ ١٦‬ميليون رنگ را پشتيباني مي كنند نسبت به فرمت ‪ gif‬از حجم باالتر و‬
‫كيفيت بھتري برخوردار است ‪.‬‬

‫در مورد انتخاب يكي از فرمت ھاي تصويري ‪ GIF‬يا ‪ JPG‬بايد توجه داشته‬
‫باشيد كه تركيب و نوع تصوير بسيار تعيين كننده است كه به مرور با تجربه‬
‫بھترين روش را به دست خواھيد آورد مثال ً براي كارھاي گرافيكي كه خودتان‬
‫توليد كرده ايد و از رنگھاي كمي در آن استفاده شده است‪ ،‬استفاده از‬
‫فرمت ‪ GIF‬فايل شما را با كيفيت قابل قبولي بسيار فشرده مي كند‪ .‬لوگوي‬
‫يادبگير را در تصوير زير مي بينيد در اين تصوير از فرمت ‪ GIF‬استفاده شده‬
‫است‪ .‬اين تصوير داراي حجم ‪ ٢.٩‬كيلوبايت است در حاليكه فرمت ‪ JPG‬آن با‬
‫كيفيت مناسب سايز آن در حدود ‪ ٥‬كيلوبايت است‪.‬‬

‫اما فرمت ‪ JPG‬براي عكسھا يا تصاويري كه در آنھا رنگھاي زيادي به كار رفته‬
‫است با كيفيت مناسب مي توان آن را فشرده كرد در زير يك نمونه را‬
‫مشاھده مي كنيد‪.‬‬

‫فايل اصلي در حدود ‪ ٤٠٠‬كيلو بايت حجم داشته و بعد از فشرده كردن‬
‫عكس باال بدست آمده است كه ‪ ١٨.١‬كيلو بايت حجم دارد ‪.‬ولي كيفيت‬
‫آن قابل قبول است‪.‬‬

‫مشخصات و ويژگي ھاي فرمت ‪PNG :‬‬

‫قالب گرافيك قابل حمل شبكه ) ‪ ( PNG‬يكي از قالب ھايی است که تمام‬
‫ويژگي ھاي ‪ gif‬را دارد به غير از ‪. Animation‬فرمت ‪ png‬عمر كمتر و‬
‫تواناييھاي بيشتري دارد ‪ .‬مخلوطي از كيفيت ‪ jpeg‬و حجم كم ‪ gif‬است‪.‬‬

‫الگوريتم فشرده سازي ‪ png‬تا اندازه ايي بھتر از فشرده سازي ‪ gif‬به نظر‬
‫مي آيد ‪ .‬اما تنھا اين مساله باعث نمي شود كه از تصاور ‪ gif‬دست بكشيم ‪،‬‬
‫مشكالت سازگاري مرورگرھا ھنوز باعث درد سر قالب‪ png‬است‪.‬‬

‫تصاوير ‪ PNG‬مانع رنگ ھشت بيتي كه در تصاوير ‪ gif‬به طور عادي وجود‬
‫داشت را شكسته است ‪ ،‬اما با وجود درجه ي فشرده سازيي كه در ‪png‬‬
‫ھاي امروزي موجود است عاقالنه به نظر نمي رسد كه فايل ‪ png‬را در ھمه‬
‫ي حاالت نسبت به ‪ Jpeg‬ترجيح دھيم ‪ .‬از امكانات چشمگيري كه در مورد‬
‫تصاوير ‪ PNG‬وجود دارد ‪ ،‬شفاف سازي بھبود يافته را مي توان نام برد ‪ .‬فايل‬
‫ھاي ‪ PNG‬بيشتر از انكه بخواھند محدود به تنھا يك رنگ براي ماسك ھاي‬
‫شفافيت باشند ‪ ،‬مي توانند تا ‪ ٢٥٦‬رنگ در يك ماسك استفاده كنند ‪.‬بنابراين‬
‫آن ھا لبه ھاي شفاف خود را صاف و اثرات سايه را از بين مي برند‪.‬‬

‫با وجود تمام اين امكانات بزرگ ‪ ،‬تعجب بر انگيز است كه چرا ‪ PNG‬به صورت‬
‫آنالين خيلي متداول نيست ‪ .‬دليل اصلي اين است كه فروشندگان مرورگرھا‬
‫ھنوز به طور پيوسته تصاوير ‪ PNG‬را پشتيباني نمي كنند ‪ .‬حتي وقتي كه‬
‫فرمت تصوير پشتيباني مي شود ‪ ،‬بسياري از امكانات مانند شفافيت به طور‬
‫كامل پياده سازي نمي شوند ‪ .‬در حقيقت ‪ ،‬ھيچ مرورگري به غير از موزيال ‪١‬‬
‫و به بعد تصوير ‪ PNG‬را به طور كامل پشتيباني نمي كند كه بر روي اين قالب‬
‫تكيه كند ‪ .‬بنابراين به طراحان وب ھشدار داده شده است كه از به كار بردن‬
‫‪PNG‬اجتناب كنند مگر اين كه مرروگرھاي حساس به آن را به كار برند‪.‬‬
 ‫بھينه سازی عکس ھا‬
‫• از ‪ Crop‬کردن خالقانه عکس ھا برای کاھش ساﯾز استفاده نماﯾيد‪.‬‬
‫مثالی برای انجام اﯾن کار در زﯾر مشاھده فرماﯾيد‪:‬‬

‫بعد از ‪crop‬‬ ‫قبل از ‪crop‬‬

‫در شکل باال از فضای اطراف عکس که اھميت چندانی نداشت نداشت صرف‬
‫نظر کردﯾم با اﯾن کار ساﯾز فاﯾل را به اندازه ی قابل توجھی کاھش دادﯾم‪.‬‬
‫کليک می کنيم و با‬ ‫برای انجام ‪ crop‬در برنامه ‪ photoshop‬روی گزﯾنه‬
‫درگ کردن‪ ،‬فضای مورد نظر را انتخاب کنيد ‪.‬‬

‫کادری مانند باال در اطراف عکس خود می بينيد که با قرار دادن موس روی‬
‫اﯾن کادر‪ ،‬در کنار مربع ھای کوچک می توانيد ابعاد اﯾن کادر را تغيير دھيد ‪.‬با‬
‫دابل کليک روی صفحه ﯾا فشردن کليد ‪ enter‬عکس شما ‪ crop‬می شود‪.‬‬
‫• روش دﯾگر بھينه کردن عکس استفاده از گزﯾنه ‪File -> Save for Web‬‬
‫در ‪ Photoshop‬است ‪ .‬با انتخاب اﯾن گزﯾنه پنجره زﯾر نماﯾش داده می‬
‫شود‪.‬‬

‫عکس اصلی خود‬ ‫در باالی صفحه شما با انتخاب سربرگ )‪original ، (tab‬‬
‫را می بينيد و با انتخاب ‪ optimized‬می توانيد عکس بھينه را مشاھده کنيد‬
‫و با انتخاب ‪ 2-up‬در صفحه مانند شکل فوق ھم عکس اصلی در سمت چپ‬
‫و ھم عکس بھينه را در سمت راست صفحه مشاھده می نماﯾيد‪.‬‬
‫با انتخاب ‪ 4-up‬ھم عکس اصلی و ھم بھينه و ھم چنين عکس را با کيفيت‬
‫ھای پاﯾين می توانيد مشاھده فرماﯾيد‪.‬‬
 ‫‪D‬‬

‫‪C‬‬ ‫‪A‬‬ ‫‪B‬‬

‫در قسمت ‪ A‬تصوﯾر و در زﯾر آن نام و ساﯾز عکس اصلی خود را مـشاھده‬
‫می کنيد‪.‬‬
‫در قسمت ‪ B‬تصوﯾر و در زﯾر آن نام و ساﯾز عکس بھينه شده را مشاھده می‬
‫کنيد‪ .‬و در زﯾر ساﯾز ميزان زمانی که طول می کشد تا عکس با سرعت‬
‫مشخص شده نماﯾش داده شود را مشاھده می فرماﯾيد‪ .‬در شکل باال‬
‫عکس با سرعت ‪ ٢٨.٨‬کيلو بيت در ثانيه‪ ٣١ ،‬ثانيه برای نماﯾش زمان می‬
‫گيرد‪.‬‬
‫در قسمت ‪ C‬ميزان ‪ ZOOM‬را می توانيد تغيير دھيد‪.‬‬
‫در قسمت ‪ D‬تنظيمات بھينه سازی را مشاھده می فرماﯾيد‪.‬‬
‫سرعت را ميتوانيد با کليک روی فلش باالی صفحه انتخاب نماﯾيد ‪) .‬سرعت‬
‫معمول در اﯾران ‪ ۵۶.۶‬کيلو باﯾت در ثانيه می باشد‪(.‬‬

‫برای بھينه سازی عکس ھای ‪ JPEG‬مانند کادر زﯾر از ليست ‪ Preset‬می‬
‫توانيد ﯾکی از گزﯾنه ھای ‪ JPEG LOW , JPEG HIGH , JPEG MEDIUM‬را‬
‫انتخاب کنيد که با اﯾن کار در حقيقت کيفيت عکس را تغيير ميدھيد‪ .‬از مقدار‬
‫‪ high‬برای وب استفاده نکنيد‪ .‬معموال باال بردن کيفيت باالی ‪ ٨٠‬درصد رنج‬
‫کيفيت تفاوت زﯾادی برای چشم ما ندارد‪ ،‬اما ساﯾز فاﯾل را باال می برد ‪.‬‬

‫با انتخاب گزﯾنه ‪ Progressive‬نحوه نماﯾش عکس را بھبود می دھيم ‪.‬‬

‫در روش ‪ baseline‬عکس ﯾکباره ظاھر می شود و تا وقتی که عکس به‬
‫صورت کامل لود نشده کاربر نمی تواند عکس را ببيند ولی در ‪، Progressive‬‬
‫‪ JPEG‬عکس را به سه تا پنج سری اسکن تقسيم می کند‪ .‬اسکن اول ﯾک‬
‫ورژن از عکس را با کيفيت پاﯾين نماﯾش می دھد‪ .‬مرتبه ھای بعدی اسکن‪،‬‬
‫کيفيت عکس باال می رود تا در مرحله آخر عکس بطور کامل)‪full resolution‬‬
‫( ظاھر می شود‪.‬‬
‫اگر می خواھيد عکس شما با فرمت‪ GIF‬ذخيره شود از ليست نماﯾش داه‬
‫شده در شکل باال ﯾکی از ‪ ٧‬گزﯾنه نخست را که با ‪ GIF‬شروع می شوند را‬
‫انتخاب نماﯾيد و ﯾا از کادر زﯾر ‪ preset‬از ليست کشوﯾی اول سمت چپ گزﯾنه‬
‫‪ GIF‬را انتخاب نماﯾيد ‪.‬‬
‫کادر زﯾر برای عکس ھای ‪ GIF‬باز می شود‪.‬‬
‫• اگر در عکس لبه ھاﯾی وجود دارد با تفاوت رنگی زﯾاد سعی در محو کردن‬
‫آن بنماﯾيد )با استفاده از ‪ BLUR‬در قسمت ‪.( D‬‬

‫با انتخاب گزﯾنه ‪ Transparency‬اﯾن امکان را می دھيم که پشت صفحه ای‬

‫برای عکس در نظر نگيرد‪ .‬اگر اﯾن گزﯾنه را انتخاب نکنيد برای عکس شما‬
‫پشت صفحه ای را به رنگ ‪ Matte‬در نظر می گيرد و اگر برای ‪ Matte‬نيز‬
‫رنگی انتخاب نکرده باشيد پشت صفحه را سفيد در نظر می گيرد‪.‬‬

‫گزﯾنه ‪ Interlaced‬در صورت فعال بودن باعث می شود عکس به تدرﯾج با‬
‫خطوط افقی در ھم رفته ظاھر می شود ‪ ،‬بنابراﯾن قبل از لود شدن و نماﯾش‬
‫کامل عکس ‪ ،‬بـيننده می توانـد چـيزی از عکـس را بـبيند‪ .‬البته اﯾن باعـث‬
‫می شود ساﯾز فاﯾل باال برود‪.‬‬
‫‪ lossy‬ميزان دﯾتا ) جزﯾيات ( را کاھش می دھد‪ ،‬متوسط‬ ‫در اﯾن پنجره‬
‫تغييرات را می توانيد از ‪ ۵‬تا ‪ ١٠‬در نظر بگيرﯾد ‪ ،‬البته در برخی موارد تا ‪۵٠‬‬
‫می توانيد تغيير دھيد ‪ .‬با تغييرات ‪ lossy‬می توانيد ساﯾز فاﯾل را ‪ ۵‬تا ‪۴٠‬‬
‫درصد کاھش دھيد‪.‬‬

‫نکته ‪ :‬شما از ‪ lossy‬نميتوانيد ھمراه ‪ interlaced‬استفاده کنيد‪.‬‬

‫برای کاھش تعداد رنگ ھا که باعث کاھش ساﯾز فاﯾل می شود می توانيد‬
‫از متد ھاﯾی استفاده کنيد که ليست اﯾن متد ھا را در شکل زﯾر می بينيد ‪.‬‬

‫‪ : Web snap‬با تغيير اﯾن قسمت می توانيد دامنه رنگ ھای بکار رفته در‬
‫عکس خود را کاھش دھيد ‪.‬‬
‫سر برگی )‪ ( Tab‬در قسمت ‪ D‬به نام ‪ IMAGE SIZE‬قرار دارد که شما می‬
‫توانيد ابعاد عکس خود را تغيير دھيد ‪ ،‬ھر چه ابعاد کوچکتر شود ساﯾز فاﯾل‬
‫کاھش می ﯾابد‪.‬‬
‫با انتخاب گزﯾنه ‪ Constrain Proportions‬اﯾن قابليت را اﯾجاد می کنيد که اگر‬
‫شما تغييری در طول )ﯾا عرض ( دھيد متناسب با آن عرض) ﯾا طول( تغيير‬
‫می کند ‪ .‬با کليک روی دکمه ‪ Apply‬تغييرات شما در عکس اعمال می‬
‫شود‪.‬‬

‫• بھتر است از ‪ 8-bit PNG‬استفاده کنيد؛ نه ‪.24-bit PNG‬‬

‫• وجود ‪ noise‬در عکس باعث افزاﯾش ساﯾز آن می شود ‪ ،‬برای کاھش نوﯾز‬
‫می توانيد در برنامه ‪ Photoshop‬با انتخاب ‪filter > noise > reduce noise‬‬
‫ميزان نوﯾز را کاھش دھيد ‪.‬‬

‫• شما می توانيد با باز کردن عکس خود از طرﯾق برنامه ‪ paint‬و ذخيره‬
‫مجدد عکس در اﯾن برنامه ساﯾز عکس ‪ JPEG‬را کاھش دھيد‪.‬برای اﯾنکار روی‬
‫عکس مورد نظر کليک راست می کنيد و ‪:‬‬
‫عکس در برنامه ‪ paint‬باز می شود ‪ ،‬در اﯾن برنامه ‪ file -> save‬را انتخاب‬
‫کنيد‪.‬‬