Giảm tải dung lượng hình ảnh không chỉ giúp tăng tốc độ website, mà còn tăng điểm chất lượng trong Google Pagespeed. Bài hôm nay mình sẽ hướng dẫn cách giảm dung lượng hay tối ưu hình ảnh khi đăng lên website WordPress.

Hiện nay có rất nhiều dịch vụ online, bạn không cần phải cài đặt bất cứ phần mềm nào trên máy tính. Rất tiện lợi phải không, các dịch vụ mình hay sử dụng như compressor.io, tinypng.com..

Về nguyên lý tối ưu hình ảnh sẽ giảm dung lượng xuống mức thấp nhất nhưng vẫn dữ được chất lượng hình ảnh gần như ban đầu. TinyPNG sử dụng công nghệ nén thông minh để giảm kích thước tệp, bằng cách giảm một vài mầu sắc trong bức hình, loại trừ các bytes được yêu cầu cho việc tạo hình ảnh. Với TinyPNG bạn có thể tối ưu ảnh dạng PNG, ngoài ra dịch vụ này duy nhất được hỗ trợ kiểu transparent, mà nhiều website hiện đại ngày nay đang sử dụng.

Một lần nữa nếu website của bạn có tối ưu tốt hình ảnh, nghĩa là không có bức ảnh nào có dung lượng lên tới MB. Tối ưu dung lượng hết mức có thể sẽ giúp giảm băng thông khi tải trang. Điều này cực kỳ quan trọng đối với những website có nhiều dữ liệu Media.

Bạn có thể tải trực tiếp hình ảnh lên compressor.io và đợi vài giây dịch vụ sẽ cho phép bạn tải hình ảnh đã được tối ưu. Compressor có hỗ trợ 4 định dạng khác nhau bao gồm: JPEG, PNG, GIF, SVG. Hỗ trợ 2 kiểu nén Lossless và Lossy, dịch vụ này sẽ giúp bạn tiết kiệm hàng ngàn KB.

Bên cạnh đó TinyPNG/TinyJPG cho phép nhà phát triển sử dụng API để tích hợp vào ứng dụng của họ. Bạn có thể sử dụng miễn phí API để nén ảnh với nhiều ngôn ngữ như PHP, Node, Python.. Nhấn vào menu Developer API để có thông tin truy cập API Key.

Ví dụ sau mình sử dụng curl để kết nối vào TinyPNG và bắt đầu nén ảnh.

curl --user api:YOUR_API_KEY \
     --data-binary @unoptimized.png -i https://api.tinify.com/shrink

Chú ý, thay YOUR_API_KEY bằng KEY của bạn , đăng ký trên website https://tinypng.com/developers

Tài khoản miễn phí, TinyPNG cho phép bạn sử dụng tối đa 500 lượt request cho mỗi tháng. Nếu vượt quá 500 hình ảnh, bạn phải trả $0.009 cho mỗi bức ảnh áp dụng với 9500 hình ảnh tiếp theo. Và đối với 10000 hình ảnh bạn sẽ có giá thấp hơn là $0.002

Cá nhân mình thì sử dụng 500 ảnh mỗi tháng là đủ rồi, tất nhiên bạn có thể đăng ký tài khoản miễn phí khác sẽ thoải mái sử dụng. Haha!

Đoạn code Python này, mình viết có thể nén nhiều hình ảnh cùng một lúc, nó sẽ quét tất cả hình ảnh trong thư mục và lưu các hình ảnh đã được tối ưu vào một thư mục khác. Bạn có thể tham khảo ví dụ sau:

import tinify,os
import time
tinify.key = "53tt5obMpDdfem85Ni99fJ9a3epvjbbk"


from os import listdir
from os.path import isfile, join

PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
mypath=PROJECT_ROOT+ '/img'
target=PROJECT_ROOT+ '/img-optimized'

if not os.path.isdir(target):
	os.mkdir(target)

onlyfiles = [f for f in listdir(mypath) if isfile(join(mypath, f))]
for f in onlyfiles:
	#print mypath+'/'+f
	filename=os.path.splitext(f)[0]
	ext=os.path.splitext(f)[1]
	#print ext
	source = tinify.from_file(mypath+'/'+f)
	# target+'/'+filename+'-optimized'+ext
	source.to_file(target+'/'+filename+ext)
	print "Compressed image file: %s"% (f)

	time.sleep(2)
	
print "Done!"

Ngoài dịch vụ compressor.io và TinyPNG/TinyJPG còn có kraken.io cũng khá nổi tiếng. Các dịch vụ hầu như có plan miễn phí, bạn có thể kết hợp các dịch vụ để tối ưu hóa bức ảnh một cách tốt nhất. Nghĩa là giảm dung lượng xuống hết mức cho phép, để vượt qua Google Pagespeed.

Trong bài này mình sẽ chia sẻ cho các bạn một công cụ nhỏ mình mới viết để cho anh em làm blog, khi viết bài thì đừng quên tối ưu hình ảnh trước khi đăng lên bài viết nhá. Mình sử dụng Python Script. Nếu bạn sử dụng hệ điều hành Windows thì cài đặt Python trước nhé.

Trước tiên, bạn cần cài đặt các thư viện để hỗ trợ TinyPNG.

pip install --upgrade tinify

Script này mình sử dụng 3 dịch vụ: TinyPNG, Kraken.io, và resmush.it. Tiếp đến bạn cài krakenio cho python.

pip install krakenio

Tạo file optimize.py và chép vào nội dung sau:

import tinify,os,shutil
import time
from krakenio import Client
import urllib
import requests

from os import listdir
from os.path import isfile, join

TINYPNG_API_KEY=''
KRAKEN_CLIENT_KEY=''
KRAKEN_SECRET_KEY=''

PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
mypath=PROJECT_ROOT+ '/img'
target=PROJECT_ROOT+ '/img-optimized'

def init():	
	tinify.key = TINYPNG_API_KEY

	if not os.path.isdir(target):
		os.mkdir(target)

def tinyjpg(fromFile, target):
	source = tinify.from_file(fromFile)
	# target+'/'+filename+'-optimized'+ext
	source.to_file(target)
	print "--> [tinyjpg] Compressed image file: %s"% (fromFile)

def kraken(fromFile, toFile):
	api = Client(KRAKEN_CLIENT_KEY, KRAKEN_SECRET_KEY)

	data = {
	    'wait': True,
		'lossy': True,
		#'webp': True
	}

	result = api.upload(fromFile, data);

	if result.get('success'):
	    url= result.get('kraked_url')
	    #download 
	    urllib.urlretrieve (url, toFile)
	    print "--> [kraken] Compressed image file: %s"% (fromFile)
	else:
	    print "Error:",result.get('message')	

def resmush(source, target):
	resmush_url='http://api.resmush.it/ws.php'
	#img = 'http://www.mywebsite/image.jpg';
	with open(source, 'rb') as f: 
		r = requests.post(resmush_url, files={'files': f})
		result=r.json()
		if not result.get('error', False):
			urllib.urlretrieve (result.get('dest'), target)
			print "--> [resmush] Compressed image file: %s"% (target)
		else:
			print "[resmush] Error compress."

init()

def start():
	onlyfiles = [f for f in listdir(mypath) if isfile(join(mypath, f))]
	for f in onlyfiles:
		#print mypath+'/'+f
		filename=os.path.splitext(f)[0]
		ext=os.path.splitext(f)[1]
		source=mypath+'/'+f
		saved=target+'/'+filename+ext
		#print ext

		resmush(source, saved)
		kraken(saved, target+'/'+filename+'-1'+ext)
		tinyjpg(target+'/'+filename+'-1'+ext, target+'/'+filename+'-2'+ext)

		os.remove(saved)
		os.remove(target+'/'+filename+'-1'+ext)
		os.rename(target+'/'+filename+'-2'+ext, saved)

		# remove file from source
		os.remove(source)

		time.sleep(2)

start()

Đừng quên thay TINYPNG_API_KEY, KRAKEN_CLIENT_KEY, KRAKEN_SECRET_KEY bằng tài khoản của bạn để script hoạt động đúng.

Vậy là xong, giờ mở cmd lên và trỏ vào thư mục chứa file optimize.py, tiếp đến hãy copy những hình ảnh bạn muốn tối ưu vào trong thư mục img, và các hình ảnh được tối ưu sẽ lưu ở thư mục img-optimized.

Cuối cùng chạy lệnh sau:

python optimize.py

Đợi vài giây bạn các hình ảnh được nén sẽ tự động với cùng tên của file gốc. Tool này có sử dụng nhiều dịch vụ cùng một lúc để giúp bạn tối ưu hình ảnh hết mức có thể, bạn hoàn toàn có thể sử dụng cho website của mình.

Ok, mình hy vọng qua bài viết này bạn sẽ hiểu được việc giảm dung lượng hình ảnh trên trang website đóng vai trò quan trọng như thế nào. Không những tăng tốc độ truy cập trang cho trải nghiệm người dùng mà công cụ tìm kiếm sẽ thuận lợi hơn khi tải các bức ảnh có dung lượng thấp trên bài viết của bạn một cách nhanh chóng.

Nếu có những câu hỏi nào bạn còn vướng mắc xin đừng quên để lại bình luận dưới bài viết này nhé. Chúc các bạn thành công.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

Tối ưu hình ảnh cho Pagespeed Insight

HOÀNG WEB

SẢN PHẨM

LIÊN KẾT

HOÀNG WEB

KẾT NỐI VỚI TÔI

SẢN PHẨM

LIÊN KẾT