تصاویر عامل مهم در سرعت سایت هستند .سرعت سایت هم برای رتبه بندی و هم برای تجربه کاربری مهم است .
بسیاری از شرکت ها یک فرصت آسان برای بهبود در این زمینه را از دست می دهند: بهینه سازی تصویر.
طی چند سال گذشته ، سرعت از نظر میزان بازدید و رتبه بندی سایت بسیار مهم شده است. مردم سایت های سریع می خواهند . و از آنجا که کاربران سایت های سریع می خواهند، گوگل نیز سرعت سایت را جزء فاکتورهای مهم می داند . می توان گفت هر چقدر سرعت لود سایت بهتر باشد رنک گوگل بالاتر است . سایتهایی که سریع هستند بهتر از سایتهای کند در رتبه بالاتری در موتور جستجوی Google دارند.
موارد موثر بر سرعت صفحه وجود دارد که شما به توسعه دهندگان فنی نیاز دارید . اما همه مسائل بارگیری و لود سایت پیچیده نیستند یا به دانش فنی زیادی نیاز ندارند. در این حالت ، موضوعی که درباره آن صحبت می کنیم حجم تصویر است. تصاویر اغلب مسئله اصلی سایت های دارای لود آهسته وب سایت است.
خوشبختانه بهینه سازی تصاویر کار ساده ای است.حال که می دانیم تصاویر مهمترین عامل در سرعت سایت هست می توانیم با دقت در حجم و اندازه تصاویر سرعت لود سایت خود را بهبود ببخشیم .
فهرست مطالب
تصاویر نقش مهم و مثبتی در سایت دارند
تصاویر می توانند نقش مهمی را در سرعت لود یک سایت ایفا کنند آنها فایل های بزرگی هستند که موجب کندی بارگزاری صفحه می شوند. اما حذف آنها گزینه ی خوبی نیست.
پس سعی کنید تصاویر در وبسایت شما وجود داشته باشد مخصوصا اگر دارای فروشگاه اینترنتی هستید.
زیرا بیش از ۵۰ درصد مشتریان تمایل دارند قبل از خرید محصول تصویر آن را مشاهده کنند.
تصاویر جلوه ی خاصی صفحات شما می دهد و کاربران را درگیر می کند تا کل صفحه را مرور کنند و ماندگاری بیشتری در وبسایت شما داشته باشند.
تصاویر و سرعت لود صفحات سایت
هر زمان که سایت ها را از نظر بارگذاری سرعت لود صفحه بررسی می کنیم ، تقریباً همیشه تصاویر بخش مهمی از آن هستند. باید تصاویر را قبل از بارگذاری به سایت تغییر اندازه و فشرده کنیم .
امروز ما سایت هایی می بینیم که مملو از تصاویر هستند و حجم تصاویر چندین مگابایت هستند . حجم کد و محتوای یک صفحه از سایت نباید بیشتر از 1 مگابایت باشد و این شامل کد ، متن ، تصاویر و … می باشد . پس چطور یک صفحه سایت می تواند با چندین تصویر با حجم های چندین مگابایتی باشد . متاسفانه این مشکل به صورت مکرر در سایت ها دیده می شود .
هیچ صفحه سایت نباید هرگز به این بزرگی باشد. در صورت وجود ، باید تعداد تصاویر را کمتر و تصاویر را بهینه سازی کنیم .
صرف دانستن نحوه اندازه گیری، فشرده سازی، ذخیره صحیح تصویر و اجرای فرایندی برای اطمینان از این امر می تواند درصد زیادی از مشکلات مربوط به خحم صفحه را برطرف کند.
چه موقع بیراهه رفتیم؟
سالهای پیش اینترنت و سرعت آن پسیار پائین بود ( شاید برخی از شما به یاد بیاورید اینترنت های دیالاپ dial up internet ) در آن سایت ها مثل امروز نمی توانستند حجم بالائی داشته باشند . حجم هر صفحه به طور کلی زیر 100–250 کیلوبایت بود که آن شامل html ، تصاویر ، اسکریپت نویسی و همه موارد دیگر می شد . اما امروز خوشبختانه اینترنت سریع شده است .
وب سایتی با حجم 1 مگابایتی لود آن بیش از 15 دقیقه طول می کشید، بله 15 دقیقه . البته آن موقع گوگل وچود نداشت .
اکنون که ما در دوره ارتباطات سریع هستیم ، سایت ها دقت کافی بر وزن و حجم صفحه بسیار ندارند و در نتیجه سایت هایی ایجاد می شوند که می توانند به اندازه 25 مگابایت در هر صفحه باشند (داستان واقعی). مسئله این است که از بعضی جهات ، بارگذاری صفحات وب سایت اکنون حتی بیشتر از آن زمان اهمیت دارند. امروز ، ما نه تنها پارامترهای محدود کننده ای مانند تلفن همراه داریم ، بلکه رتبه بندی شما در Google تحت تأثیر بارگذاری آهسته صفحه قرار دارد.
اینترنت سریع شده اما همچنان سرعت وب سایت مهم است
البته امروز توقع بازدید کنندگان نیز تغییر کرده و حوصله لود شدن سایت کند و آهسته را ندارند و به راحتی آنرا بسته و در جستجوی گوگل وب سایت دیگری را انتخاب و باز می کنند .
بله در گذشته سطح رقابت ، انتظارات بازدید کنندگان ، نحوه بازاریابی اینترنتی ، انواع دستگاه ها متصل یه اینترنت ( مانند گوشی موبایل ) و .. به حساسیت امروز نبود . پس هنوز باید یکی از دغدغه های دارندگان وب سایت سرعت لود سایتشان باشد . سرعت سایت هنوز از اهمیت برخوردار می باشد .
اگر می خواهید از ویژگی های سایت شرکتی مطلع شوید می توانید مقاله طراحی سایت شرکت را مطالعه کنید .
از آنجا که بارگیری صفحه در روزهای ابتدایی اینترنت از اهمیت بسیاری برخوردار بود ، شرکتها قبلاً تصاویر را به صورت اختصاصی برای سایت و صفحه و موقعیت مورد نظر تصویر در سایت بهینه می کردند .
اکنون ، بیشتر برای تغییر اندازه و فشرده سازی تصویر به CMS (سیستم مدیریت محتوا) متکی هستیم . این بدان معنی است که در بیشتر موارد ، بهینه سازی تصویر پس از بارگذاری اتفاق می افتد. این روند منجر به وزن بیش از حد بزرگ و سنگین پرونده برای تصاویر می شود ، که سرعت صفحه را کاهش می دهد – و اگر به طور گسترده در سراسر سایت اجرا شود ، می تواند منجر به رنک پایین شود .
چرا نمی توانید برای تغییر اندازه / فشرده سازی تصاویر خود به CMS اعتماد کنید؟
هنگامی که از CMS برای تغییر اندازه تصویر استفاده می کنید ، معمولاً فقط اندازه و ابعاد تصویر را تغییر می دهد و تصویر را فشرده نمی کند.
اگر تصویر را فشرده می کند (مانند وردپرس) ، نرخ از پیش تعیین شده است. این بدان معنی است که حتی اگر کار مناسبی انجام دهد ، پرونده های شما به طور متوسط 15 تا 30 درصد تصاویر بهینه می شود و این کافی نیست .
این می تواند در سایتهایی که در هر صفحه چندین تصویر دارند بسیار مشکل ساز شود. بیشتر اوقات در ممیزی های انجام شده ، تصاویر به طور متوسط 40 تا 60 درصد از وزن و حجم صفحه را تشکیل می دهند ، با پردازش تصاویر قبل از بارگذاری ، با 30 تا 50 درصد صرفه جویی در وزن تصویر.
بنابراین ، قبل از بارگذاری تصاویر خود ، چه کاری باید انجام دهید؟
آماده سازی تصاویر برای سایت شما – تصاویر مهمترین عامل در سرعت سایت
تغییر اندازه تصاویر – تصاویر مهمترین عامل در سرعت سایت
تغییر اندازه تصویر بسیار مهم است. اگر شما یک تصویر با عرض 2400 پیکسل دارید ، و تمام آنچه شما نیاز دارید یک تصویر با عرض 500 پیکسل در سایت است ،. حتی تغییر اندازه داخل سیستم CMS شما برای فشرده سازی تمام اطلاعات موجود در تصویر 2400 پیکسل به آن نیاز دارد. این باعث می شود تصویر شما برای بسیار بزرگتر باشد.
اکنون ، اکثر تیم ها شخصی گرافیست برای تغییر اندازه و فشرده سازی تصویر ندارند. این بدان معناست که اگرچه باید چندین اندازه تصویر بهینه شده برای دسک تاپ ، تبلت و موبایل داشته باشیم ، اما ممکن است منابع لازم برای این کار را نداشته باشید.
در این صورت ، مهمترین کاری که می توان با هر تصویر در سایت انجام داد ذخیره آن در بزرگترین اندازه فیزیکی مورد نیاز است ، اما نه بزرگتر. این بدان معنی است که اگر به سه تصویر نیاز دارید و 800 در 600 پیکسل بزرگترین اندازه مورد نیاز است ، مطمئن شوید که اندازه تصویر اصلی را در یک برنامه مناسب مانند فتوشاپ به 800 در600 تغییر داده اید. سپس ، حتی اگر هنوز مجبور به تغییر اندازه در CMS هستید ، از همان ابتدا با اندازه پرونده کوچکتر کار کنید.
انواع تصاویر File types
بنابراین ، ابتدا باید اندازه تصویر را تغییر دهید ، فشرده و سپس تصویر را بارگذاری کرد. با این حال ، نه تنها تغییر اندازه و فشرده سازی قبل از بارگذاری مسئله مهمی است ، بلکه نوع تصویر نیز مهم است .
بسیاری از افرادی که این روزها در یک سایت تصاویر را مدیریت می کنند ، اغلب تجربه ای از انواع تصویر ندارند ، بنابراین در صورت استفاده از PNG از JPG و بالعکس استفاده می کنند.
چرا این مهم است؟ وقتی از نوع پرونده اشتباه استفاده می کنید ، می توانید وزن فایل را افزایش دهید ، که گاهی اوقات کاملاً چشمگیر. بنابراین ، از چه نوع پرونده هایی استفاده می کنید؟
انواع مختلفی از پرونده ها وجود دارد که متداول ترین آنها JPG ، GIF ، PNG و WebP است. از این موارد ، مواردی که قرار است بیشتر از همه استفاده کنید JPG و PNG هستند.
درباره GIF یا WebP چه میدانید ؟
نباید از GIF استفاده کند مگر اینکه یک تصویر را متحرک کند. برای تصاویر متحرک می توانید از تصاویر با پسوند GIF استفاده کنید . و گرچه WebP در الگوریتم های فشرده سازی با کیفیت بالا و بدون از دست دادن نکیفیت می باشد ، در حال حاضر پشتیبانی چندانی ندارد و برای کار با هر مرورگری خارج از مرورگرهای پشتیبانی شده مانند Opera و Chrome باید از برنامه نویسی ویژه استفاده کرد. .
این بدان معنا نیست که نمی توانید از آن استفاده کنید ، اما به این معنی است که بدون ایجاد راه حل مناسب برای مرورگرهای پشتیبانی نشده نمی توانید از آن استفاده کنید. برای اکثر افراد ، راحت تر است با قالب های استاندارد JPG و PNG استفاده کنند . هنگامی که پشتیبانی آن را کامل کنیم ، WebP به استاندارد تبدیل خواهد شد. این می تواند تصاویر را با وزن و حجم پرونده بسیار کمتری با کیفیت بسیار بالاتر ذخیره شود .
نکته: اگر می خواهید از WebP استفاده کنید ، می توانید از مبدل تصویر گوگل استفاده کنید .
انتخاب نوع فایل مناسب
اغلب اوقات ، افراد نوع پرونده خود را با توجه به آنچه به عنوان پیش فرض در برنامه تصویر نشان داده می شود ، انتخاب می کنند. با این وجود ، انتخاب اشتباه نوع فایل می تواند باعث شود تصاویر شما از آنچه لازم هستند بزرگتر شوند.
همانطور که جدول بالا نشان می دهد ، چندین مورد برای اینکه JPG یا PNG را انتخاب کنید وجود دارد.
وقتی از قالب اشتباه استفاده می کنیم ، می توانیم به طور قابل توجهی وزن و اندازه را اضافه کنیم. علاوه بر این ، با استفاده از یک مدل فشرده سازی با ضرر (در جایی که داده ها از بین می روند) ، مانند JPG ، ممکن است هنر خط به نظر واضح یا ناواضح باشد.
بنابراین ، با استفاده از PNG-8 مناسب با کاهش رنگ ، می توانیم حجم تصویر خود را بیش از 95 درصد کاهش دهیم. تصویر 110 کیلو بایت می تواند به 1.41 کیلوبایت کاهش یابد.
این ممکن است زیاد به نظر برسد زیرا یک تصویر است ، اما اگر در یک صفحه 10 آرم حامی مالی داشته باشید ، ممکن است صرفاً در آن صفحه صرفه جویی 40 تا 100 کیلو بایت را مشاهده کنید.
درباره تصاویر SVG
SVG یک فناوری است که در آن تصاویر در صفحه رمزگذاری می شوند. مشکلات مربوط به SVG این است که برای ایجاد و پیاده سازی آنها به شخصی با دانش احتیاج دارد ، بلاک های بزرگی از کد را ایجاد می کند ، عناصر تصویری پیچیده را به خوبی مدیریت نمی کند و پشتیبانی از آن در مرورگرهای قدیمی دشوار است.
با این حال ، اگر هیچ یک از این پارامترها برای شما مهم نیست ، می تواند راه حل بسیار خوبی برای تصاویر مانند آرم سایت باشد که در همه صفحات و در انواع دستگاه ها نشان داده می شود ، یا هنگام ایجاد اینفوگرافیک های ساده. اگرچه توجه داشته باشید که ایجاد هزاران کد کد برای نمایش تصاویر لزوما باعث صرفه جویی در وزن صفحه نمی شود.
اگر از SVG استفاده می کنید ، در اینجا چند نکته آورده شده است:
اطمینان حاصل کنید که تصاویر SVG سبک تر از تصاویر ذخیره شده شما هستند (می توانند بزرگتر باشند).
اطمینان حاصل کنید که برچسب ها به درستی اجرا شده اند تا در صورت لزوم از مزایای برچسب “alt” در یک تصویر معمولی بهره مند شوید.
اگر اشتراک گذاری اجتماعی برای تصاویر شما مهم است ، باید یک فایل تصویری سنتی تهیه کنید که می تواند برای اشتراک گذاری اجتماعی بارگیری شود.
اگر تعداد زیادی از کاربران از مرورگرهای قدیمی استفاده می کنید ، از SVG استفاده نکنید. اینها SVG به خوبی اداره نمی شوند.
نکته: ابزاری مناسب برای ایجاد تصاویر SVG می توانید از برنامه Inkscape اسنفاده است.