فرقی ندارد که یک وبلاگ، فروشگاه آنلاین یا یک وب سایت داشته باشید در هر صورت می خواهید جذاب به نظر برسد. اما فراموش نکنید باید هر تصویری را که آپلود می کنید ، بهینه سازی کرده باشید.
زمانی که در مورد چگونگی بهینه سازی تصاویر سایت صحبت می کنیم، باید به این 3 مورد فکر کنید:
1. زیبا سازی تصاویر
2. لود شدن سریع عکس ها.
3. بهینه سازی تصاویر برای ایندکس راحت تر آنها در موتورهای جستجو
بیشتر مقالات آموزشی موجود در بستر اینترنت ، فقط از یک جنبه بهینه‌سازی به قضیه نگاه می کنند. اما قصد داریم که در این پست تمام سه مورد را پوشش داده و در مورد آنها صحبت کنیم.
شما می توانید تصاویر را با ابزارهای ساده و با کاربرد آسان بهینه کنید – نیازی به فتوشاپ نیست. هر چند با استفاده از نرم افزار فتوشاپ ، بسیار ساده می توانید فرآیند بهینه سازی را انجام دهید.
انتخاب صحیح فرمت فایل : 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 آن را درخواست کنید.
تغییر سایز تصویر برای بهینه سازی، سرعت و ظاهر صفحه
برای صفحات وب باید تعادلی بین رزولوشن و سایز تصاویر پیدا کنید. هر جا که رزولوشن بالاتر باشد، سایز عکس بیشتر خواهد بود.
در دنیای پرینت، رزولوشن بالا بسیار مهم است. اما روی وب سایت، عکس های با رزولوشن و سایز بالا، سرعت صفحه وب سایت را کاهش می دهند. در نتیجه این اتفاق به تجربه کاربری ضربه می زند و در نهایت امتیاز موتور جستجو نیز کاهش پیدا خواهد کرد.
عکس های بزرگ که لود شدن آن ها کند است، برای مخاطبان مخصوصاً کسانی که از موبایل استفاده می کنند ، بسیار عذاب آور خواهد بود.
مواقعی وجود دارد که می خواهید از تصاویر بزرگ درقسمت hero وبسایت استفاده کنید. اگر از تصاویر با کیفیت پایین استفاده می کنید و سعی می کنید آنها را بزرگ کنید ، باعث کاهش کیفیت و تار بنظر رسیدن آن خواهید شد.
بنابراین چگونه باید تعادل بین سایز و کیفیت رابه وجود آورد؟
ابتدا باید درک کنید که “اندازه” یک اصطلاح نسبی است. آنچه برای چاپ نیاز دارید معمولاً بسیار بیشتر از آنچه برای یک وب سایت نیاز دارید ، بزرگتر است. در اینجا مروری بر سه جنبه اصلی که “اندازه” را تشکیل می دهند، خواهیم داشت:
حجم یا سایز فایل بهینه
یک تصویر 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 برش دادیم. عکس بالایی از ماگ سفید قهوه، کمی از جای فضای مناسب خود خارج شد، بنابراین آن را با عکسی تعویض کردیم که از لحاظ استایل و رنگ به دو عکس دیگر شباهت بیشتری داشتند.
از انجایی که سایز همه عکس ها یکی است و جهت گیری آن ها نیز یکسان است، به همین دلیل همه در یک ستون عالی جا گرفته اند و پاراگراف ها نیز یکدست و منظم هستند و دیگر هیچ تنظیمی برای آن ها نیاز نیست
خب، حالا که سایز عکس ها تغییر کردند و ظاهر و نظم مناسبی نیز یافتند، چگونه می توان عکس ها را برای موتورهای جستجو بهینه سازی کرد؟
بهینه سازی تصاویر برای موتورهای جستجو
انتخاب درست نام فایل
اکثر افراد در مورد نام فایل های خود فکر نمی کنند. مثلا یک عکس را با این عنوان “Photo1.jpg” یا “Screen Shot 2018-06-02 at 3.41.15 PM” در سایت خود آپلود کنند. اگر این نام ها برای شما هم آشناست، بهتر است که کمی زمان بدهید و قبل از آپلود کردن عکس روی وبسایت، نام آن را تغییر دهید. چرا؟ چون انجام این کار باعث مدیریت راحت ترعکس ها می شود. بسته به اینکه عکس های شما دقیقا کجا به صورت آنلاین ظاهر می شوند،اینکار می تواند سئو سایت شما را بهبود بخشد. بهتر است که از حروف انگلیسی کوچک و اعداد بین 0 تا 9 انتخاب کنید. از علامت های اختصاری و فاصله استفاده نکنید.
نوشتن کپشن و متن جایگزین تصاویر
زمانی که افراد عکسی را روی وبسایتشان آپلود می کنند، اغلب فراموش می کنند که در مورد آن اطلاعاتی هم بدهند.این اطلاعات نیز مانند نام فایل می تواند به ارتقای سئوی شما کمک کند.
تگ های Alt یا متن جایگزین برای میانگین بازدیدکننده های شما قابل مشاهده نیستند اما یک ایده پایه ای به موتور جستجو می دهد و به آن می گوید که این عکس در مورد چیست. بنابراین زمانی که عکسی را در سایت خود آپلود می کنید ، مطمئن شوید که قسمت متن جایگزین را با عبارتی پر کرده اید که عکس شما را شرح می دهد. ترجیحا بهتر است در این قسمت از کلمات کلیدی هدف استفاده کنید. (متن جایگزین همچنین ازلحاظ بصری به بازدیدکنندگان کم بینا کمک می کند تا از سایت شما با کمک نرم افزار های مبتنی بر صدا، استفاده کنند.، بنابراین یکی از راه های خوب برای ارتقای قابلیت دسترسی سایت می باشد.)
این مطلب میتونه کمکت کنه!متن جایگزین تصاویر | خاصیت آلت
نام های فایل و متن جایگزین، مخصوصا برای سئوی صفحات مربوط به محصول مهم هستند. همچنین می توانید یک کپشن مناسب به عکس اضافه کنید، زیرا افراد کپشن ها را بیشتر از متن های دیگر داخل وبسایت مطالعه می کنند.
*نکته:برای بهبود وضعیت سئو، تگ alt و کپشن ها را پر کنید، اما در استفاده از کلمات کلیدی زیاده روی نکنید. می توانید یک عکس را به طور دقیق شرح دهید و از کلمات کلیدی تکراری و بی ربط استفاده نکنید زیرا ممکن است گوگل شما را جریمه کند.
استفاده از تصاویر مرتبط با موضوع متن
عکس هایی را انتخاب کنید که به چیزی که تکست شما می گوید، مرتبط باشد. یک عکس که با اطلاعات مرتبط (کلمات کلیدی هدف) احاطه شده باشد، امتیاز بهتری می گیرد.
این راهکار همچنین به شما کمک می کند تا از کلیشه ها به دور باشید. اگر وبسایت شما یک سایت آموزشی است، مثلا نباید هنگام سئو ازعکس سیب استفاده کنید. عکس معلمان، دانش آموزان و همکلاسیان می تواند برای خوانندگان جذاب تر و به موضوع مرتبط تر باشد.
بهترین ابزارهای بهینه سازی عکس
همانطور که قبلا هم اشاره کردیم، اکثر نرم افزارهای ویرایش عکس دارای تنظیمات بهینه سازی و فشرده سازی هستند.
غیر از نرم افزارهای ویرایش عکس، ابزارهای قدرتمندی برای بهینه سازی تصویر نیز وجود دارند که می توانید برای بهینه سازی عکس ها برای وبسایت خود فقط با چند کلیک از آن ها استفاده کنید.
به شما پیشنهاد می کنیم که این ابزارها را برای بهینه سازی عکس ها قبل از آپلود در وردپرس استفاده کنید، مخصوصا اگر بسیار ایده آل گرا هستید.
این روش به ذخیره فضای دیسک روی حساب میزبان وردپرس کمک می کند و کیفیت و سرعت عکس را تضمین می کند.
بهینه سازی تصاویر سایت با فوتوشاپ
فتوشاپ ادوبی یک نرم افزار مناسب با ویژگی هایی برای ذخیره عکس و بهینه سازی آن روی وبسایت است. در این برنامه می توانید به سادگی عکس را باز کنید و روی فایل کلیک کرده و گزینه save for web را بزنید. این کار یک باکس دیالوگ جدید را باز می کند. در سمت راست، می توانید فرمت های مختلف عکس را تنظیم کنید. برای فرمت jpeg، گزینه های مختلفی برای کیفیت عکس دیده می شود. زمانی که این گزینه ها را انتخاب می کنید، سایز فایل شما در سمت چپ نشان داده می شود.
بهینه سازی تصاویر با GIMP
این برنامه رایگان است و یک منبع پیشنهادی محسوب می شود. می توان از آن برای بهینه سازی تصاویر سایت استفاده کرد. اما استفاده از آن ممکن است راحت نباشد.
اول از همه باید عکس را در GIMP باز کنید و سپس فایل و بعد » Export As را انتخاب کنید. با این کار جعبه دیالوگ فایل باز می شود. یک نام جدید برای فایل خود انتخاب کنید و سپس روی EXPORT کلیک کنید.برای فایل های JPEG، می توانید سطح فشرده سازی را برای کاهش سایز عکس انتخاب کنید. در نهایت، روی export کلیک کنید و تصویر بهینه سازی شده را ذخیره کنید.
بهینه سازی تصاویر با TinyPNG
TinyPNG یک ابزار رایگان است که از تکنیک فشرده سازی هوشمند برای کاهش سایز فایل های PNG استفاده می کند. تمام کاری که باید انجام دهید، این است که وارد وبسایت شوید و تصاویر خود را آپلود کنید.با این کار تصاویر فشرده سازی می شوند و به شما لینک دانلود می دهند. می توانید از وبسایت خواهر آن به نام TinyJPG برای فشرده سازی این فایل های jpeg نیز استفاده کنید.
برای افراد ماهرتر در این زمینه، یک 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 و هم کیچینگ را ارائه می دهد.
نتیجه گیری
اگر از ابتدا به بهینه سازی تصاویر سایت نپردازید، بنابراین همیشه باید دوباره کاری کنید. بهینه سازی تصاویر سایت باعث ایجاد تفاوت بالایی در سرعت سایت شما می شود و کاربران تان از شما تشکر خواهند کرد. کاملا واضح است وبسایت هایی که سرعت بالاتری برای سئو دارند، احتمال دیده شدنشان در نتایج و افزایش امتیاز آن ها در موتور جستجو بیشتر خواهد بود.
اگرچه که موارد موجود در چک لیست بسیار زیاد هستند اما زمانی که از نکاتی که در پروسه های بالا هستند، استفاده کنید، تاثیر زیادی را در سرعت مشاهده می کنید (پس بهتر است که این مطلب را نشانه گزاری کرده و بعدا به آن مجددا سر بزنید).
علاوه بر آن، طی کردن این مراحل باعث بهتر شدن تصاویر سایت شده و به لود شدن سریع تر وبسایت شما کمک می کند و در نتیجه فواید بی شماری برای سئوی خواهد داشت. پس همیشه از عادات صحیح برای تصاویر وبسایت استفاده کنید تا فواید آن را در کل وبسایت خود مشاهده کنید.
