시작

이제 이미지 파일을 올렸으니, 썸네일을 만들어 보자

why?
이미지 파일 용량이 크면 랜더링을 하는데 시간이 걸리게 된다. 심지어 한개도 아니고 이미지가 여러개면 그 페이지를 들어갈 때마다 랜더링 시간이 걸리기 때문에 사용자들이 답답함을 느낄 것이다.

Chrome 에는 기본적으로 Cache기능을 제공해줘서 다시 랜더링하는 데는 시간을 줄여주겠지만, 처음에 랜더링 시간이 걸리는 것은 똑같다

이미지 포맷

이미지 용량을 줄이려면 메타데이터를 제거하고 적절한 사이즈로 압축해야한다

  • JPEG : 손실압축 포맷, 파일 크기가 작음, 압축률은 60~80%가 적절, 사진 이미지 유용
  • PNG : 투명채널 지원, 문자가 있는 이미지에 유용
  • GIF : 256색 지원, 움짤 이미지

나는 사진 이미지에 적절한 JPEG로 포맷하겠다

라이브러리

아마 파이썬 자체의 기능으로 파일을 가공할 수 있을 것이다. 하지만 라이브러리를 이용하면 쉽게 썸네일 제작이 가능하다

  • Pillow : PIL(Python Imaging Library)를 fork한 것으로, 파이썬 이미지 처리를 도와준다
  • PILKit : PIL, Pillow 를 쉽게 사용하게 도와준다
  • django-imagekit : 이미지 썸네일 만드는 것을 도와주는 앱 (실제 이미지 처리시 PILKit 을 사용)

설치

$ pip install pillow # django-imagekit 사용을 위해서 사전 설치 필요
$ pip install pilkit # django-imagekit 사용을 위해서 사전 설치 필요
$ pip install django-imagekit

나는 사용하기 쉬운 django-imagekit 을 사용할 것이다. 그러려면 사전에 pillowpilkit 를 설치해야한다

설정

django-imagekit은 따로 INSTALLED_APPS 에 추가해줘야한다

settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'imagekit',
]

사용법

원본 파일 O, 썸네일 저장 O

원본파일과 썸네일을 같이 저장하는 방식이다

models.py

from django.db import models
from imagekit.models import ImageSpecField
from imagekit.processors import ResizeToFill

class Pet(models.Model):
    avatar = models.ImageField(upload_to='pet')
    avatar_thumbnail = ImageSpecField(
        source = 'avatar',            # 원본 ImageField 명
        processors = [ResizeToFill(100, 100)], # 사이즈 조정
        format = 'JPEG',           # 최종 저장 포맷
        options = {'quality': 60}) # 저장 옵션

썸네일은 CACHE 폴더에 저장된다. CACHE는 삭제기한이 정해져있는지 정확히 모르겠다... 어느 버전이상부터는 영원히 삭제 안된다는 얘기도 있고... 알게되면 정리하겠다

원본 파일 X, 썸네일 저장 O

from django.db import models
from imagekit.models import ProcessedImageField
from imagekit.processors import ResizeToFill

class Pet(models.Model):
    avatar_thumbnail = ProcessedImageField(
        upload_to = 'pet',                    # 저장 위치
        processors = [ResizeToFill(100, 100)], # 사이즈 조정
        format = 'JPEG',                    # 최종 저장 포맷
        options = {'quality': 60})          # 저장 옵션