How to Batch Resize 100+ Images for Your Website

Thứ Ba tuần trước, tôi đã thấy một lập trình viên junior trong nhóm của mình dành bốn giờ để thay đổi kích thước hình ảnh sản phẩm một cách thủ công trong Photoshop. Một. Cái. Một. Khi cô ấy cuối cùng cũng hoàn thành hình ảnh số 47 trong số 200, tôi không thể chịu đựng thêm nữa. Tôi đã kéo một cái ghế lên và chỉ cho cô ấy cách thực hiện 153 hình ảnh còn lại trong chưa đầy ba phút. Biểu cảm trên khuôn mặt cô ấy thật quý giá — vừa là sự nhẹ nhõm vừa là sự tức giận vì đã lãng phí phân nửa ngày của mình.

Tôi là Sarah Chen, và tôi đã là kỹ sư hiệu suất web trong chín năm qua, làm việc với mọi người từ các công ty khởi nghiệp đầy nhiệt huyết đến các ông lớn thương mại điện tử Fortune 500. Trong thời gian đó, tôi đã tối ưu hóa hàng nghìn trang web, và tôi có thể nói với bạn một cách chắc chắn: hình ảnh bị định kích thước không đúng là vấn đề gây ảnh hưởng đến hiệu suất hàng đầu mà tôi gặp phải. Chúng cũng là vấn đề dễ khắc phục nhất một khi bạn biết công cụ và quy trình làm việc phù hợp.

Đây là thực tế: một hình ảnh hero không tối ưu hóa có thể nặng 8-12 MB. Nhân con số đó với một catalog sản phẩm hoặc một kho blog, và bạn sẽ thấy thời gian tải sẽ khiến một modem quay số cũng phải ngượng ngùng. Nghiên cứu của Google cho thấy 53% người dùng di động từ bỏ các trang web mất hơn ba giây để tải. Mỗi giây bổ sung của thời gian tải có thể làm giảm tỷ lệ chuyển đổi đến 7%. Khi tôi nói với khách hàng rằng những hình ảnh quá cỡ của họ đang khiến họ mất sáu con số mỗi năm trong doanh thu, đột nhiên việc tối ưu hóa hình ảnh trở thành một ưu tiên.

Hướng dẫn này sẽ hướng dẫn bạn qua tất cả những gì tôi đã học về việc thay đổi kích thước hình ảnh hàng loạt một cách hiệu quả, từ việc chọn công cụ đúng đến tự động hóa toàn bộ quy trình. Cho dù bạn đang quản lý một blog cá nhân hay một trang thương mại điện tử với 10.000 sản phẩm, bạn sẽ học cách thay đổi kích thước hàng trăm hình ảnh trong vài phút thay vì hàng giờ.

Hiểu Tại Sao Kích Thước Hình Ảnh Lại Quan Trọng

Trước khi chúng ta đi vào cách thức, hãy nói về lý do. Tôi đã có vô số cuộc trò chuyện với các nhà thiết kế người mà khăng khăng tải trực tiếp những kiệt tác 6000x4000 pixel của họ lên web. "Nhưng nó trông thật sắc nét!" họ phản đối. Chắc chắn, nó trông tuyệt vời — đối với 0.3% khách truy cập có màn hình 8K và kết nối internet cáp quang.

Màn hình điện thoại thông minh trung bình rộng 1080 pixel. Hầu hết các màn hình máy tính để bàn tối đa ở 1920 pixel. Khi bạn tải lên một hình ảnh rộng 6000 pixel để hiển thị trong một vùng chứa rộng 400 pixel, trình duyệt vẫn tải toàn bộ tệp lớn, sau đó điều chỉnh kích thước nó sử dụng sức mạnh xử lý. Bạn đang buộc mọi khách truy cập phải tải về dữ liệu nhiều hơn 15 lần so với cần thiết.

Tôi đã thực hiện một cuộc kiểm toán tuần trước cho một nhà bán lẻ nội thất trực tuyến. Các trang sản phẩm của họ đang tải trong 8.7 giây trên kết nối 4G. Sau khi thay đổi kích thước hàng loạt 847 hình ảnh sản phẩm của họ từ trung bình 4.2 MB xuống còn 180 KB mỗi hình, thời gian tải trang giảm xuống còn 2.1 giây. Tỷ lệ chuyển đổi trên di động của họ tăng 34% trong hai tuần tiếp theo. Đó không phải là sự tương quan — đó là nguyên nhân được hỗ trợ bởi thử nghiệm A/B.

Đây là những gì bạn cần biết về kích thước hình ảnh tối ưu: hình ảnh hero của bạn hiếm khi cần phải vượt quá 2000 pixel rộng. Hình thu nhỏ sản phẩm hoạt động hoàn hảo ở mức 400-600 pixel. Hình ảnh bài viết blog thường trông tuyệt vời ở kích thước 1200 pixel rộng. Bất cứ thứ gì lớn hơn chỉ đang lãng phí băng thông và làm phiền khách truy cập của bạn.

Kích thước tệp cũng quan trọng như kích thước. Một JPEG được tối ưu hóa tốt nên có kích thước từ 100-200 KB cho hình ảnh toàn chiều rộng, 30-80 KB cho hình thu nhỏ. Nếu hình ảnh của bạn liên tục lớn hơn 500 KB, bạn đang làm sai điều gì đó. Các thuật toán nén hiện đại có thể giảm kích thước tệp từ 60-80% mà gần như không gây mất chất lượng hiển thị.

Chọn Công Cụ Đúng Cho Quy Trình Làm Việc Của Bạn

Tôi đã thử nghiệm hàng chục công cụ thay đổi kích thước hình ảnh qua nhiều năm, và tôi có thể nói với bạn rằng không có một giải pháp nào phù hợp với tất cả. Công cụ phù hợp phụ thuộc vào trình độ kỹ thuật của bạn, hệ điều hành và nhu cầu cụ thể. Để tôi phân tích các tùy chọn mà tôi thực sự sử dụng trong môi trường sản xuất.

"Mỗi megabyte hình ảnh dư thừa là một chuyển đổi bạn đang vứt bỏ. Khi hình ảnh hero của bạn mất 8 giây để tải trên di động, người dùng không chờ đợi để xem nó đẹp như thế nào — họ quay sang đối thủ của bạn."

Đối với người dùng Mac muốn một ứng dụng GUI, tôi luôn khuyên dùng Retrobatch. Nó có giá 29.99 USD, nhưng nó đã hoàn lại cho mình hàng trăm lần về thời gian tiết kiệm. Bạn có thể tạo các quy trình tùy chỉnh mà thay đổi kích thước, đổi tên, thêm dấu mờ và tối ưu hóa hình ảnh chỉ trong một lần xử lý. Tôi có một quy trình lấy những hình ảnh sản phẩm thô, thay đổi kích thước chúng thành ba kích thước khác nhau (hình thu nhỏ, vừa, lớn), chuyển đổi chúng sang định dạng WebP và xuất chúng vào các thư mục được tổ chức — tất cả chỉ bằng cách kéo và thả các tệp vào một biểu tượng.

Người dùng Windows nên xem xét XnConvert, hoàn toàn miễn phí và mạnh mẽ một cách bất ngờ. Nó xử lý các thao tác hàng loạt một cách tuyệt vời và hỗ trợ hơn 500 định dạng hình ảnh. Giao diện mất khoảng 15 phút để học, nhưng khi bạn đã thiết lập thao tác hàng loạt đầu tiên của mình, bạn có thể lưu nó như một thiết lập và tái sử dụng vô thời hạn.

Đối với các nhà phát triển và những người yêu thích dòng lệnh, ImageMagick là tiêu chuẩn vàng. Nó miễn phí, mã nguồn mở, và có sẵn trên mọi nền tảng. Đường cong học tập dốc hơn, nhưng sức mạnh thì không thể so sánh. Tôi có thể thay đổi kích thước 500 hình ảnh bằng một lệnh duy nhất mà chỉ mất ba giây để gõ. Quan trọng hơn, tôi có thể lập trình hóa nó, tự động hóa nó và tích hợp nó vào các quy trình xây dựng.

Nếu bạn đang quản lý một trang web WordPress, tôi khuyên bạn nên sử dụng plugin ShortPixel để tối ưu hóa liên tục, nhưng đối với các thao tác hàng loạt một lần, bạn sẽ muốn thay đổi kích thước hình ảnh trước khi tải lên chúng. Các plugin WordPress hoạt động tốt cho bảo trì, nhưng chúng không lý tưởng cho việc xử lý 200 hình ảnh cùng một lúc.

Các dịch vụ dựa trên đám mây như Cloudinary và Imgix rất xuất sắc cho các hoạt động quy mô lớn, nhưng chúng là quá nhiều cho hầu hết các trang web nhỏ đến trung bình. Tôi sử dụng chúng cho khách hàng xử lý hàng nghìn hình ảnh mỗi tháng, nhưng chúng đi kèm với phí hàng tháng bắt đầu từ khoảng 49 USD. Đối với việc thay đổi kích thước hàng loạt thỉnh thoảng, các công cụ cục bộ hiệu quả hơn về chi phí.

Phương Pháp ImageMagick: Cách Tiếp Cận Người Dùng Nâng Cao

Để tôi chỉ cho bạn phương pháp mà tôi sử dụng thường xuyên nhất. ImageMagick có thể có vẻ đáng sợ lúc đầu, nhưng một khi bạn hiểu cú pháp cơ bản, bạn sẽ tự hỏi làm thế nào bạn có thể sống mà không có nó. Tôi đã sử dụng công cụ này để xử lý hơn 50.000 hình ảnh trong năm vừa qua.

Đầu tiên, bạn cần cài đặt ImageMagick. Trên Mac với Homebrew, chỉ cần brew install imagemagick. Trên Ubuntu hoặc Debian Linux, sử dụng apt-get install imagemagick. Người dùng Windows có thể tải xuống trình cài đặt từ trang web chính thức. Việc cài đặt mất khoảng hai phút.

Đây là lệnh cơ bản mà tôi sử dụng để thay đổi kích thước một hình ảnh duy nhất: convert input.jpg -resize 1200x output.jpg. Lệnh này thay đổi kích thước hình ảnh thành 1200 pixel rộng trong khi vẫn giữ tỉ lệ. Chiều cao sẽ tự động điều chỉnh. Đơn giản, phải không?

Tuy nhiên, phép màu thực sự xảy ra với các thao tác hàng loạt. Giả sử bạn có 150 bức ảnh sản phẩm trong một thư mục và bạn cần tạo hình thu nhỏ ở kích thước 400 pixel rộng. Hãy điều hướng đến thư mục đó trong terminal của bạn và chạy: mogrify -resize 400x -quality 85 -path ./thumbnails *.jpg. Lệnh này xử lý mỗi JPEG trong thư mục, thay đổi kích thước chúng thành 400 pixel rộng, đặt chất lượng ở mức 85% (đó là điểm ngọt cho kích thước tệp và chất lượng hình ảnh), và xuất chúng vào một thư mục con hình thu nhỏ.

Tôi đã chạy lệnh này chính xác vào tuần trước trên 287 hình ảnh. Tổng thời gian xử lý: 43 giây. Nếu tôi làm điều này thủ công trong Photoshop, ngay cả với các hành động và xử lý hàng loạt, nó sẽ mất ít nhất 30 phút, có thể lâu hơn.