فهرست عناوین
زمانی که در مورد چگونگی بهینه سازی تصاویر سایت صحبت می‌کنیم، باید به این 3 مورد فکر کنید:
1. زیبا سازی تصاویر
2. لود شدن سریع عکس ها
3. بهینه سازی تصاویر برای ایندکس راحت تر آنها در موتورهای جستجو
بیشتر مقالات آموزشی موجود در بستر اینترنت، فقط از یک جنبه بهینه‌سازی به قضیه نگاه می‌کنند. اما قصد داریم که در این پست تمام سه مورد را پوشش داده و در مورد آنها صحبت کنیم.
بهترین ابزارهای بهینه سازی عکس
همانطور که قبلا هم اشاره کردیم، اکثر نرم افزارهای ویرایش عکس دارای تنظیمات بهینه سازی و فشرده سازی هستند.
غیر از نرم افزارهای ویرایش عکس، ابزارهای قدرتمندی برای بهینه سازی تصویر نیز وجود دارند که می‌توانید برای بهینه سازی عکس‌ها برای وبسایت خود فقط با چند کلیک از آنها استفاده کنید.
به شما پیشنهاد می‌کنیم که این ابزارها را برای بهینه سازی عکس‌ها قبل از آپلود در وردپرس استفاده کنید، مخصوصا اگر بسیار ایده آل گرا هستید.
این روش به ذخیره فضای دیسک روی حساب میزبان وردپرس کمک می‌کند و کیفیت و سرعت عکس را تضمین می‌کند.
بهینه سازی تصاویر سایت با فوتوشاپ
فتوشاپ ادوبی یک نرم افزار مناسب با ویژگی‌هایی برای ذخیره عکس و بهینه سازی آن روی وبسایت است. در این برنامه می‌توانید به سادگی عکس را باز کنید و روی فایل کلیک کرده و گزینه save for web را بزنید. این کار یک باکس دیالوگ جدید را باز می‌کند.
در سمت راست، می‌توانید فرمت‌های مختلف عکس را تنظیم کنید. برای فرمت jpeg، گزینه‌های مختلفی برای کیفیت عکس دیده می‌شود. زمانی که این گزینه‌ها را انتخاب میکنید، سایز فایل شما در سمت چپ نشان داده می‌شود.
بهینه سازی تصاویر با GIMP
این برنامه رایگان است و یک منبع پیشنهادی محسوب می‌شود. میتوان از آن برای بهینه سازی تصاویر سایت استفاده کرد. اما استفاده از آن ممکن است راحت نباشد.
اول از همه باید عکس را در GIMP باز کنید و سپس فایل و بعد » Export As را انتخاب کنید. با این کار جعبه دیالوگ فایل باز می‌شود. یک نام جدید برای فایل خود انتخاب کنید و سپس روی EXPORT کلیک کنید.
برای فایل‌های JPEG، می‌توانید سطح فشرده سازی را برای کاهش سایز عکس انتخاب کنید. در نهایت، روی export کلیک کنید و تصویر بهینه سازی شده را ذخیره کنید.
بهینه سازی تصاویر با TinyPNG
TinyPNG یک ابزار رایگان است که از تکنیک فشرده سازی هوشمند برای کاهش سایز فایل‌های PNG استفاده می‌کند. تمام کاری که باید انجام دهید، این است که وارد وبسایت شوید و تصاویر خود را آپلود کنید. با این کار تصاویر فشرده سازی می‌شوند و به شما لینک دانلود می‌دهند.
برای افراد ماهرتر در این زمینه، یک API برای انتقال دادن اتوماتیک عکس‌ها وجود دارد و برای تازه کاران، از پلاگین وردپرس استفاده می‌شود که به طور اتوماتیک، این کار را برای شما انجام میدهد.
بهینه سازی تصاویر سایت با JPEG Mini
JPEG Mini از تکنولوژی فشرده سازی استفاده می‌کند که سایز عکس‌ها را بدون تاثیر گذاشتن روی کیفیتشان تغییر میدهد. همچنین می‌توانید کیفیت عکس اصلی را با عکس فشرده سازی شده مقایسه کنید تا مطمئن شوید.
می توانید ازاین وبسایت به صورت رایگان استفاده کنید یا اینکه برنامه را برای کامپیوتر خود خریداری کنید. آنها همچنین یک API پولی نیز دارند که سرور شما را به صورت اتوماتیک به کار می‌اندازد.
بهینه سازی تصاویر با ImageOptim
ImageOptim به شما اجازه میدهد تا تصاویر را بدون از دست دادن ذره ای کیفیت، بهینه سازی کرده و بهترین پارامترهای فشرده سازی و از بین بردن رنگ‌های غیر ضروری را روی آنها پیاده کنید.
بهینه سازی تصاویر سایت، لازمه افزایش سرعت سایت
استفاده از عکس‌های با کیفیت اما با حجم کم میتواند سرعت لود شدن سایت را تا حد زیادی ارتقا دهد. افزایش سرعت سایت موجب بهبود سئو سایت می‌گردد. استفاده از عکس‌ها و تصاویر بهینه علاوه بر بالا بردن سرعت سایت از پرش کاربر جلوگیری می‌نماید. این موضوعی است که بسیاری از سایت‌ها درگیر آن اند و در جهت رفع آن تلاش می‌کنند.
تاثیر تصاویر بهینه در GTmetrix
یکی از پارامتر‌هایی که جی تی متریکس بر اساس آن به سرعت سایت و حجم صفحه نمره میدهد تصاویر است. در قسمت زیر مشاهده میکنید که سایز این صفحه حدود 1 مگابایت است، بنابراین قرار دادن تصاویر پرحجم میتواند سئو سایت شمارا به خطر بیاندازد.
در بخش waterfall این سایت نیز میتوان بررسی کرد که تصاویری که بهینه نیستند چه تاثیری در میزان سرعت سایت خواهند داشت.
برای مثال عکس قرار گرفته در کادر قرمز زیر هر هنگام لود سایت 173 میلی ثانیه یا به عبارتی 3.4 ثانیه زمان میبرد که این عکس در صفحه نمایش پیدا کند.
بهترین پلاگین‌های بهینه سازی تصاویر سایت برای وردپرس
باور ما این است که بهترین زمان برای بهینه سازی تصاویر سایت، قبل از آپلود آنها در وردپرس است. اگرچه در صورتی که سایت شما چند نویسنده داشته باشد، می‌توانید از راه حل اتوماتیک استفاده کنید، سپس پلاگین فشرده سازی تصویر وردپرس را نیز امتحان کنید.
در این قسمت لیستی از بهترین پلاگین‌های فشرده سازی عکس وردپرس را به شما معرفی می‌کنیم:
1. Optimole – یک پلاگین معروف ساخته شده توسط یک تیم
2. EWWW Image Optimizer
3. Compress JPEG & PNG images – پلاگین ساخته شده توسط تیم TinyPNG که در بالا هم اشاره کردیم.
4. Imagify – پلاگین معروف WP rocket
5. ShortPixel Image Optimizer
6. WP Smush
7. reSmush.it
استفاده از این پلاگین‌ها به شما در بالا بردن سرعت وبسایتتان کمک می‌کند.
دو چیز جدا از بهینه سازی تصویر وجود دارد که به طرز ویژه ای در افزایش سرعت وبسایت شما تاثیرگذار است و که آن هم استفاده از پلاگین کیچینگ وردپرس و CDN وردپرس می‌باشد. به جای این دو همچنین می‌توانید از کمپانی میزبانی وردپرس مدیریت شده استفاده کنید، زیرا اغلب هم CDN و هم کیچینگ را ارائه میدهد.
بهینه سازی تصاویر برای موتورهای جستجو
انتخاب درست نام فایل
اکثر افراد در مورد نام فایل‌های خود فکر نمی کنند. مثلا یک عکس را با این عنوان “Photo1.jpg” یا “Screen Shot 2018-06-02 at 3.41.15 PM” در سایت خود آپلود کنند. اگر این نام‌ها برای شما هم آشناست، بهتر است که کمی زمان بدهید و قبل از آپلود کردن عکس روی وبسایت، نام آن را تغییر دهید. چرا؟
چون انجام این کار باعث مدیریت مناسب عکس‌ها می‌شود. بسته به اینکه عکس‌های شما دقیقا کجا به صورت آنلاین ظاهر می‌شوند، اینکار میتواند سئو سایت شما را بهبود بخشد. بهتر است که از حروف انگلیسی کوچک و اعداد بین 0 تا 9 انتخاب کنید. از علامت‌های اختصاری و فاصله استفاده نکنید.
نوشتن کپشن و متن جایگزین تصاویر
زمانی که افراد عکسی را روی وبسایتشان آپلود می‌کنند، اغلب فراموش می‌کنند که در مورد آن اطلاعاتی هم بدهند.این اطلاعات نیز مانند نام فایل میتواند به ارتقای سئوی شما کمک کند.
تگ‌های Alt یا متن جایگزین برای میانگین بازدیدکننده‌های شما قابل مشاهده نیستند اما یک ایده پایه ای به موتور جستجو میدهد و به آن می‌گوید که این عکس در مورد چیست.
بنابراین زمانی که عکسی را در سایت خود آپلود میکنید، مطمئن شوید که قسمت متن جایگزین را با عبارتی پر کرده اید که عکس شما را شرح میدهد. ترجیحا بهتر است در این قسمت از کلمات کلیدی هدف استفاده کنید.
(متن جایگزین همچنین ازلحاظ بصری به بازدیدکنندگان کم بینا کمک می‌کند تا از سایت شما با کمک نرم افزارهای مبتنی بر صدا، استفاده کنند.، بنابراین یکی از راه‌های خوب برای ارتقای قابلیت دسترسی سایت می‌باشد.)
نام‌های فایل و متن جایگزین، مخصوصا برای سئوی صفحات مربوط به محصول مهم هستند. همچنین می‌توانید یک کپشن مناسب به عکس اضافه کنید، زیرا افراد کپشن‌ها را بیشتر از متن‌های دیگر داخل وبسایت مطالعه می‌کنند.
*نکته:برای بهبود وضعیت سئو، تگ alt و کپشن‌ها را پر کنید، اما در استفاده از کلمات کلیدی زیاده روی نکنید. می‌توانید یک عکس را به طور دقیق شرح دهید و از کلمات کلیدی تکراری و بی ربط استفاده نکنید زیرا ممکن است گوگل شما را جریمه کند.
استفاده از تصاویر مرتبط با موضوع متن
عکس‌هایی را انتخاب کنید که به چیزی که تکست شما می‌گوید، مرتبط باشد. یک عکس که با اطلاعات مرتبط (کلمات کلیدی هدف) احاطه شده باشد، امتیاز بهتری می‌گیرد.
این راهکار همچنین به شما کمک می‌کند تا از کلیشه‌ها به دور باشید. اگر وبسایت شما یک سایت آموزشی است، مثلا نباید هنگام سئو ازعکس سیب استفاده کنید. عکس معلمان، دانش آموزان و همکلاسیان میتواند برای خوانندگان جذاب تر و به موضوع مرتبط تر باشد.
انتخاب صحیح فرمت فایل: PNG یا JPG
اگر بین فایل‌های مختلف تصاویر مثل JPG, PNG, GIF و SVG سر در گم شده اید، بهتر است که برای وب سایت خود یا از فایل JPEG یا فرمت PNG استفاده کنید. هر کدام از فرمت‌های تصاویر مزایا و معایبی دارند. اما در بیشتر مواقع باید موارد زیر را به یاد داشته باشید:
- تصاویر معمولی: عکس‌ها باید به صورت JPG ذخیره شوند و بارگذاری شوند. این نوع فایل میتواند تمام رنگ‌ها را در عکس نشان دهد. همچنین میتواند سایز کوچک و قابل استفاده داشته باشد. فایل‌های JPEG سایز کوچکتری نسبت به تصاویر png دارند.
- گرافیک ها: در قسمت گرافیک‌ها مخصوصاً آنهایی که از محل‌های فلت و یکپارچه برای رنگ استفاده می‌کنند، باید از فرمت PNG استفاده شود. گرافیک شامل این طراحی ها، اینفوگرافیک‌ها و عکس ها، تعداد زیادی تکست درون عکس‌ها وهمچنین لوگوها می‌باشد.
- حجم عکس: PNGها نسبت به JPEGها کیفیت بالاتری دارند اما معمولاً حجم و سایز آنها بزرگتر است.
- قابلیت متمایز کننده: PNG مانند هم خانواده هایشان از جمله SVG، از سیستم دقیقی برای تشکیل عکس استفاده می‌کنند. بنابراین می‌توانید روی آن زوم کنید؛ بدون اینکه کیفیت عکس کاهش پیدا کند. همچنین از پس زمینه‌های شفاف، بی رنگ یا ترنسپرنت نیزپشتیبانی می‌کنند. در صورت امکان تصاویر png را بجای 8 بیتی، 24 بیتی ذخیره کنید. زیرا کیفیت عکس بهتر بوده و رنگ‌های بیشتری را ساپورت می‌کند.
- اگر بخواهیم از یک عکس همراه با متن روی آن استفاده کنیم، چه فرمتی مناسب است؟ اگر بخش بیشتر آن از تصویر تشکیل شده از فرمت JPEG استفاده کنید.
بیشتر برنامه‌های مربوط به تصاویر به شما اجازه می‌دهند تا هنگام ارسال و یا ذخیره عکس برای وب سایت از فرمت JPG یا PNG استفاده کنید و نوع فایل را خودتان انتخاب کنید. همچنین ابزارهای آنلاین رایگان مانند zamzar نیز وجود دارند که می‌توانند فرمت فایل تصویری شما را تغییر دهند. مثلاً می‌توانید فایل را از PNG به JPEG تغییر دهید اما هرگز نمی توانید به درستی فرمت یک فایل را از JPEG به PNG تغییر دهید. زیرا فایل jpeg یک فرمت منحصر به فرد و فشرده دارد و دیتای تصویر هنگام فشرده سازی شدن، از بین می‌‌رود. بنابراین نمی توانید آن را برگردانید.
به طور مثال اگر فقط فایل JPEG لوگوی خود را دارید، باید به جای اینکه سعی کنید مهندسی معکوس انجام دهید و PNG را از یک فایل JPEG تهیه کنید، مستقیماً از طراح لوگوی خود، نسخه PNG آن را درخواست کنید.
تغییر سایز تصویر برای بهینه سازی، سرعت و ظاهر صفحه
برای صفحات وب باید تعادلی بین رزولوشن و سایز تصاویر پیدا کنید. هر جا که رزولوشن بالاتر باشد، سایز عکس بیشتر خواهد بود.
در دنیای پرینت و چاپ، رزولوشن بالا بسیار مهم است. اما روی وب سایت، عکس‌های با رزولوشن و سایز بالا، سرعت صفحه وب سایت را کاهش می‌دهند. در نتیجه این اتفاق به تجربه کاربری ضربه می‌‌زند و در نهایت امتیاز موتور جستجو نیز کاهش پیدا خواهد کرد.
عکس‌های بزرگ که لود شدن آنها کند است، برای مخاطبان مخصوصاً کسانی که از موبایل استفاده می‌کنند، بسیار عذاب آور خواهد بود.
مواقعی وجود دارد که می‌خواهید از تصاویر بزرگ درقسمت بالای صفحه وبسایت استفاده کنید. اگر از تصاویر با کیفیت پایین استفاده کرده و سعی کنید که آنها را بزرگ کنید، باعث کاهش کیفیت و تار بنظر رسیدن آن خواهید شد.
بنابراین چگونه باید تعادل بین سایز و کیفیت را به وجود آورد؟
ابتدا باید درک کنید که “اندازه” یک اصطلاح نسبی است. آنچه برای چاپ نیاز دارید معمولاً بسیار بیشتر از آنچه برای یک وب سایت نیاز دارید، بزرگتر است. در اینجا مروری بر سه جنبه اصلی که “اندازه” را تشکیل می‌دهند، خواهیم داشت:
- حجم یا سایز فایل بهینه: یک تصویر 15 مگابایتی تصویری بزرگ است. یک تصویر 125 کیلوبایتی تصویر معقول تری می‌باشد. اگر سایز تصویر شما بزرگ بود، نشان دهنده این است که ابعاد عکس شما خیلی بزرگ است یا اینکه رزولوشن آن بیش از حد بالاست.
- ابعاد عکس: ابعاد واقعی عکس شما به پیکسل. احتمالا در مورد عکس‌های سنتی 4×6, 5×7 یا 8×10 فکر کرده اید، اما ابعاد تصاویر در وب با پیکسل‌ها اندازه گیری می‌شوند. مثلا برای یک عکس معمولی روی وبسایت یا وبلاگ میتوان ابعاد پیکسل 795×300 را انتخاب کرد.
- رزولوشن مناسب برای تصاویر وبسایت: رزولوشن همان کیفیت یا چگالی عکس شماست که بر اساس نقاط در هر اینچ اندازه گیری می‌شود. یک پرینتر تخصصی ممکن است به تصاویری نیاز داشته باشد که حداقل 300 dpi باشند. اما رایج ترین نمایشگرهای کامپیوتری از تصاویر 72 یا 92 dpi استفاده می‌کنند. مقداری بیش از این عدد سایز عکس غیر ضروری و بیهوده محسوب می‌شود. زمانی که از برنامه‌های ویرایش تصویر استفاده می‌کنیم، با گزینه ای روبرو هستیم که میتواند عکس‌ها را برای وب ذخیره کند و برای اینکار رزولوشن تصویر را کاهش میدهد.
چگونه سایز فایل و رزولوشن عکس را پیدا کنیم؟
سایز فایل و سایز عکس را می‌توانید در کامپیوتر خود پیدا کنید. روی فایل عکس کلیک راست کنید، سپس “Properties” را انتخاب کرده و روی “Summary” کلیک کنید. برای مک بوک ها، ctrl را با کلیک روی فایل تصویر بزنید و “Get Info.” را انتخاب کنید.
پیدا کردن رزولوشن مناسب، به برنامه‌های پیشرفته تری مانند فتوشاپ نیاز دارد اما بیشتر برنامه‌های ویرایش عکس به طور اتوماتیک عکس‌ها را با dpi پایین تری ذخیره می‌کنند که برای استفاده تصاویر در وب مناسب تر است.
راهنمای سایز و رزولوشن مناسب تصویر
اکنون که راه‌های متفاوت را برای توضیح سایز عکس می‌دانید، در این قسمت قوانینی را به شما معرفی می‌کنیم که بهتر است آنها را به یاد بسپارید.
- سایز فایل بهینه: عکس‌های بزرگ یا عکس‌های پس زمینه کامل، نباید بیشتر از 1 مگابایت باشند.
- بیشتر گرافیک‌های وبسایت میتواند 300 کیلوبایت یا کم تر باشد.
- اگر از تصویر پس زمینه کامل برای صفحه استفاده میکنید، پیشنهاد می‌کنیم تصویری را آپلود کنید که پهنای آن 2000 پیکسل باشد.
- رزولوشن برای عکس‌های وبسایت: اگر گزینه “save for web” در اختیارتان قرار داده شده، از آن استفاده کنید زیرا رزولوشن بهینه را به شما خواهد داد. این گزینه در فتوشاپ وجود دارد.
- می‌توانید عکس بزرگ را کوچک تر کنید، اما بزرگ کردن عکس‌های کوچک کار بسیار سختی است: اگر تصویر شما 100×100 پیکسل باشد و بخواهید آن را به یک بنر یوتیوبی با 2560×1440 پیکسل تبدیل کنید، نتیجه تار از آب در خواهد آمد.
اگر در مورد مفهوم حجم فکر کرده باشید، می‌فهمید که نمی توان با یک گالون آب، یک استخر را پر کرد.
اگر تصویر برای وبسایت بیش از حد بزرگ بود، چه کار کنیم؟
اگر یک دوربین دیجیتالی خوب دارید، احتمالا عکس‌هایی با آن می‌گیرید که حجم بالایی دارد و بزرگ تر از نیاز وبسایت شماست. سایت‌هایی که عکس‌هایی با کیفیت بالا دارند، سایز فایل‌های آن نیز بزرگ تر هستند. اگر حجم عکس شما بیشتر از 1 مگابایت باشد، می‌توانید برای استفاده از آن در وبسایت خود، اقدامات زیر را انجام دهید:
- تغییر سایز یا ابعاد تصویر: اگر پهنای عکس شما 5000 پیکسل است، می‌توانید به راحتی سایز آن را به 2000 یا 1200 پیکسل یا حتی کوچکتر کاهش دهید. با این کارحجم فایل شما نیز کاهش پیدا می‌یابد. زمانی که سایز آن را تغییر می‌دهید، مطمئن شوید که نسبت ابعاد تصویر را حفظ کرده اید.
- کاهش رزولولوشن تصویر: بیشتر برنامه‌های عکس به طور اتوماتیک رزولوشن عکس شما را فشرده می‌کنند تا برای وبسایت مناسب باشد که معمولا 72 یا 92 dpi است. شما نیز می‌توانید با فتوشاپ از آپشن “save for web” استفاده کنید. گزینه “Save As” در بسیاری از برنامه‌های مربوط به عکس وجود دارد که میتواند سطح کیفیت را از طریق آن تنظیم کرد.
- فشرده سازی تصویر با ابزار انلاین: عکس را با یک ابزار رایگان مانند TinyPNG یا TinyJPG فشرده کنید. هر دو برنامه سایز فایل را بدون تغییر کیفیت آن، کاهش می‌دهند.
یکسان سازی اندازه و استایل تصاویر
اگر عکس‌ها روی صفحات وبسایت استایل و سایز یکسان و یکدستی داشته باشند، بهتر به نظر می‌رسند. یکدست بودن همچنین به یکسان بودن تکست ها، ستون‌ها و دیگر اطلاعات میز روی صفحه شما کمک می‌کند. برای اینکه منظور ما را بهتر بفهمید، نگاهی به مثال زیر بیاندازید.
مثلا عکس‌های موجود در وبسایت “Make-Believe Coffee” همگی از ابعاد مختلفی هستند. یکی از آنها عمودی است، در حالی که دیگری افقی قرار گرفته است. این اتفاق باعث می‌شود که بی نظمی در وبسایت شما به وجود بیاید.
در مثال بعد، هر عکس را با ابعاد 1000×760 برش دادیم. عکس بالایی از ماگ سفید قهوه، کمی از جای فضای مناسب خود خارج شد، بنابراین آن را با عکسی تعویض کردیم که از لحاظ استایل و رنگ به دو عکس دیگر شباهت بیشتری داشتند.
از انجایی که سایز همه عکس‌ها یکی است و جهت گیری آنها نیز یکسان است، به همین دلیل همه در یک ستون عالی جا گرفته اند و پاراگراف‌ها نیز یکدست و منظم هستند و دیگر هیچ تنظیمی برای آنها نیاز نیست
خب، حالا که سایز عکس‌ها تغییر کردند و ظاهر و نظم مناسبی نیز یافتند، چگونه میتوان عکس‌ها را برای موتورهای جستجو بهینه سازی کرد؟
نتیجه گیری
اگر از ابتدا به بهینه سازی تصاویر سایت نپردازید، بنابراین همیشه باید دوباره کاری کنید. بهینه سازی تصاویر سایت باعث ایجاد تفاوت بالایی در سرعت سایت شما می‌شود و کاربران تان از شما تشکر خواهند کرد. کاملا واضح است وبسایت‌هایی که سرعت بالاتری برای سئو دارند، احتمال دیده شدنشان در نتایج و افزایش امتیاز آنها در موتور جستجو بیشتر خواهد بود.
اگرچه که موارد موجود در چک لیست بسیار زیاد هستند اما زمانی که از نکاتی که در پروسه‌های بالا هستند، استفاده کنید، تاثیر زیادی را در سرعت مشاهده میکنید (پس بهتر است که این مطلب را نشانه گزاری کرده و بعدا به آن مجددا سر بزنید).
علاوه بر آن، طی کردن این مراحل باعث بهتر شدن تصاویر سایت شده و به لود شدن سریع تر وبسایت شما کمک می‌کند و در نتیجه فواید بی شماری برای سئوی خواهد داشت. پس همیشه از عادات صحیح برای تصاویر وبسایت استفاده کنید تا فواید آن را در کل وبسایت خود مشاهده کنید.
منبع مقاله : jimdo