فشرده سازی و تغییر اندازه عکس با Web API

فشرده سازی و تغییر اندازه عکس با Web API یکی از نیازهای مهم در بسیاری از پروژه‌های وب است. وقتی کاربران تصویر آپلود می‌کنند، حجم بالای فایل می‌تواند سرعت سایت را کاهش دهد. همچنین مصرف فضای ذخیره‌سازی را افزایش می‌دهد. 🚀

با استفاده از Web API می‌توان تصاویر را هنگام آپلود، به صورت خودکار کوچک‌تر و بهینه‌تر کرد. این کار هم تجربه کاربری را بهتر می‌کند و هم فشار روی سرور را کاهش می‌دهد. در این مقاله، روش پیاده‌سازی این فرایند در ASP.NET Web API را به شکل ساده و کاربردی بررسی می‌کنیم.

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

فشرده سازی و تغییر اندازه عکس با Web API چیست؟

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

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

چرا باید تصاویر را در API بهینه کنیم؟

بهینه‌سازی تصویر در سمت سرور مزیت مهمی دارد. شما کنترل کامل روی اندازه، کیفیت و فرمت فایل خواهید داشت. این موضوع باعث می‌شود فایل‌های نهایی استانداردتر باشند.

مزیت‌ها

⚡ افزایش سرعت بارگذاری صفحات
💾 کاهش مصرف فضای ذخیره‌سازی سرور
📉 کاهش مصرف پهنای باند
🖼️ حفظ تناسب ابعاد تصویر
🔒 کنترل بهتر روی فرمت و کیفیت فایل‌ها
👨‍💻 استانداردسازی فرایند آپلود در کل سیستم

کاربردها

فشرده سازی و تغییر اندازه عکس با Web API در پروژه‌های زیادی کاربرد دارد. چند نمونه رایج را در ادامه می‌بینید:

🛍️ فروشگاه اینترنتی: برای بهینه‌سازی تصاویر محصولات
👤 پروفایل کاربران: برای کاهش حجم عکس‌های آواتار
📰 سایت خبری و وبلاگ: برای بارگذاری سریع‌تر تصاویر محتوا
🏢 سامانه‌های سازمانی: برای آپلود مدارک و تصاویر پرسنلی
📱 اپلیکیشن‌های موبایل: برای ارسال سریع‌تر عکس به سرور

ساختار کلی پیاده‌سازی در ASP.NET Web API

در نسخه قدیمی مقاله، ساخت پروژه با ASP.NET MVC 4 و Web API انجام شده بود. اصل ایده هنوز کاربردی است، اما بهتر است ساختار کد را تمیزتر و امن‌تر پیاده‌سازی کنیم.

روند کلی کار به این صورت است:

ایجاد یک API endpoint برای دریافت فایل
بررسی وجود فایل در درخواست
خواندن استریم تصویر
محاسبه ابعاد جدید با حفظ نسبت تصویر
ذخیره نسخه فشرده شده در مسیر مشخص
برگرداندن پاسخ مناسب به کاربر

نمونه کد فشرده سازی و تغییر اندازه عکس

کد زیر نسخه بازنویسی‌شده و خواناتر همان منطق مقاله قدیمی است. ساختار آن حفظ شده، اما توضیحات و ترتیب آن بهینه‌تر شده است. ✨

csharp

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;

namespace ImageUpload.Controllers
{
    public class UploadController : ApiController
    {
        [HttpPost]
        public HttpResponseMessage Post()
        {
            var httpRequest = HttpContext.Current.Request;

            if (httpRequest.Files.Count == 0)
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest, "هیچ فایلی ارسال نشده است.");
            }

            var savedFiles = new List<string>();

            foreach (string fileKey in httpRequest.Files)
            {
                var postedFile = httpRequest.Files[fileKey];
                var fileName = Path.GetFileName(postedFile.FileName);
                var savePath = HttpContext.Current.Server.MapPath("~/ImgFolder/" + fileName);

                using (Stream stream = postedFile.InputStream)
                {
                    CompressImage(stream, savePath);
                }

                savedFiles.Add(fileName);
            }

            return Request.CreateResponse(HttpStatusCode.Created, savedFiles);
        }

        public static void CompressImage(Stream sourceStream, string targetPath)
        {
            using (var originalImage = Image.FromStream(sourceStream))
            {
                int maxWidth = 900;
                int maxHeight = 900;

                int originalWidth = originalImage.Width;
                int originalHeight = originalImage.Height;

                int newWidth = originalWidth;
                int newHeight = originalHeight;

                if (originalWidth > maxWidth || originalHeight > maxHeight)
                {
                    float ratioX = (float)maxWidth / originalWidth;
                    float ratioY = (float)maxHeight / originalHeight;
                    float ratio = Math.Min(ratioX, ratioY);

                    newWidth = (int)(originalWidth * ratio);
                    newHeight = (int)(originalHeight * ratio);
                }

                using (var resizedBitmap = new Bitmap(newWidth, newHeight))
                using (var graphics = Graphics.FromImage(resizedBitmap))
                {
                    graphics.SmoothingMode = SmoothingMode.AntiAlias;
                    graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
                    graphics.DrawImage(originalImage, 0, 0, newWidth, newHeight);

                    string extension = Path.GetExtension(targetPath)?.ToLower();

                    if (extension == ".jpg" || extension == ".jpeg")
                    {
                        ImageCodecInfo jpgEncoder = GetEncoder(ImageFormat.Jpeg);
                        Encoder qualityEncoder = Encoder.Quality;
                        var encoderParameters = new EncoderParameters(1);
                        encoderParameters.Param[0] = new EncoderParameter(qualityEncoder, 50L);

                        resizedBitmap.Save(targetPath, jpgEncoder, encoderParameters);
                    }
                    else
                    {
                        resizedBitmap.Save(targetPath, originalImage.RawFormat);
                    }
                }
            }
        }

        public static ImageCodecInfo GetEncoder(ImageFormat format)
        {
            ImageCodecInfo[] codecs = ImageCodecInfo.GetImageDecoders();

            foreach (ImageCodecInfo codec in codecs)
            {
                if (codec.FormatID == format.Guid)
                {
                    return codec;
                }
            }

            return null;
        }
    }
}

این کد چگونه کار می‌کند؟

در این پیاده‌سازی، متد Post فایل‌های ارسالی را از درخواست HTTP دریافت می‌کند. اگر فایلی وجود نداشته باشد، پاسخ خطا برمی‌گردد. اگر فایل موجود باشد، هر فایل وارد فرایند فشرده سازی می‌شود.

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

در مرحله آخر، اگر فرمت فایل JPG باشد، کیفیت آن با Encoder.Quality روی مقدار 50 تنظیم می‌شود. این تنظیم معمولاً تعادل خوبی بین کیفیت و حجم فایل ایجاد می‌کند.

نحوه تست API با Postman

برای تست این API می‌توانید از Postman استفاده کنید. مراحل کار ساده است:

آدرس endpoint مربوط به متد POST را وارد کنید.
وارد بخش Body شوید.
گزینه form-data را انتخاب کنید.
یک کلید برای فایل تعریف کنید.
نوع آن را روی File قرار دهید.
تصویر مورد نظر را انتخاب کنید.
درخواست را ارسال کنید.

در صورت موفقیت، API نام فایل‌های ذخیره‌شده را برمی‌گرداند. این روش برای تست سریع و بررسی خروجی بسیار مناسب است. 🧪

نکات مهم برای بهینه‌سازی بهتر

پیاده‌سازی اولیه مناسب است، اما برای پروژه‌های واقعی بهتر است چند نکته مهم را هم رعایت کنید:

نکات فنی

🛡️ فقط فرمت‌های مجاز را بپذیرید.
📏 برای حداکثر حجم فایل محدودیت بگذارید.
🧹 نام فایل را قبل از ذخیره‌سازی پاک‌سازی کنید.
🗂️ از نام‌گذاری یکتا برای جلوگیری از تداخل استفاده کنید.
🔄 در پروژه‌های جدید، از نسخه‌های جدیدتر ASP.NET استفاده کنید.
⚙️ در صورت نیاز، فرمت WebP را هم به سیستم اضافه کنید.

نکات سئو و تجربه کاربری

تصاویر فشرده شده فقط برای سرور مفید نیستند. این کار روی سئو نیز اثر مثبت دارد. صفحات سریع‌تر بارگذاری می‌شوند و کاربر زمان کمتری برای دیدن محتوا منتظر می‌ماند. این موضوع می‌تواند نرخ تعامل را بهبود دهد.

همچنین اگر تصاویر شما برای موبایل بهینه باشند، مصرف اینترنت کاربر کمتر می‌شود. این نکته در سایت‌های پرترافیک اهمیت زیادی دارد. 🌐

بخش ثبت‌نام

اگر می‌خواهید از خدمات مرتبط استفاده کنید یا فرایند دسترسی را شروع کنید، مراحل ثبت‌نام معمولاً بسیار کوتاه است:

وارد لینک ثبت‌نام شوید: p.api.ir
اطلاعات اولیه حساب را وارد کنید.
حساب خود را تأیید کنید.
وارد پنل شوید و سرویس مورد نظر را فعال کنید.

این فرایند معمولاً در چند دقیقه انجام می‌شود و می‌تواند شروع خوبی برای استفاده از سرویس‌های API باشد. ✍️

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

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

این استانداردسازی علاوه بر بهبود ظاهر سایت، مدیریت فایل‌ها را هم ساده‌تر می‌کند. در نتیجه، هم تیم فنی و هم کاربران تجربه بهتری خواهند داشت.

فشرده سازی و تغییر اندازه عکس با Web API یک راهکار مهم برای بهبود عملکرد سایت و مدیریت بهتر فایل‌ها است. با این روش می‌توانید حجم تصاویر را کم کنید، سرعت بارگذاری را افزایش دهید و تجربه کاربری بهتری بسازید.

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

فشرده سازی و تغییر اندازه عکس با Web API

فشرده سازی و تغییر اندازه عکس با Web API

فشرده سازی و تغییر اندازه عکس با Web API چیست؟

چرا باید تصاویر را در API بهینه کنیم؟

مزیت‌ها

کاربردها

ساختار کلی پیاده‌سازی در ASP.NET Web API

نمونه کد فشرده سازی و تغییر اندازه عکس

این کد چگونه کار می‌کند؟

نحوه تست API با Postman

نکات مهم برای بهینه‌سازی بهتر

نکات فنی

نکات سئو و تجربه کاربری

بخش ثبت‌نام

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

دیدگاهتان را بنویسید لغو پاسخ