Tinify ile resimlerin boyutu nasıl optimize edilir?

Gerek mobile servis ettiğiniz Api'de gerekse web sitenizde göstermiş olduğunuz fotoğraflarınız olabildiğince optimize edilmelidir. Kullanıcıların cihazının performansını ve internet hızını bilemeyiz, burada boyutu yüksek olan fotoğraflar platform ve cihaz performansı düşmesine neden olur ve dolayısıyla kullanıcı deneyimi kaybedeceğinizden, ziyaretçi sayınızda düşüş meydana gelir. Burada resimlerimizi nasıl optimize edeceğimizi öğreneceğiz.

---

Burada 3rd party bir kütüphane olan Tinify API kullanacağız. Bu API aylık 500 adet sıkıştırma seçeneğini ücretsiz olarak sunmaktadır. Benim gibi blog yazarları için bu rakamın yeterli olacağını öngörmekteyim. Fakat bu duruma kendimi bağımlı bırakacak değilim. Siz yine de Api'yı atlayacak kodlamayı yapmayı ihmal etmeyiniz.

Tinify sisteme yüklediğiniz dosyanızın işleyip resmin kalitesinden neredeyse hiç ödün vermeyerek %70'e varan boyut düşürme işlemleri yapmaktadır. Zaman zaman 5mb boyuta sahip resmin 270kb düşdüğüne şahit oldum. Bu durumun uygulamanıza vereceği performansı düşünmenizde fayda olduğunu düşünmekteyim.

Kütüphaneyi kullanmak için yukarıdaki linkten Key alınız. Key aldıktan sonra kodlamaya başlayalım.

Öncelikle kütüphaneyi yükleyelim. Nuget

Install-Package Tinify

Şimdi Startup.cs girip ConfigureServices içerisinde projemize API'den aldığımız keyi girelim.

Tinify.Key = "ApiKey";

Şimdi sayfanızda post ettiğiniz dosyanın Controller'a düştüğünü kabul ederek başlayalım.

public class FilesController : Controller
{
    public static IWebHostEnvironment _webHostEnvironment;

    public FilesController(IWebHostEnvironment webHostEnvironment)
    {
        _webHostEnvironment = webHostEnvironment;
    }

    [HttpPost]
    public async Task<JsonResult> FileUpload(IFormFile file, string entityType, int entiyId)
    {
        try
        {
            if (!(file?.Length > 0))
                return new JsonResult("NotFound");
            var model = await UploadLocalFileSystem(file, entityType, entiyId);
            return new JsonResult(new {Data = model});
        }
        catch (Exception ex)
        {
            return new JsonResult(new {Error = new {Code = 500, Message = ex.Message, Type = "Exception"}});
        }
    }
}

Controller'da istek geldikten sonra dosyamızı işleyelim. (string entityType, int entiyId) bu parametre ve bağlı olduğu yerleri silebilirsiniz. Bu parametreleri hangi resim nereye ne için eklenmiş kontrolü için ekledim. Ayrıca Path ve Directory kullanırken başına System.IO eklemenizi gerektirecek durumlarla karşılaşabilirsiniz. Bu konuyla ilgili problem yaşarsanız yorumlarda buluşuruz.

public async Task<Files> UploadLocalFileSystem(IFormFile file, string entityType, int entiyId)
{
    var files = Path.Combine(_webHostEnvironment.WebRootPath, "files");
    var originals = Path.Combine(_webHostEnvironment.WebRootPath, "originals");
    var existsfiles = Directory.Exists(files);
    var existsoriginals = Directory.Exists(originals);
    if (!existsfiles) Directory.CreateDirectory(files);
    if (!existsoriginals) Directory.CreateDirectory(originals);
    var extension = Path.GetExtension(file.FileName);
    var model = new Files // Database modeliniz. Burada sisteme eklenen dosyalarımızı veritabanına logluyoruz.
    {
        EntityName = entityType,
        EntityId = entiyId,
        Extension = extension,
        ContentType = file.ContentType,
        Size = file.Length
    };
    if (file.ContentType.Contains("image"))
    {
        await using var fileStream = new FileStream(Path.Combine(originals, model.Guid + extension), FileMode.Create);
        await file.CopyToAsync(fileStream);

        await using var ms = new MemoryStream();
        await file.CopyToAsync(ms);
        var fileBytes = ms.ToArray();
        var resultData = await Tinify.FromBuffer(fileBytes).ToBuffer();
        await File.WriteAllBytesAsync(Path.Combine(files, model.Guid + extension), resultData);
    }
    else
    {
        await using var fileStream = new FileStream(Path.Combine(files, model.Guid + extension), FileMode.Create);
        await file.CopyToAsync(fileStream);
    }

    return Insert(model);  // Database modeliniz. Veritabanına eklemek için servise gönderiyoruz.
}

Hadi selametle!