چگونه تصاویر را برای طراحی وب سایت و سئو ی بهتر بهینه سازی کنیم ؟

طراحی سایت در مشهد

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

هنگامی که در مورد چگونگی «بهینه سازی» تصاویر برای وب صحبت می کنیم، در مورد این سه روش فکر می کنیم : 1) زیبا نشان دادن تصاویر، 2) بالا بردن سرعت بارگذاری ، 3) ایندکس آسان برای موتورهای جستجو .

1. با تصاویر با کیفیت بالا شروع کنید

شما مجبور نیستید عکاس حرفه ای باشید که از عکس های عالی در وب سایت خود استفاده کنید. سایت هایی برای دانلود عکس با کیفیت بالا وجود دارند که در آن شما می توانید عکس های رایگان برای استفاده تجاری دانلود کنید. برخی از موارد مورد علاقه ما عبارتند از:

    Pixabay
    Unsplash
    Barn Images
    PicJumbo
    SplitShire
    Little Visuals
    ...

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

 البته، شما نمیتوانید از عکسهای موجود در وب برای همه چیز (مانند عکسهای تیم یا محصول خود) استفاده کنید. اگر شما نیاز به گرفتن عکس از محصولات خود دارید، چندین ترفند ساده وجود دارد تا عکس هایتان را حرفه ای تر کنید.

گرافیک: اگر شما به دنبال عکسی با گرافیک بیشتر هستید، هزاران ابزار جدید و آنلاین رایگان وجود دارد که می توانید از آن برای ساختن اطلاعات و عکس های خود استفاده کنید. Canva و PiktoChart را چک کنید.

 
2. از نوع فایل مناسب: JPEG یا PNG استفاده کنید

هنگام کار با تصاویر، احتمالا با یک JPEG (یا JPG) یا PNG مواجه خواهید شد. جوانب مثبت و منفی هر یک را می توانید در موارد زیر را به یاد داشته باشید:

  •     عکس ها باید به عنوان JPEG ذخیره و آپلود شوند. این نوع فایل می تواند تمامی رنگ ها را در یک عکس در یک اندازه نسبتا کوچک و کارآمد اداره کند.
  •     تصاویر گرافیکی، باید به عنوان PNG ذخیره شوند. این شامل بسیاری از طرح ها، infographics، تصاویر حاوی متن در آنها، و لوگو ها می شود. PNG ها با کیفیت بالاتر از JPEG هستند، اما معمولا با حجم بزرگتر فایل نیز همراه هستند. تصاویر PNG برخورد می کنند،  با زوم کردن کیفیت شان را از دست نمی دهند. آنها همچنین از زمینه های شفاف پشتیبانی می کنند (مناسب برای لوگو). اگر انتخاب داشته باشید، توصیه می کنیم PNG ها را به عنوان "24 بیتی" به جای "8 بیتی" به خاطر کیفیت بهتر و آرایه های طیف وسیعی از رنگ های پشتیبانی شده ذخیره کنید.
     

3. تغییر اندازه تصاویر برای بهینه سازی ظاهر و سرعت صفحه

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

زمان هایی وجود دارد که شما می خواهید از یک عکس بزرگ در وب سایت خود استفاده کنید، مانند تصویر پس زمینه. اگر از یک تصویر با کیفیت پایین استفاده می کنید و سعی کنید آن را بزرگ کنید، آن را فازی می بینید.

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

    اندازه فایل: تعداد بایت هایی که فایل در کامپیوتر شما می گیرد. یک عکس 15 مگابایتی بزرگ است. یک عکس 125 کیلوبایت بسیار منطقی است.

    اندازه تصویر: ابعاد واقعی تصویر شما، در پیکسل است. در وب، ارتفاع و عرض با پیکسل اندازه گیری می شود. بنابراین برای مثال یک تصویر معمول در یک وبسایت یا وبلاگ ممکن است 795 × 300 پیکسل باشد.

    رزولوشن: جدای از جهان چاپ، کیفیت و یا تراکم یک تصویر، با dpi (نقطه در اینچ) اندازه گیری می شود. یک چاپگر حرفه ای ممکن است حداقل 300dpi باشد. اما اکثر مانیتورهای کامپیوتری 72dpi یا 92dpi را نمایش می دهند، بنابراین هر چیزی که بالاتر از آن باشد، بیش از حد مورد استفاده قرار می گیرد و تصویر شما را به طور غیر ضروری بزرگ می کند.
 

اندازه فایل، اندازه تصویر و وضوح تصویر خود را چگونه پیدا می کنید؟

شما می توانید اندازه فایل و اندازه تصویر را درست در کامپیوتر خود پیدا کنید. اگر بر روی کامپیوتر هستید، بر روی فایل تصویر راست کلیک کنید، سپس "Properties" و سپس تب "Summary" را انتخاب کنید. روی مکینتاش، Ctrl + روی فایل تصویر کلیک کنید و "Get Info" را انتخاب کنید.

پیدا کردن رزولوشن نیاز به یک برنامه عکس پیشرفته تر مانند فتوشاپ دارد، اما اکثر برنامه های ویرایش تصویر به طور خودکار تصاویر را با یک dpi پایین تر ذخیره می کنند. نسخه وب رایگان Pixlr تصاویر خود را با رزولوشن 72dpi ارائه می دهد و Canva به شما اجازه می دهد "برای وب ذخیره کنید" که PNG را در 92dpi به شما می دهد.
 

قواعد کلی برای اندازه تصویر، اندازه فایل، و رزولوشن

حالا که روش های مختلفی را برای توصیف اندازه تصویر می دانید، در اینجا چند قاعده ی ساده ای را باید مد نظر داشته باشید:

  •     تصاویر بزرگ و یا تصاویر پس زمینه تمام صفحه نباید بیش از 1 مگابایت باشد.
  •     اکثر گرافیک وب کوچک دیگر می تواند 300KB یا کمتر باشد.
  •     اگر از یک پس زمینه تمام صفحه استفاده می کنید، شرکت طراحی سایت مشهد وب توصیه می کند آپلود تصویری با 2000 پیکسل عرض داشته باشد.
  •     اگر این گزینه را دارید، همیشه "ذخیره برای وب" را انتخاب کنید که تصویر شما را با رزولوشن مناسب برای وب می دهد.
  •     شما می توانید تصویر بزرگ را کوچکتر کنید، اما بزرگ کردن تصویر کوچک، بسیار سخت است.
     

اگر تصویر شما برای وب سایت خیلی بزرگ است چه کار می کنید؟

اگر شما یک دوربین دیجیتال خوب دارید، ممکن است عکس هایی بگیرید که چندین مگابایت بزرگتر از آنچه که برای وب سایت نیاز دارید باشد. اگر تصویر شما بیش از 1 مگابایت است، چند چیز که می توانید انجام دهید:

  •     تغییر اندازه تصویر: اگر عکس شما 5000 پیکسل عرض باشد، به راحتی می توانید آن را بسته به نحوه استفاده از آن در سایت خود، به 2000 پیکسل عرض، 1200 پیکسل عرض یا حتی کوچکتر تغییر دهید. این به طور قابل توجهی حجم فایل را کاهش می دهد. هنگام تغییر اندازه، اطمینان حاصل کنید که نسبت ها را همان طور حفظ کنید.
  •      وضوح را کاهش دهید. برنامه های عکس مانند Pixlr و Canva به طور خودکار رزولوشن تصویر خود را به اندازه (72dpi و 92dpi) کاهش می دهند. شما می توانید این کار را در فتوشاپ نیز با گزینه 'save for web' انجام دهید. شما همچنین می توانید در بسیاری از برنامه های عکس "Save As" و سپس سطح کیفیت را از آنجا تنظیم کنید.
  •      تصویر خود را از طریق یک برنامه رایگان مانند TinyPNG یا TinyJPG اجرا کنید. هر دو به طور قابل توجهی حجم فایل خود را بدون دخالت با کیفیت کاهش می دهد.

4. تصاویر را با یک اندازه و استایل کار کنید

تصاویری که در یک صفحه وب نمایش داده می شوند بهتر است از یک سبک و اندازه / نسبت سازگار استفاده شوند. هماهنگی در ترکیب متن، ستون ها و سایر اطلاعات در صفحه ، کمک می کند.

5. برای سئوی بهتر به درستی فایل تصویر را نامگذاری کنید

اکثر مردم درباره نام فایل هایشان فکر نمی کنند. آنها ممکن است یک عکس را با نام "Photo1.jpg" یا "Screen Shot 2017-06-02" نامگذاری کنند. اگر این نام ها آشنا به نظر می رسند، نام عکس های خود را قبل از اینکه آنها را در وب سایت خود آپلود کنید تغییر دهید. چرا؟ از آنجا که این کار باعث افزایش سئو می شود.

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

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

برای هماهنگی، از حروف کوچک و عددی 0-9 استفاده کنید. علائم و یا اسپیس را وارد نکنید. و بهتر است که از به جای _ از - استفاده کنید.

6. زیرنویس و متن جایگزین خود را پر کنید

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

تگهای Alt (یا متن جایگزین) برای بازدید کننده قابل مشاهده نیستند، اما آنها به موتورهای جستجو یک ایده اساسی درباره موضوع تصویر، ارائه می دهند. بنابراین هنگامی که شما یک تصویر را به سایت خود اضافه می کنید، حتما فیلد Alternative Text را با عبارتی که توصیف آنچه که عکس نشان می دهد، ترجیحا با یک کلمه کلیدی هدفمند، پر کنید.

نام فایلها و برچسبهای alt برای سئو صفحات محصول بسیار مهم هستند. یک کپشن به تصویر اضافه کنید، زیرا افراد بیشتر از هر چیز دیگری تمایل به خواندن عکسها دارند.

7. تصویر متناسب با متن را قرار دهید

تصاویری را انتخاب کنید که مربوط به آنچه که در متن گفته می شود، باشد. تصویری که توسط اطلاعات مربوطه (با کلمات کلیدی مرتبط) احاطه شده است بهتر رتبه بندی می شود.

اگر وب سایت شما در مورد آموزش و پرورش باشد، از داشتن یک عکس از یک سیب هیچ تاثیری در سئو شما ندارد. عکسهای معلمان، دانش آموزان و کلاس های درس، برای خوانندگان جالب تر و مرتبط با موضوع شما خواهد بود.