apkm-search

Tối ưu hóa kích thước hình ảnh trên WordPress

Hình ảnh là một phần không thể thiếu trên website, nhưng làm thế nào để tối ưu hình ảnh để website load nhẹ và nhanh là một vấn đề cần giải quyết.

    Tối ưu hóa hình ảnh trên trang web là một nhiệm vụ khó khăn vì hình ảnh là phần nặng và chiếm nhiều tài nguyên của hosting nhất. Có nhiều cách giúp tối ưu như giảm số lượng hình ảnh sử dụng, nén hình ảnh, sprites hoặc svg. Nhưng có một điều mà nhiều site sử dụng WordPress gặp phải là không xác định chính xác kích thước hình ảnh cần sử dụng.

    Một điều mà dân SEO hay nhắc đến khi muốn SEO thành công một website là phải có nội dung và dung lượng nhẹ. Nhưng nếu bài viết mà chỉ toàn chữ thì nhìn rất chán. Bạn có một bức ảnh 3000px và bạn sẽ không muốn người dùng phải load file ảnh đó chỉ để xem trong nội dung bài viết của bạn với chiều rộng 600px.

    WordPress xử lý hình ảnh như thế nào?

    Khi bạn thêm một hình ảnh vào bài viết thì mặc định wordpress sẽ tạo ra 3 ảnh với kích thước do bạn định tại Setting >> Media với 3 kích thước chuẩn là thumbnail, medium, large. Khi bạn muốn sử dụng hình ảnh với kích thước medium thì thay vì phải load bức ảnh gốc, WordPress chỉ lấy file ảnh với kích thước medium của bức ảnh gốc.

    Điều này giúp bạn giảm được băng thông trên máy chủ và thời gian xử lý trên máy của khách. Đây là điều hiển nhiên vì ảnh kích thước 600 × 400 chắc chắn sẽ load nhanh hơn 1200 × 800. Nhưng bạn cũng sẽ tốn dung lượng lưu trữ vì sẽ có nhiều file được tạo ra hơn.

    Nếu bạn để hình ảnh gốc và thu nhỏ ảnh lại thì trình duyệt sẽ phải tốn tài nguyên để tính toán hiển thị hình ảnh phù hợp.Điều này tốn thời gian nếu website của bạn có nhiều hình ảnh.

    Kích thước ảnh cho từng vị trí thích hợp

    Ở phần hình ảnh chúng ta cần chú ý đến là ảnh chèn trong bài viết và ảnh đại diện (featured image). Với hình ảnh trong bài viết thì bạn chỉ cần chọn kích thước ảnh sao cho phù hợp với chiều rộng của phần hiển thị nội dung. Và cũng không quan trọng chuyện 2 ảnh có kích thước chênh lệch nhau vài chục px. Chúng ta sẽ chủ yếu tập trung vào ảnh đại diện. Vì ảnh đại diện sẽ được sử dụng nhiều nơi nên kích thước của ảnh cũng quan trọng hơn.

    Một ví dụ cụ thể như khi hiển thị danh sách bài viết liên quan bạn có thể dùng kích thước 178×178. Với những thêm có hình ảnh nằm dưới tiêu đề bạn có thể sử dụng ảnh kích thước 1200×600.

    Nếu bạn lưu nhiều ảnh với những kích thước khác nhau thì có thể dễ dàng truy cập vào từng kích thước cụ thể để chèn vào bài viết. Có câu hỏi đặt ra là ngoài 3 kích thước chuẩn của WordPress bạn muốn thêm những kích thước ảnh khác thì làm sao? Rất may là WordPress có hổ trợ chức năng này.

    Tạo thêm kích thước ảnh thumbnail

    Muốn thêm kích thước ảnh mới bạn có thể sử dụng function add_image_size() để thêm những kích thước hình ảnh mà website bạn cần. Bạn chỉ cần thêm đoạn code bên dưới vào file functions.php trong theme bạn sử dụng hoặc trong plugin.

    Trong đó:

    • $name : tên của kích thước ảnh bạn muốn tạo.
    • $width : chiều rộng của ảnh. Set 9999 để chiều rộng dựa vào $height.
    • $height: chiều cao của ảnh
    • $crop:
      • false – tính theo tỉ lệ của ảnh gốc (ảnh đầy đủ nhưng kích thước không chuẩn)
      • true – cắt hình ảnh đúng với kích thước qui định (có thể mất vài chi tiết)
      • array – bạn sẽ đưa vào vị trí muốn cắt theo trục tọa độ (x_crop_position, y_crop_position)

    Ví dụ minh họa:

    Khi bạn thêm đoạn này vào theme hay plugin thì khi bạn thêm hình ảnh WordPress sẽ tự động tạo ra những ảnh với kích thước bạn đã qui định.

    Cách sử dụng kích thước ảnh

    Bạn có thể sử dụng function the_post_thumbnail() để lấy kích thước ảnh phù hợp với vị trí mà bạn mong muốn. Đây là hàm giúp lấy ảnh đại diện của bài viết. Bạn chỉ cần truyền vào tên kích thước ảnh mà bạn đã định nghĩa phía trên.

    Với dòng code trên bạn sẽ lấy ảnh đại diện với kích thước 178×178 để sử dụng. Cách làm tương tự với kích thước ảnh khác.

    Regenerating Thumbnails

    Khi bạn thêm kích thước ảnh mới thì chỉ những ảnh nào được thêm vào sau mới có kích thước mới, còn những ảnh trước đó thì không. Vậy làm sao để tạo lại ảnh đại diện của ảnh củ với kích thước mới. Bạn có thể sử dụng plugin Regenerate Thumbnails. Plugin này có tác dụng giúp bạn tạo lại những ảnh cũ với kích thước ảnh mới. Ví dụ bạn thêm ảnh example.jpg thì sau khi sử dụng plugin trên bạn sẽ có những file ảnh kèm theo như example-178×178.jpg. Như vậy là đã xong bạn có thể sử dụng ảnh bình thường.

    Responsive Images

    Một vấn đề nữa là hình ảnh trong nội dung bài viết. Ví dụ bạn có một ảnh 600px ở bài viết với giao diện desktop thì quá đẹp nhưng ở giao diện mobile thì ảnh 600px lại quá to. Làm sao để hiển thị hình ảnh tùy vào chiều rộng của màn hình điện thoại. Nhiều bạn sẽ sử dụng cách dùng thuộc tính CSS max-width:100%. Đây cũng là một cách nhưng thật sự chưa tối ưu. Như mình đã nói ở trên nếu chúng ta thu nhỏ ảnh lại thì trình duyệt sẽ cần thời gian để tính toán lại kích thước hình ảnh. Ảnh càng lớn mà thu lại quá nhỏ sẽ càng tốn nhiều thời gian tính toán cũng như thời gian tải về.

    Với vấn đề này mình xin giời thiệu đến các bạn plugin hammy. Đây là plugin dự trên chiều rộng của màn hình hiển thị sẽ tính toán bằng javascript để load ảnh với kích thước phù hợp.

    Kết luận

    Có rất nhiều cách để bạn có thể tối ưu hình ảnh trên website của mình. Nếu sử dụng kết hợp sẽ mang lại hiệu quả cao hơn. Nếu bạn có cách nào giúp tối ưu hình ảnh WordPress xin đừng ngại ngừng mà hãy bình luận bên dưới để mình có thể bổ sung thêm vào bài viết này.

    BÌNH LUẬN BÀI VIẾT

    Leave a Reply

    6 Comments on "Tối ưu hóa kích thước hình ảnh trên WordPress"

    Notify of
    avatar
    Sort by:   newest | oldest
    KeniVinhLevel 1
    2 comments

    Cách tốt nhất là tối ưu ảnh trước khi tải lên WP như chỉnh kích thước, chèn watermark và giảm kích thước ảnh

    Toán cấp 3Level 1
    2 comments

    Cám ơn bạn đã đưa ra cách tối ưu hóa kích thức hình ảnh trên wordpress. Mình sẽ làm luôn.

    nguoivanchuyen366Level 1

    Cảm ơn bạn vì bài viết.

    Chu Tuấn1 năm gắn bó cùng NQDung.COMLevel 1
    1 comment

    Khi up 1 ảnh lên trang của mình tự sinh ra rất nhiều ảnh con, có những ảnh ko dùng đến, có cách nào để hạn chế wordpress tự sinh thêm ảnh ko bạn? :oh:

    Tài Liệu2 năm gắn bó cùng NQDung.COMLevel 1
    1 comment

    Rất hay

    Dao Tien2 năm gắn bó cùng NQDung.COMLevel 1
    1 comment

    Bài viết khá dễ hiểu, xin chân thành cảm ơn bác!
    😀

    wpDiscuz