| img-toolkit 개발 이유

img-toolkit은 Canvas API를 기반으로 하는 매우 간단한 이미지 리사이징 라이브러리입니다.

사실 처음에는 기능 구현보다는 "간단한 기능이라도 패키지로 배포해 보고, 다른 프로젝트에서 가져와 사용해 보고 싶다"는 학습 목적이 컸습니다.

시간이 지나면서 단순히 배포 연습용으로 만들어진 라이브러리를 기능적으로 좀 더 완성도 있는 형태로 발전시키고 싶었습니다.

이를 위해 Rust와 WebAssembly(WASM)를 활용해 기존 기능을 재작성하기로 결정했습니다.

| Rust를 사용하는 이유

개인적으로 Rust는 제가 가장 좋아하는 언어 중 하나입니다.

러스트의 빡빡한 컴파일러와 싸우면서 자연스럽게 좋은 코드를 작성하게 되는 구조도 마음에 들고,

WASM 관련 커뮤니티와 기술적 지원도 활발해 프론트엔드 개발자로서도 매력적인 언어라고 생각합니다.

실제로 구글에서 만든 이미지 압축 사이트인 Squoosh의 이미지 처리 기능 대부분이

C++와 Rust 기반의 WASM으로 작성되어 있습니다.

이러한 사례를 통해 Rust를 이용한 WASM이 이미지 처리에 뛰어난 강점을 가지고 있음을 알게 되었고,

저 역시 img-toolkit의 Rust 재작성을 통해 이를 직접 경험해보고자 했습니다.

squoosh의 코드는 아래 링크를 통해 확인해볼 수 있습니다.

https://github.com/GoogleChromeLabs/squoosh/tree/dev/codecs

| Rust로 함수 구현

기존 img-toolkit에서 제공하는 resizeImage 함수는

파일과 압축 옵션을 받아 압축된 파일을 반환하는 구조입니다.

Rust로 재작성할 때 기존의 인터페이스를 그대로 유지해

사용자가 변경 없이 기존 방식대로 사용할 수 있도록 구현하였습니다.

wrapper 함수 필요성

JavaScript에서는 File 객체를 통해 이미지 처리를 수행하지만,

Rust는 JavaScript의 File 객체를 직접 사용할 수 없습니다.

따라서 이미지를 바이트 배열로 변환하여 Rust의 이미지 처리 함수에 전달해야 합니다.

이를 해결하기 위해 JavaScript와 Rust 간의 변환 과정을 처리하는 Wrapper 함수를 만들어 제공했습니다.

wrapper 함수는 다음과 같이 구현하였습니다.

import init, { resize_image } from "../pkg/img_toolkit_rust.js";

export type ResizeOptions = {

width?: number;

height?: number;

quality?: number;

format: "png" | "jpg" | "webp";

brightness?: number;

resampling?: number;

};

export async function resizeImage(

file: File,

options: ResizeOptions

): Promise<File> {

// WASM 바이너리를 로드

await init();

// clamp 함수를 사용하여 각 옵션 값의 범위 제한

const sanitizedOptions = {

...options,

quality: clamp(options.quality ?? 0.7, 0, 1),

brightness: clamp(options.brightness ?? 0.5, 0, 1),

resampling: clamp(options.resampling ?? 4, 0, 10),

};

// 이미지 파일을 바이트 배열로 변환

const buffer = await file.arrayBuffer();

const uint8 = new Uint8Array(buffer);

// Rust 함수를 호출하고 리사이징 된 이미지의 바이트 배열 저장

const result = resize_image(uint8, sanitizedOptions);

const mime =

options.format === "jpg" ? "image/jpeg" : `image/${options.format}`;

return new File([result], `resized.${options.format}`, { type: mime });

}

function clamp(value: number, min: number, max: number): number {

return Math.min(Math.max(value, min), max);

}

Rust 구현 시 사용된 의존성

사용하는 의존성들은 다음과 같습니다.

use wasm_bindgen::prelude::*;

use wasm_bindgen::JsValue;

use image::codecs::webp::WebPEncoder;

use image::{

imageops::resize,

imageops::FilterType,

GenericImageView,

ImageReader,

DynamicImage,

ImageFormat,

ExtendedColorType,

ImageEncoder,

};

use image::codecs::jpeg::JpegEncoder;

use image::codecs::png::{CompressionType, PngEncoder};

use std::io::Cursor;

use serde::Deserialize;

use serde_wasm_bindgen::from_value;

wasm_bindgen: JS와 WASM의 바인등을 위해 사용합니다.
image: 이미지 디코딩, 리사이징, 인코딩 기능을 위해 사용합니다.
Cursor: 바이트 버퍼를 파일처럼 읽기 위해 사용합니다.
serde + serde_wasm_bindgen: JS 객체를 Rust struct로 디시리얼라이즈 하기 위해 사용합니다.

ResizeOptions 구조체 정의

다음과 같이 자바스크립트에서 넘겨 받을 옵션을 Rust에서 struct로 정의합니다.

#[derive(Deserialize)]

struct ResizeOptions {

width: Option<u32>,

height: Option<u32>,

quality: Option<f32>,

format: String,

brightness: f32,

resampling: u32,

}

resize_image 함수 시그니처

resize_image 함수의 시그니처는 다음과 같습니다.

#[wasm_bindgen]

pub fn resize_image(data: &[u8], options: JsValue) -> Result<Box<[u8]>, JsValue> {

// ...코드

}

data: &[u8]: JavaScript에서 전달된 이미지의 바이너리 데이터입니다.
options: JsValue: JavaScript 객체 형태로 전달된 옵션입니다.
반환값 Box<[u8]>: 인코딩된 이미지의 바이트 배열로, JavaScript에서 Uint8Array로 변환하여 사용됩니다.

옵션 파싱

serde_wasm_bindgen의 from_value 함수를 사용하여 전달받은 JavaScript 객체 형태의 옵션을

Rust의 ResizeOptions 구조체로 변환합니다.

let options: ResizeOptions = from_value(options)

.map_err(|e| JsValue::from_str(&format!("Invalid options: {}", e)))?;

이미지 디코딩

전달된 이미지 데이터를 ImageReader 구조체의 new 메서드로 읽어 DynamicImage를 생성합니다.

이 과정에서 밝기 조정 값을 반영하기 위해 별도의 처리를 추가로 수행합니다.

let img = ImageReader::new(Cursor::new(data))

.with_guessed_format()

.map_err(|e| JsValue::from_str(&format!("Format guess failed: {}", e)))?

.decode()

.map_err(|e| JsValue::from_str(&format!("Decode failed: {}", e)))?

.brighten(value);

이때, DynamicImage의 brighten 메서드는 -255에서 +255까지의 값을 받으므로,

기존 JavaScript 인터페이스인 0.0~1.0의 범위를 맞추기 위해 map_brightness 함수를 통해 값을 변환합니다.

fn map_brightness(x: f32) -> i32 {

let x = x.clamp(0.0, 1.0);

let v = x * 510.0 - 255.0;

v.round() as i32

}

let value = map_brightness(options.brightness);

이미지 필터

기존 자바스크립트 버전의 resampling 옵션은 이미지를 좀 더 부드럽게 처리하는 옵션이었으며,

Rust에서는 이를 이미지 처리 필터로 대응시켰습니다.

Rust에서의 필터 선택은 옵션의 resampling 값에 따라 다음과 같이 구현했습니다.

fn get_filter_type(level: u32) -> FilterType {

match level.clamp(0, 10) {

0 | 1 => FilterType::Nearest,

2 | 3 => FilterType::Triangle,

4 | 5 => FilterType::CatmullRom,

6 | 7 => FilterType::Gaussian,

_ => FilterType::Lanczos3,

}

let filter = get_filter_type(options.resampling);

각 필터가 어떤 필터인지는 아래 링크를 참고하면 알 수 있습니다.

https://docs.rs/image/latest/image/imageops/enum.FilterType.html

현재는 기존과 호환성을 유지하기 위해 resampling 옵션을 필터로 대응했으나,

앞으로는 더 명확한 filter 옵션으로 변경하여 제공할 예정입니다.

이미지 리사이즈

이제 필터를 설정한 후, 옵션으로 받은 너비와 높이를 사용하여 이미지 크기를 변경해 줍니다.

크기 변경은 image::imageops::resize 함수를 통해 진행하며,

옵션으로 주어진 너비와 높이의 존재 여부에 따라 match 문으로 적절하게 처리해 줍니다.

let (orig_w, orig_h) = img.dimensions();

let filter = get_filter_type(options.resampling);

let width = options.width.filter(|&w| w > 0);

let height = options.height.filter(|&h| h > 0);

let resized = match (width, height) {

(Some(w), Some(h)) => {

let buf = resize(&img.to_rgba8(), w, h, filter);

DynamicImage::ImageRgba8(buf)

}

(Some(w), None) => img.resize(w, ((w as f32)*(orig_h as f32)/(orig_w as f32)) as u32, filter),

(None, Some(h)) => img.resize(((h as f32)*(orig_w as f32)/(orig_h as f32)) as u32, h, filter),

(None, None) => img,

};

위 코드에서 너비와 높이 중 하나만 지정되면 원본 이미지의 비율에 맞춰 나머지 한쪽의 크기를 자동으로 계산하여 변경하고,

둘 다 지정하지 않으면 원본 크기 그대로 유지됩니다.

이미지 포맷 파싱

옵션으로 전달받은 이미지 포맷 문자열을 Rust의 image::ImageFormat 열거형에 맞추기 위해,

다음과 같이 parse_format라는 함수를 작성하였습니다.

fn parse_format(fmt: &str) -> Option<ImageFormat> {

match fmt.to_lowercase().as_str() {

"png" => Some(ImageFormat::Png),

"jpeg" | "jpg" => Some(ImageFormat::Jpeg),

"webp" => Some(ImageFormat::WebP),

_ => None,

}

let format = parse_format(&options.format)

.ok_or_else(|| JsValue::from_str("Unsupported format"))?;

Rust를 사용하는 장점 중 하나는 다양한 이미지 포맷을 지원한다는 점입니다.

하지만 이번에는 기존의 JavaScript로 작성한 함수의 인터페이스와 동일하게 유지하는 것을 목표로 하였기 때문에,

일단은 PNG, JPEG, WEBP 포맷만을 지원하도록 구현했습니다.

이후에는 추가적인 포맷 지원도 고려하고 있습니다.

지원 가능한 이미지 포맷에 대한 더 자세한 정보는 아래 링크에서 확인할 수 있습니다.

https://docs.rs/image/latest/image/enum.ImageFormat.html

이미지 인코딩

이제 앞서 리사이징한 이미지(resized), 지정된 포맷(format), 그리고 옵션(options)을 이용하여

이미지를 인코딩하는 encode_image 함수를 아래와 같이 작성했습니다.

fn encode_image(

image: &DynamicImage,

format: &ImageFormat,

options: &ResizeOptions

) -> Result<Vec<u8>, JsValue> {

let mut buffer = Vec::new();

// 품질 값을 1~100 범위로 변환

let quality = (options.quality.unwrap_or(0.8) * 100.0)

.round()

.clamp(1.0, 100.0) as u8;

// 포맷별로 다른 인코딩 로직 실행

match format {

ImageFormat::Jpeg => {

// JPEG은 JpegEncoder로 직접 인코딩

let mut encoder = JpegEncoder::new_with_quality(&mut buffer, quality);

encoder

.encode_image(image)

.map_err(|e| JsValue::from_str(&format!("JPEG encode failed: {}", e)))?;

}

ImageFormat::Png => {

// PNG는 JPEG으로 중간 압축 후 다시 PNG로 변환

let recompressed = compress_to_jpeg(image, quality)?;

encode_as_png(&recompressed, &mut buffer)?;

}

ImageFormat::WebP => {

// WebP 역시 JPEG 중간 압축 후 WebP로 변환

let recompressed = compress_to_jpeg(image, quality)?;

encode_as_webp(&recompressed, &mut buffer)?;

}

_ => {

// 기타 포맷은 image 크레이트의 기본 write_to로 처리

image

.write_to(&mut Cursor::new(&mut buffer), *format)

.map_err(|e| JsValue::from_str(&format!("Write failed: {}", e)))?;

}

// 완성된 바이트 벡터 반환

Ok(buffer)

}

PNG와 WebP 포맷의 경우 image 크레이트가 직접 품질 설정을 지원하지 않기 때문에,

먼저 JPEG으로 품질 조정을 한 후 원하는 포맷으로 변환하는 방식으로 처리했습니다.

이제 위 코드에서 사용하는 JPEG 중간 압축을 위한 compress_to_jpeg,

PNG 변환을 위한 encode_as_png, 그리고 WebP 변환을 위한 encode_as_webp 함수를 작성하겠습니다.

● JPEG 중간 압축 (compress_to_jpeg)

fn compress_to_jpeg(image: &DynamicImage, quality: u8) -> Result<DynamicImage, JsValue> {

let mut temp_jpeg = Vec::new();

let mut jpeg_encoder = JpegEncoder::new_with_quality(&mut temp_jpeg, quality);

jpeg_encoder

.encode_image(image)

.map_err(|e| JsValue::from_str(&format!("Interim JPEG encode failed: {}", e)))?;

image

::load_from_memory(&temp_jpeg)

.map_err(|e| JsValue::from_str(&format!("JPEG decode failed: {}", e)))

}

● PNG 변환 (encode_as_png)

현재 옵션으로 압축 강도와 필터를 설정하지 않지만, 추후 옵션으로 제공할 수 있습니다.

fn encode_as_png(image: &DynamicImage, buffer: &mut Vec<u8>) -> Result<(), JsValue> {

let rgba = image.to_rgba8();

let (w, h) = rgba.dimensions();

let encoder = PngEncoder::new_with_quality(

buffer,

// 최고 압축 강도

CompressionType::Best,

// 픽셀 특성에 따라 필터 자동 적용

image::codecs::png::FilterType::Adaptive

);

encoder

.write_image(&rgba, w, h, ExtendedColorType::Rgba8)

.map_err(|e| JsValue::from_str(&format!("PNG encode failed: {}", e)))

}

자세한 압축 및 필터 타입에 대해서는 아래 문서를 참고하세요.

https://docs.rs/image/latest/image/codecs/png/enum.CompressionType.html

https://docs.rs/image/latest/image/codecs/png/enum.FilterType.html

● WebP 변환 (encode_as_webp)

현재 image 크레이트에서는 WebP의 손실 압축을 지원하지 않으므로 무손실 압축만 사용합니다.

JPEG 중간 압축 단계에서 이미 손실 압축이 이루어졌기 때문에 실제 결과는 품질이 낮아지고 용량도 줄어듭니다.

fn encode_as_webp(image: &DynamicImage, buffer: &mut Vec<u8>) -> Result<(), JsValue> {

let rgba = image.to_rgba8();

let (width, height) = rgba.dimensions();

let encoder = WebPEncoder::new_lossless(buffer);

encoder

.encode(&rgba, width, height, ExtendedColorType::Rgba8)

.map_err(|e| JsValue::from_str(&format!("WebP encode failed: {}", e)))

}

이렇게 작성한 Rust 코드를 WASM으로 컴파일한 후 JavaScript에서 불러와 사용하면 됩니다.

| wasm빌드 및 사용

이제 구현한 Rust 코드를 WebAssembly(WASM)으로 컴파일하여 사용할 차례입니다.

이를 쉽게 처리하기 위해 wasm-pack이라는 CLI 도구를 사용합니다.

먼저 wasm-pack을 설치합니다.

cargo install wasm-pack

설치 후, 프로젝트 디렉터리에서 다음 명령어를 실행해 WASM으로 컴파일합니다.

wasm-pack build

이렇게 하면 프로젝트 내에 pkg 폴더가 생성되고, 다음과 같은 파일들이 만들어집니다.

pkg/

├── package.json # npm 패키지로 사용할 수 있도록 정의된 파일

├── your_lib_bg.wasm # 컴파일된 WebAssembly 바이너리 파일

├── your_lib.js # wasm-bindgen이 생성한 JavaScript wrapper 파일

└── your_lib.d.ts # 타입스크립트 타입 정의 파일 (선택적 사용)

위에서 생성된 JavaScript wrapper 파일(your_lib.js)을

프로젝트 내에서 import 하여 바로 사용할 수 있습니다.

이 블로그에서 구현한 프로젝트의 경우,

Rust에서 생성된 wrapper 파일(your_lib.js)을 한 번 더 감싸주는 JavaScript wrapper 함수를 추가로 작성했습니다.

사용자는 직접 이 추가 wrapper 함수를 import 하여 기존과 동일한 인터페이스로 사용할 수 있습니다.

따라서 실제로 패키지를 배포할 때는 pkg 폴더 내의 파일들과 별도의 wrapper 함수를 함께 배포하면 되며,

사용자는 최종적으로 제공된 wrapper 함수를 직접 호출하여 사용하는 형태가 됩니다.

| 성능 비교

마지막으로 가장 중요한 성능 비교를 진행해 보겠습니다.

기존의 JavaScript(Canvas API 기반) 버전과 새롭게 Rust(WASM 기반)로 재작성한 버전에서

동일한 이미지를 대상으로 다음 조건을 고정하여 비교하였습니다.

너비: 550px로 고정
품질 설정: 두 버전 모두 최대 품질로 설정
비교 포맷: JPG, PNG, WebP 각각의 포맷으로 변환

비교의 중점은 이미지 변환 시 결과 이미지의 용량, 처리 속도, 그리고 최종 이미지 품질입니다.

JPG변환

1. 자바스크립트 버전

용량: 170kb
속도: 40ms
이미지:

2. Rust 버전

용량: 114kb
속도: 700ms
이미지:

PNG 변환

1. 자바스크립트 버전

용량: 278kb
속도: 150ms
이미지:

2. Rust 버전

용량: 225kb
속도: 1000ms
이미지:

WEBP변환

1. 자바스크립트 버전

용량: 187kb
속도: 160ms
이미지:

2. Rust 버전

용량: 174kb
속도: 700ms
이미지:

| 끝

이렇게 기존의 타입스크립트(JavaScript) 기반으로 만들어진 img-toolkit 라이브러리를

Rust와 WASM을 이용해 다시 작성하는 경험을 했습니다.

이번 글에서는 단순한 성능 비교 결과만 소개했지만,

실제로 여러 세부 옵션을 조합하여 다양한 조건에서 테스트해 본 결과를 추가적으로 정리해 보면

다음과 같은 경향성을 발견할 수 있었습니다.

속도: 대부분의 상황에서 JavaScript 버전이 처리 속도 측면에서 훨씬 빨랐습니다.
용량 대비 이미지 품질: Rust 버전이 JavaScript 버전보다 동일 용량 대비 이미지 품질이 눈에 띄게 좋았습니다.

이미지 처리 작업에 있어서는 속도보다 이미지의 품질과 용량이 최우선적으로 고려되어야 하는 경우가 많다고 생각합니다.

따라서 이번 Rust 기반의 WASM 구현이 실제 이미지 처리 용도로도 충분히 유용하고 좋은 결과를 가져왔다고 판단됩니다.

현재는 두 버전 간 속도 차이가 꽤 크게 나타났지만,

이후 더 복잡하고 고도화된 이미지 처리 연산이 추가될 경우 이 격차는 좁혀질 가능성이 높습니다.

앞으로도 지속적으로 Rust와 WASM에 대해 공부하고

img-toolkit 라이브러리의 기능과 성능을 개선하면서 더욱 발전시켜 나갈 계획입니다.

| 저장소

타입스크립트 버전: https://github.com/2YH02/img-toolkit

러스트 버전: https://github.com/2YH02/img-toolkit-rust

img-toolkit: TypeScript에서 Rust + WebAssembly로 (+성능 비교)

img-toolkit: TypeScript에서 Rust + WebAssembly로 (+성능 비교)