رفع خطای Properly size images و تغییر اندازه عکس

آموزش حل مشکل Properly size images

رفع خطای Serve scaled images
رفع مشکل Serve scaled images

توجه: خطای Properly size images همان خطای قدیمی Serve scaled images در جی تی متریکس هست و هر دو یک راه حل دارند.

کمتر مدیر سایتی به دنبال رفع خطای Serve scaled images در جی تی متریکس نیست! وجود چنین ارور مهمی در سایت GTMetrix.com این معنا را دارد که شما در وبسایتتان عکسی با ابعاد بزرگ برای کاربر لود می‌کنید ولی ابعاد کوچیک به آن نمایش می‌دهید. به زبان ساده امروزی حرف با عمل یکی نیست 🙂

سلام دوستان عزیز، امیدواریم حالتون خوب باشه. من پوریا آریافر هستم متخصص سئو و نویسنده این مقاله از آموزش بهینه سازی PageSpeed سایت با GTmetrix در خدمت شما هستم، می‌خواهیم در این دوره مقاله محور در سایت میزفا یک وبسایتی بهینه توسط ابزارهای آنلاین تست سرعت سایت مثل جی تی متریکس یا Pagespeed گوگل ایجاد کنیم. در همین راستا جلسه قبل درباره رفع ارور Optimize images پستی قرار دادیم. حال در این مقاله به سراغ نحوه رفع ارور Serve scaled images از سری خطاهای PageSpeed در جی تی متریکس می‌رویم و بررسی خواهیم کرد که با این آموزش رفع خطا چه اثری بر روی سئو و تجربه کاربری دارد و اگر عکس ها بهینه سازی نشوند چه اتفاقی سمت کاربر و سئو تصاویر رخ می‌دهد. چگونه عکس و تصاویر سایت خود را در جهت افزایش سرعت، بهینه سازی کنیم و روش‌های رایج بهینه سازی عکس چیست؟ ما میزفا همراه باشید.

توجه: شما برای حل کردن مشکل Serve scaled images کد جادویی نداریم که در سایت درج کنیم و این خطا را رفع کند. برخی خطاهای جی تی متریکس به سادگی با درج یک کد حل می‌شوند و بر همین مبنا دوستان و کاربران عزیز انتظار دارند همه خطاها با این شیوه به راحتی حل شوند که برای برخی خطاها و ارورهای gtmetrix امکان ندارد.

خلاصه‌ای از خطای Serve scaled images

نام: Serve scaled images
نوع: عکس
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 70%

بهینه سازی عکس یعنی چه

همان طور که در پست Optimize images اشاره کردیم وقتی از عبارت بهینه سازی عکس استفاده می‌کنیم دو روش کلی برای بهینه سازی تصاویر مد نظر است، روش اول بهینه سازی، سایز عکس ها (Serve scaled images) و کاهش حجم عکس ها (Optimize images) هست که باعث افزایش سرعت سایت می‌شود روش اول به شکل غیرمستقیم بر روی بهبود سئو سایت تاثیر می‌گذارد. روش دوم بهینه سازی عکس، استفاده از اتریبیوت های همانند title و alt در عکس ها هست که به شکل مستقیم بر روی سئو تاثیرگذار است. در PageSpeed و ابزار تست سرعت gtmetrix اشاره به بهینه نبودن سایز و حجم عکس‌ها دارد به عبارتی خطای Optimize images و خطای Serve scaled images روش اول را متذکر می‌شود و ما در این مقاله ابعاد عکس ها را کامل بررسی میکنیم و برای حل مشکل حجم عکس ها می‌توانید مقاله رفع ارور Optimize images را بخوانید. توجه داشته باشید که رفع خطای Serve scaled images مستقیم تاثیر بر روی رفع خطای Optimize images خواهد داشت. بنابراین هر دو پست را به خوبی مطالعه کنید.

علت خطای Serve scaled images در PageSpeed جی تی متریکس چیست

رفع ارور Serve scaled images
تشریح مشکل Serve scaled images

علت این خطا در جی تی متریکس به کمک این مثال زیر بسیار ساده خواهد شد:
به عکس سمت راست بالا توجه کنید، مرورگر درخواستی به سمت سرور می‌دهد برای دانلود عکسی با ابعاد ۲۴۰۰ * ۱۳۵۰ با حجم ۲.۵ مگابایت درحالی که توسط CSS عکس scale شده و به یک تصویر بند انگشتی (thumbnail) تبدیل شده است. طراحی سایت ما در استفاده از عکس‌ها اینجا مناسب نیست و داریم کاربر را به اجبار دانلود به حجم بالایی از داده‌ها میکنیم درحالی که نیازی ندارد.
مثلا در عکس بالا برای نمایش تصاویر محصولات به عکسی با ابعاد ۵۰۰ * ۲۸۱  و حجم ۱۰۰ کیلوبایت نیاز داریم ولی عکسی با ابعاد ۲۴۰۰ * ۱۳۵۰ با حجم ۲.۵ مگابایت لود می‌شود. شما اگر روزی هزار بازدید کننده باشته باشید و عدد ۱۰۰۰ را در ۲.۵ ضرب کنیم تقریبا 2.5 گیگابایت از پهنای باند روزانه مصرف صرفا این عکس غیربهینه می‌شود و در ماه ۷۳ گیگابایت باید پنهای باند خرج یک عکس کنیم، خب ما در این مثال ساده صرفا یک عکس را حساب کردیم اگر ۱۰۰ یا ۱۰۰۰ عکس غیربهینه داشته باشیم و کلا توجه به عکس‌ها نکنیم چه مشکلاتی پیش می‌اید؟ در اینجا اهمیت رفع ارور Serve scaled images پیش از گذشته مشخص می‌شود، جدا از انکه باعث افزایش سرعت وبسایت ما می‌شود باعث بهبود در هزینه های سایت هم می‌شود. البته همه فاکتورهای سرعت سایت که در دوره فیلم آموزشی ارتقای سرعت سایت نزدیک به ۸ ساعت صحبت کردیم باعث بهینه سازی در هزینه ها و همینطور افزایش فروش می‌شود.

رفع خطاهای gtmetrix
Serve scaled images

رفع ارور Serve scaled images

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

روش اول – بهینه سازی تصویر در فتوشاپ

بهترین روش برای رفع ارور Serve scaled images قبل از آپلود عکس در سایت می‌باشد شما می‌توانید با استفاده از ابزارهای همانند فتوشاپ سایز و حجم آنها را بدون کاهش کیفیت، خروجی بگیرید. به این منظور عکس مورد نظر را در فتوشاپ باز کرده و بعد از آن بر روی تب File کلیک کنید و گزینه Export را انتخاب کنید، در زیرمنوهای نمایش داده شده گزینه Save for Web را انتخاب کنید، در پنجره باز شده می‌توانید انواع کیفیت و سایز مد نظر برای عکس را وارد یا انتخاب کنید.

روش دوم – بهینه سازی تصویر در ابزارهای آنلاین

روش دوم برای رفع ارور Serve scaled images استفاده از ابزارهای آنلاین تغییر سایز می‌باشد. سایت‌های همانند PicResize.com، سایت imageresize.org و resizeimage.net ابزارهای آنلاین مناسبی برای تغییر سایز و ابعاد فایل‌های تصویری هستند.

روش سوم – بهینه سازی تصویر در وردپرس و جوملا

روش اول و دوم قبل از آپلود عکس در سایت کاربرد دارد بر خلاف روش سوم که بعد از اپلود تصاویر نیز مورد استفاده قرار می‌گیرد. روش سوم برای رفع مشکل Serve scaled images استفاده از پلاگین های وردپرس و جوملا است. گاهی ممکن است شما تعداد تصاویر بسیاری را در سایت خود با حجم بالا قرار داده‌اید و زمان لازم برای بهینه سازی، تغییر سایز و ابعاد عکس ها را نداشته باشید در این صورت پلاگین‌هایی که اشاره خواهیم کرد می‌توانند به شما در تغییر سایز و همچنین در کاهش حجم تصاویر کمک کنند.
از افزونه های وردپرس می‌توان به پلاگین Imsanity اشاره کرد، برای CMS جوملا هم پلاگین ImageResizer موجود است، توجه داشته باشید قبل از نصب و اعمال تنظیمات این پلاگین‌ها، بک آپ از هاست و دیتابیس خود بگیرید.

مشکل رایج در زمان رفع خطای serve scaled images در محصولات

آپدیت (Feb 6 2018): یکی از مشکلاتی که خیلی از دوستان در زمان رفع خطای serve scaled images دارند این هست که عکس موجود در صفحه محصولات، همان عکسی است که در صفحه اصلی سایت فراخوانی می‌شود با این تفاوت که در صفحه اصلی عکس به کمک CSS تغییر سایز داده شده و کوچیک تر شده است، درواقع عکسی که باید فقط در صفحه محصولات باکیفیت و تقریبا بزرگ باشد ولی در صفحه اصلی هم لود می‌شود که این موضوع جدا از بروز خطای Serve scaled images در GTmeteix باعث بالاتر رفتن حجم صفحه اول سایت و دیر لود شدن آن برای کاربران و ربات های نظیر گوگل بات‌ها می‌گردد. در ادامه به چند راه‌کار اشاره می‌شود، هر چند ممکن است برخی از آنها زمان‌بر و یا قابل انجام نباشد ولی ما تمام روش‌های ممکنه برای رفع این خطا را اشاره میکنیم و انتخاب یکی از آن‌ها به عهده شما می‌باشد.

  1. تغییر سایز: خب طبیعتا راه‌کار ساده‌ای است و شما می‌توانید سایز تصاویر خود را به کمک روش‌هایی که در بالا اشاره کردیم تغییر دهید ولی این عمل باعث کوچیک تر شدن تصویر در صفحه محصول می‌شود که تاثیری مستقیم بر روی کاهش فروش و تجربه کاربری نامناسب می‌شود. چرا که کاربر به دلیل کیفیت و سایز کم تصاویر نمی‌تواند محصولات را به خوبی بررسی و آن را ارزیابی کند.
  2. ویرایش یا تغییر قالب: اگر قالب آماده دارید می‌توانید قالب بهینه تری برای ادامه کار خود انتخاب و استفاده نمایید. و یا اگر قالب شما اختصاصی هست به برنامه نویس خود و یا پشتیبان قالب این موضوع را اطلاع دهید تا در صدد رفع آن باشند.
  3. آموزش برنامه نویسی: شما می‌توانید در یک پروسه طولانی ولی مفید دوره‌های آموزش زبان برنامه نویسی مربوط به سایت خود را طی کرده و سپس مشکلات موجود سایت خودتان را رفع کنید.
  4. درخواست افزایش‌سرعت: ما در سایت میزفا بنا به درخواست مکرر کاربران، افزایش‌سرعت‌سایت را در لیست خدمات خود اضافه نموده‌ایم. و شما می‌توانید به شکل اصولی، با کمترین هزینه و سریع‌ترین زمان ممکن این مشکل را رفع کنید، اگر تمایل داشتید می‌توانید درخواست افزایش سرعت سایت را برای ما ارسال کنید.
  5. بی خیال شوید: خب شاید شما دوست نداشته باشید هزینه کنید و یا دوست نداشته باشید آموزش نگاه کنید و یا فرصت این کار را ندارید، و فقط دنبال یک کد جادویی برای رفع این خطا هستید که متاسفانه وجود ندارد، پس بهتر است بی خیال رفع این خطا در سایت خود شوید، چرا که تنظیمات، توابع و زبان برنامه نویسی هر سایت متفاوت است و به فکر رفع سایر خطاهای gtmetrix باشید.

فیلم آموزشی تمایل دارید؟ ما یک دوره بسیار مفید و حرفه ای برای بهینه سازی حجم و اندازه عکس ها و همینطور سئو تصاویر به شکل اصولی برگزار کردیم، برای مشاهده سرفصل‌های دوره میتونید روی عکس زیر کلیک کنید:

آموزش کاهش حجم تصاویر بدون افت کیفیت

روش پیشنهادی و کلام اخر:

پیشنهاد ما برای بهینه سازی تصاویر، تغییر سایز و ابعاد مناسب و کاهش حجم عکس ها استفاده از نرم افزار Photoshop هست و طبق تجربه‌های چند ساله هیچ یک از روش‌ها انعطاف‌پذیری و کارایی فتوشاپ در بهینه سازی تصاویر را ندارد.
با اجرای روش‌های گفته شده به راحتی مشکل Serve scaled images برای شما حل می‌شود. امیدواریم در این آموزش‌ها که باعث بالا بردن سرعت سایت و در نتیجه بهبود سئو داخلی می‌شود، کمک شایانی کرده باشیم، من پوریا آریافر نویسنده این مقاله هستم، اگر سوالی داشتید حتما در نظرات سایت میزفا مطرح کنید. این جلسه از آموزش کامل GTmetrix که مربوط به رفع ارور Serve scaled images بود، هم به پایان رسید در جلسه بعد به معرفی خطای Optimize the order of styles and scripts در PageSpeed گوگل می‌پردازیم. با ما همراه باشید.

فیلم آموزشی افزایش سرعت سایت با gtmetrix
فیلم آموزشی افزایش سرعت سایت با gtmetrix
پوریا آریافر
اولین کسب و کار آنلاین خودم رو در فیسبوک راه‌اندازی کردم، سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال رو داشتم. بعد اینکه فیسبوک خالی از کاربر ایرانی شد وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت رو دریافت کردم، در حالی که نمره بالا گرفتم ولی کسی به دلیل به خطر افتادن موقعیت شغلی خودش به عنوان کارآموز منو قبول نمی‌کرد، بعدش با شروع دوران خدمت سربازی، مسئول بهینه سازی یک سایت خبری معتبر شدم و سئو یاد گرفتم. در ابتدای سال ۲۰۱۴ تونستم از رتبه ۱۵۰۰۰ به ۴۰۰ الکسا نزدیک کنم، اون زمان الکسا خیلی مهم بود. وارد دانشگاه شدم، به دلیل عدم علاقه به دانشگاه سعی کردم زودتر تمومش کنم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، توی دانشگاه هر کسی منو میدید یاد سئو میوفتاد، در همون سال آخر دانشگاه بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو رو داشتم، که به مجتمع فنی فروختم تا بتونم تمرکز رو فقط بر روی عشق خودم یعنی سئو بذارم، وقتی کانال تلگرام فروختم حس پرواز بهم دست داد، هرچند درآمد چندین میلیون ماهانه رو از دست دادم ولی دوباره باید مثل گذشته با پوستی نو یک فصلی نو رو میساختم. در این چندین سال فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌گرفته، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کردم. در اکثر ابزارهای کاربردی گوگل تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری رو یادگیری و یاددادن می‌دونم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شد تونست چنین بستر مناسبی رو برام فراهم کنه. همینطور در حال حاضر مدیریت یک تیم ۱۰ نفری از جوانان فعال و پرانگیزه رو در میزفا به عهده دارم. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم …
لیست آموزش GTmetrix نسخه جدید

41 نظر

41 پاسخ

  1. سلام
    من اومدم وندتا از عکسای سایتم که حجم بالای ۱۰۰ کیلوبایت داشت رو با استفاده از سایز tinypng کم حجم کردم و داخل سایت جایگزین کردم
    ولی در کمال تعجب دیدم امتیاز قسمت structure توی جی تی متریکسم حدودا ده تا کم شد رتبه ام از c به Dکاهش پیدا کرد
    علتش چیه؟

    1. سلام
      مقاله متفاوت بودن گزارش های gtmetrix رو مطالعه کنید.
      همینطور پیشنهاد میشه برای بهبود حجم عکس ها از فتوشاپ استفاده کنید و هم ابعاد درست انتخاب کنید و هم سایز مناسب. صرفا کاهش سایز کافی نیست.

  2. سلام مشکل بنده هم مشابه مشکل دوستان هست،سوالم اینه میشه در صفحه ی محصول ، عکس با یه سایز بزرگتر و با کیفیت تر نشون داده بشه و در صفحه ی اصلی همون عکس رو با سایز کوچکتر برای نمایش اپلود کنیم؟ سایتم وردپرسی و از قالب وودمارت استفاده می کنم.اساسا این قالب وودمارت همچین قابلیتی رو داره که دو عکس با سایز متفاوت در دوصفحه براش اپلود بشه؟ سایتم ارایه ی فایلهای لایه باز هست که عکسها حجم بالایی دارن

    1. سلام وقت بخیر
      بله میشه و باید برنامه نویسی بشه.
      اصولا قالب های معروف این قابلیت ها رو دارن.

  3. عرض سلام و خسته نباشید.
    من تمام عکس هام رو بهینه کردم ولی توی pagespeed خطا برای تصاویر موبایل داده. عکس ها برای تصاویر محصولات هست. اگر من یخوام سایز رو کوچک کنم برای دستکتاپ هم کوچک میشه. چیکار باید بکنم تا مشکل موبایل حل شه؟
    ممنون

    1. سلام محمد.
      باید کدنویسی بشه. به این صورت که عکس ها برای نسخه موبایل اختصاصی لود بشه و کوچک تر بشه.

  4. سلام . مشکلی که هست یک عکس چندبار با سایز های مختلف لود میشه. مثلا تصویر یک محصول را در نظر بگیرید که در صفحه اول فروشگاه سایز کوچکی دارد و وقتی روی آن محصول کلیک می کنیم تا توضیحات محصول را مشاهده کنیم آن تصویر با سایز بزرگتر به ما نشون میده. با این حساب در جی تی متریکس با خطای Serve scaled images مواجه می شیم. آیا برای اینکار راهکاری وجود دارد؟ در حالی اگر ما از اول تصویر با سایز کوچک آپلود کنیم زمانی ک تصویر بزرگ میخواهد لود شود کیفتش از دست می دهد.
    آیا باید چندین تصویر با سایز های مختلف آپلود کرد یا راهکاری دیگه ای وجود داره؟

    1. سلام
      شما کلا برعکس گفتید. اتفاقا عکس باید در سایزهای مختلف باشه و اگر در سایز های مختلف نباشه و یا سایزهای مختلف در مکان درست اون سایز لود نشه خطای Serve scaled عکس نشون داده میشه.
      مقاله رو لطفا مطالعه کنید.

      1. بله اینی که شما میگید درسته اما این امکان وجود داره در ووکامرس؟؟؟ مثلا مشکلی که من الان دارم اینه که من یک تصویر 500*500 پیکسل برای محصول آپلود کردم. در صفحه اصلی فروشگاه توسط قالب این تصویر کوچک میشه وتبدیل به یک تصویر به اندازه 200*200 میشه. اما وقتی روش کلیک میکنم تا توضیحات محصول را مشاهده کنم همان تصویر به اندازه 500*500 به من نمایش داده میشه. با این وجود در جی تی متریکس با خطای Serve scaled مواجه میشم. باید چکار کنم.؟؟؟

        آیا باید دوتا تصویر یکی 200*200(برای صفحه اصلی فروشگاه) و دیگری 500*500(برای صفحه توضیحات محصول) آپلود کنم؟ یا راهکار دیگه ای هم هست؟؟ اگر باید اینکار و کنم تو ووکامرس چگونه این کارو انجام بدم؟

        1. تصویر ۲۰۰ باید در صفحه اصلی لود بشه و تصویر ۵۰۰ باید در صفحه محصول لود بشه. اگر غیر از این باشه باید تنظیمات قالب یا اون صفحه ساز سایتتون رو بررسی کنید و ببینید امکانی داره به این صورت باشه یا نه، در غیر این صورت یا باید کدنویسی بشه.

  5. سلام
    توی سایت های وردپرسی زیاد اتفاق می یوفته که با اینکه تصویر کوچیک تر روی سایت هست اما مرورگر عکس بزرگتر رو دانلود می کنه!
    مثلا در این کد:

    زمانی که در ابعادی به عرض 240 قرار می گیره می یاد تصویر 600 تایی رو دانلود می کنه با اینکه انتظار داشتم تصویر 300 تایی رو دانلود کنه!
    اگر کسی دلیلشو می دونه خیلی ممنون می شم بگه

    ممنون

  6. سلام وقتتون بخیر
    من در پنل گوگل وبمستر چندین خطای سرعت کم در موبایل دارم(80خطا مربوط به صفحات محصولات)
    سایتم در حالت دسکتاپ در gtmetrix امتیاز خوبی داره . علاوه بر این ها از cdn فعال هست و از پلاگین rocket هم برای افزایش سرعت استفاده میکنم. هاستمم به نسبت هاست مناسبی هست (وردپرس ایران سرور)
    مشکل اینجاست خطای Serve scaled images در حالت دسکتاپ ندارم. اما وقتی در حالت موبایل تست میگیرم صفحات محصولات این خطارو دارند.
    و اگر قرار باشه تمام عکس هارو کوچیک کنم که مناسب موبایل باشه اون وقت در حالت دسکتاپ تصاویر به شدت بیکیفیت و کوچیک میشوند.
    لازم به ذکر است برای نمایش در موبایل از قالب اداپتیو استفاده میشود
    خیلی ممنون میشم اگر برسی و راهنمایی کنید.

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

  7. سلام وقتتون بخیر باشه چطور میتونیم اندازه درست تصاویر قالب رو پیدا کنیم؟ چطور بفهمم اندازه بهینه تصاویر سایتک چقدره؟

    1. سلام عرفان. وقتی سایتت رو در جی تی متریکس سرعتش رو تست میکنی جلوی عکس هایی که خطای serve میاد و مشکل ابعاد میگیره، اندازه پیشنهادی عکس‌ها در همون صفحه قالبتون رو میگه.
      البته ممکنه این اندازه پیشنهادی فقط مخصوص همون صفحه باشه و برای سایر صفحات یک اندازه دیگه مناسب باشه.

  8. سلام آقای آریافر بنده قالب جنه رو خریدم و استفاده می کنم ولی متاسفانه این ارور Serve scaled images رو هر عکسی که تصویر شاخص میزارم در جی تی متریکس نمایش میده! من اندازه تصاویر را در فتوشاپ ۴۰۵*۷۸۰ قرار میدم و حجمشون رو هم کم می کنم ولی بازم این ارور است اخه تو سایتا نوشتن قالب جنه از همین سایز پشتیبانی میکنه! لطفا کمکم کنید چطور این مشکل حل کنم؟ یا چه سایزی برای تصاویر باید انتخاب کنم؟

    1. سلام رضا جان. اگر از فتوشاپ برای بهبود عکس ها استفاده میکنید و اندازه خوبی انتخاب میکنید نیازی نیست نگران این خطا در جی تی متریکس باشید. گاهی وقت ها خطا واقعا خطای واقعی نیست و یا یک خطا ارزش رفع نداره.
      پیشنهاد میکنم به سایر موارد توجه کنید.

  9. سلام وقت بخیر
    الان بنده از افزونه auto post tumbnail استفاده میکنم
    یه عکس برای پست مورد نظرم میزارم با سایز 550 * 550 بعد این افزونه خب بصورت خودکار تصویر شاخص میزنه و اینکه سایز رو خودش تغییر میده و همه خطاهای scaled من از همین تصاویر شاخص هست . الان میگید چیکار کنم؟
    تصاویری که از قبل با اون اندازه ست شدن چیکارشون کنم؟

    1. سلام حسین جان. از الان ب بعد سعی کن اندازه ای که درست هست رو انتخاب کن. اگر قبلی ها زیاده لازم نیست وقت بذاری. مگر بگی من وقت و انرژی زیادی دارم.

  10. سلام وقت بخیر. مشکلی که من دارم اینه که چه اندازه‌ای (Size) مناسبه برای عکسم که تو فتوشاپ ادیتش کنم!
    چطور میتونم متوجه بشم که چه اندازه ای نیازه تا ریسایز کنم تو فتوشاپ؟ مثلا پست های بلاگم! یا عکس های اسلایدر رولوشن که فول ویدث هستن…

    1. سلام، یکی از پارامترهای من برای انتخاب اندازه، کیفیت است، در ابتدا باید بدونیم که کاربر سایت نسبت به همه چی اولویت داره و باید کیفیت خوبی داشته باشه و برای داشتن کیفیت خوب طبیعتا باید اندازه متوسط به سمت بزرگ هم داشته باشه. از طرفی اندازه بستگی به طراحی قالب داره. شما میتونید به کمک نرم افزارهای اسکرین شات حداکثر اندازه ای که قالب اجازه میده عکس بزرگ تر باشه بگیرید و در فتوشاپ اندازه اون اسکرین شات رو در بیارید.
      موفق باشید.

  11. با سلام،ممنون از اطلاعات مفیدتون.اگه برای صفحه محصولات از یکی از عکس های محصولات با سایز کم استفاده بشه به نظرتون با توجه به فضای هاستی که اون عکس اضافی اشغال میکنه به صرفه هست ؟ آیا تفاوتی توی نمایش سایت میکنه؟

    1. سلام مهدی جان. من دقیق متوجه سوال شما نشدم ولی من عکس باکیفیت با حجم مناسب برام مهم تره تا موارد دیگه. همیشه سعی کنید عکس هاتون در سایزی باشه که وقتی کاربر میاد مشاهده کنه نگه این عکس چقدر بی کیفیت و سایز پایین هست.

  12. سلام . وقت بخیر
    تصاویری که داخل صفحات سایتم استفاده شده در بلاک های مختلف با سایزهای متفاوتی نمایش داده میشود ، آیا برای رفع ارور Serve scaled images می توان برای تصاویر از تگ picture استفاده کرد، و استفاده از این تگ چه مزایا و معایبی دارد؟
    ممنون میشم راهنمایی کنید.

    1. سلام. متاسفانه بنده متوجه سوال شما نشدم. همه عکس ها از تگ img استفاده میکنن تا لود بشن.

  13. سلاموقت بخیر این من هر چقدر سایز عکس هارو کم میکنم وحجمشونو بازم میگه کمتر الان یه عکس من حمش 4 کیلو بایت کمتره

  14. آموزش رفع این خطا با smush رو هم میزارید یا یک توضیح کوچیک میدید چطوری رفع کنیم باهاش !!!
    ممنون میشم

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

  15. سلام . خسته نباشید
    مطالبتون در زمینه آموزش جی تی متریکس خیلی خوب و جامع بود.
    در مورد ارور Serve scaled images مشکلی که توی سایتم دارد مشابه مشکلی هست که یکی از کاربران کامنت گذاشته.
    تصاویر دو تا از بلاک های داخل صفحات سایتم که سایزهای مختلفی دارند از یک نوع عکس که سایز بزرگ تری دارد فراخوانی می شود ، شما فرمودید که دو راه حل داره ” بهینه سازی کدقالب که نیاز به دانش برنامه نویسی داره. البته ترفندهای دیگه هم هست که باز نیاز به دانش کدنویسی داره ” اگر ممکنه یک توضیح مختصری در این زمینه بدید ، چون امکان این رو ندارم که بخوام تصاویر قالب رو تغییر بدم .
    یک مورد دیگه اینکه آیا ممکنه با قرار دادن سایز تصاویر در کد عکس ، مشکل حل بشه و ارور نده

    1. درود بر شما دوست عزیز
      پاسخ شما به شکل کامل در قالب یک آپدیت به مقاله اضافه شد و می‌توانید مشاهده نمایید.

      1. با عرض سلام و خسته نباشید خدمت مدیر سایت

        میخواستم بدونم اگر بهینه سازی با افزونه هایی که ذکر کردید انجام میشه
        پس نثش افزونه wp smush در بهینه سازی تصاویر چیه!؟

        با تشکر

        1. سلام، افزونه ای که اشاره کردید هم قابلیت رفع این خطا رو داره اگر به درستی تنظیم بشه. موفق باشید.

          1. امکانش هست بفرمایید چکار کنیم؟ با تشکر

          2. لطفا سرچ کنید یا با تنظیمات کار کنید. چیزی نداره که بخوام اموزش کار کردنش رو بدم.

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

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

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

  17. ممنون از آموزش شما
    یه قسمت از توضیحات یه کم نامفهوم بود برای من
    طبق توضیحات شما و توضیحی که خود جی تی متریکس زیر خطای مربوطه زده ، مثلا یه فایل با سایز 500 در 500 که اندازه اصلی یه عکس هست ، در صفحه فروشگاه در سایز 220 در 220 نمایش داده میشه و این مشکل رو بوجود میاره

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

    1. سلام، خواهش میکنم
      بنده در قسمت علت خطای Serve scaled images به شکل کامل توضیح دادم که برای چه این خطا وجود داره، ولی توجه داشته باشید که وقتی ما ابعاد عکس رو کاهش میدیم طبیعتا حجم عکس هم کاهش پیدا میکنه، برای همین بنده هم به حجم و هم به ابعاد عکس در رفع ارور Serve scaled images اشاره کردم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=