یکی از مشکلاتی که اغلب کابران اینترنت از آن رنج می برند دیر لود شدن عکس های سایت می باشد البته سرعت اینترنت نقش بسزایی دارد ولی رعایت چند نکته اساسی باعث می شود با توجه به سرعت کم اینترنت هم، عکس ها با سرعت بالاتری لود شوند.بطور کلی عکس ها سایزهای متفاوتی دارند که حجم یک عکس بستگی به تعداد پیکسل های عکس دارد که هر چه این تعداد پیکسل ها بیشتر باشد حجم بیشتر است و بالعکس.حال فرض کنید اگر هنگام ایجاد و طراحی یک وب سایت از عکس های حجیم استفاده شود، کاربر مدت زمان بیشتری را منتظر می ماند تا عکس در مرورگر به نمایش درآید و حتی گاهی اوقات کاربر از دانلود عکس موردنظر صرفنظر می کند، و همین امر یک ضعف در ایجاد وب سایت می باشد. در ادامه به چگونگی ایجاد یک عکس مناسب برای استفاده در وب سایت می پردازیم.
1- پیکسل های تصاویر :
کم کردن تعداد پیکسل های عکس تا حدی که کیفیت آن تغییر محسوسی نداشته باشد. که معمولا برای عکس هایی که در اینترنت استفاده می شود کمتر از 1000 پیکسل می باشد که با توجه به کاربرد عکس و استفاده در نقاط مختلف وب سایت عدد آن تغییر می کند. به عنوان مثال یک عکس ممکن هست با عرض 200 پیکسل و یا عکسی دیگر با عرض 400 پیکسل استفاده شود .( در تصاویر یک پیکسل عمودی وجود دارد و یک پیکسل افقی. زمانی که یک عکس را تغییر سایز می دهیم همیشه این نکته را در نظر داشته باشید که برای حفظ تناسب تصویر ، نرم افزار ویرایشگر به صورت خودکار عرض و ارتفاع عکس را تغییر دهد. نرم افزار های زیادی برای ویرایش و کار با عکس وجود دارد ولی یکی از بهترین گزینه های موجود نرم افزار فتوشاپ می باشد.)
نحوه تغییر حجم تصاویر با استفاده از نرم افزار فتوشاپ :
ابتدا از منوی File گزینه Open (کلید میانبر : Ctrl + O) را انتخاب کنید سپس عکس مورد نظر را از مسیر دلخواه انتخاب می کنیم. حال منوی Image را باز کرده گزینه Image Size (کلید میانبر : Ctrl + Alt + I) را انتخاب کرده، در پنجره باز شده می توان مقادیر عرض و ارتفاع و همچنین رزولیشن عکس را تغییر داد.
بخاطر داشته باشید مقدار عرض و ارتفاع عکس را بر اساس پیکسل انتخاب کنید(واحد پیکسل از باکس کشویی مقابل عرض و ارتفاع انتخاب می شود، همچنین برای حفظ تناسب عکس ، علامت زنجیر بین عرض و ارتفاع عکس باید فعال باشد.)
البته سایت هایی که تصاویر با کیفیت اصلی و بالا و وکتور های و بکگراند های طراحی را ارائه می دهند عکس را با کیفیت اصلی و بالا برای دانلود و استفاده کاربران در وب سایت قرار می دهند.
2- انتخاب فرمت عکس :
عکس ها فرمت های گوناگونی دارند که تغییر فرمت یک عکس باعث کم یا زیاد شدن حجم آن ها می شود . استفاده از فرمت jpg یا jepg باعث می شود که ضمن حذف کیفیت عکس حجم آن نیز کاهش پیدا کند. البته فرمت هایی مانند png و gif نیز در طراحی و ایجاد وب سایت استفاده می شود که با توجه به کاربرد عکس برای قسمت های مختلف وب سایت، فرمت مناسب برای تصاویر انتخاب می شود. ولی در عین حال پر کاربردترین فرمت در طراحی وب سایت jpg یا jpeg می باشد.
3- نحوه Save کردن تصاویر :
چگونگی Save کردن یک عکس برای وب سایت اهمیت فراوانی دارد چرا که نحوه درست Save کردن تصاویر برای اینترنت باعث میشود که حجم عکس به صورت چشمگیری کاهش یابد. برای Save کردن تصاویری که در طراحی وب سایت استفاده می شود از گزینه Save For Web کمک میگیریم. با استفاده از این گزینه می توانیم حجم عکس مورد نظر را به نصف یا حتی کمتر کاهش دهیم.
نحوه Save کردن تصاویر برای طراحی وب سایت در نرم افزار فتوشاپ :
برای این کار از منوی File گزینه Save For Web را انتخاب کرده (کلید میانبر : Ctrl + Alt + Shift + S) و تغییرات لازم را اعمال می نماییم.
به این نکته توجه داشته باشید که با بالا بردن درجه کیفیت عکس حجم آن نیز بالا می رود پس همیشه درجه کیفیت مناسب را انتخاب نمایید. حجم عکس ایجاد شده در زیر عکس نشان داده می شود که در مثال بالا حجم عکس 95.96 K می باشد.
نکته: در پایان فراموش نکنید برای قراردادن تصاویر در وب سایت نیز نکات ریز اما مهمی را باید رعایت کنید، مثلاً حتما هنگامی که تگ تصاویر را میگذارید برای تصویر خود عنوان انتخاب کنید.
این نکته از لحاظ سئو وب سایت شما (هنگام جستجوی کاربران در موتورهای جستجو) و رتبه سایتتان بسیار حایز اهمیت می باشد. علاوه بر این سایز برنامه نویسی تصاویر و عکس اصلی با یکدیگر برابر باشند.
برای مثال: برخی افراد تصاویر وب سایت را با سایز بالا خروجی گرفته اما هنگام برنامه نویسی با کد اندازه آن را تغییر میدهند این موضوع علاوه بر کاهش کیفیت تصاویر، باعث دیر لود شدن سایت نیز می شود. در برخی موارد حتی وب سایت شما ممکن است شکل ظاهری خود را نیز از دست دهد. در اصطلاح ریسپانسیو وب سایت (واکنش گرایی به رزولیشن های مختلف در گجت های گوناگون) شما کاهش میابد.