Kích thước hình ảnh tối đa wordpress

Sử dụng hình ảnh phù hợp với kích thước phù hợp rất quan trọng đối với giao diện và hiệu suất trang web của bạn — hai điều sẽ có tác động lớn nhất đến việc doanh nghiệp, blog hoặc danh mục đầu tư của bạn có thành công hay không

Trong bài đăng này, chúng tôi sẽ giải thích cách WordPress tạo kích thước hình ảnh và cách chỉnh sửa các kích thước đó cũng như thêm kích thước hình ảnh tùy chỉnh cho một trang web bóng bẩy, trực quan tuyệt đẹp

Mục lục

Định dạng hình ảnh WordPress

Trước khi chúng tôi thảo luận về kích thước hình ảnh WordPress, điều quan trọng là phải biết về các định dạng

Hai định dạng hình ảnh phổ biến nhất được sử dụng trực tuyến là JPEG và PNG

Do kích thước tệp nhỏ hơn và chất lượng cao đối với ảnh và hình ảnh có nhiều màu sắc, JPEG là định dạng ưa thích trong phần lớn các trường hợp

PNG hoạt động tốt hơn với các hình ảnh màu hạn chế như đồ họa biểu tượng và hình vẽ đường kẻ

Chọn định dạng phù hợp cho hình ảnh của bạn rất quan trọng vì nó ảnh hưởng đến chất lượng hình ảnh và tốc độ trang web của bạn

Chọn định dạng hình ảnh phù hợp

Quy tắc cơ bản để chọn đúng định dạng là JPEG cho ảnh, PNG cho đồ họa

Đẹp và đơn giản

Nếu hình ảnh của bạn có nhiều màu sắc, có kết cấu và độ dốc khác nhau, hãy lưu nó dưới dạng JPEG. Nếu đó là logo, văn bản hoặc có màu phẳng, hãy lưu nó dưới dạng PNG

Điều gì xảy ra nếu bạn chọn sai định dạng?

Bằng mắt thường, không có gì nhiều. Bạn có thể lưu ảnh dưới dạng PNG hoặc đồ họa dưới dạng JPEG và không thể phân biệt được

Đó là khi nén được sử dụng, các vấn đề bắt đầu phát sinh

Tầm quan trọng của nén hình ảnh

Mỗi hình ảnh bạn tải lên trang web của mình phải được nén để giảm kích thước tổng thể mà không ảnh hưởng đến chất lượng của nó. Nếu không, nó sẽ gây hại cho tốc độ trang web của bạn, điều này ảnh hưởng đến trải nghiệm người dùng và khiến khách truy cập thất vọng từ bỏ trang web của bạn

Khi người dùng truy cập trang web của bạn, thiết bị của họ phải tải xuống hình ảnh để chúng hiển thị. Kích thước tệp càng lớn, tệp hình ảnh tải xuống càng lâu, làm chậm toàn bộ trang web của bạn

Theo Neil Patel, 47% mọi người mong đợi trang web của bạn tải trong vòng chưa đầy 2 giây. Và 40% sẽ từ bỏ nếu mất hơn 3 giây. Tốc độ cũng quan trọng đối với SEO. Google sử dụng thời gian tải làm yếu tố khi xếp hạng các trang trong công cụ tìm kiếm của mình. Trang càng chậm, nó sẽ hoạt động kém hơn trong kết quả tìm kiếm

Nén hình ảnh tìm sự cân bằng giữa kích thước và chất lượng tệp để cải thiện trải nghiệm người dùng

Bây giờ, nếu bạn nén cùng một ảnh dưới dạng JPEG và PNG, chất lượng có thể không đáng chú ý như vậy. Bạn có thể sẽ phát hiện ra một chút nhiễu hạt ở gần trên PNG, nhưng không có gì có thể khiến bạn ngừng sử dụng nó. Tuy nhiên, JPEG sẽ có kích thước nhỏ hơn đáng kể so với PNG. Vì vậy, bạn đi với JPEG

Nếu bạn nén cùng một đồ họa dưới dạng JPEG và PNG, thì chất lượng sẽ rõ rệt. JPEG sẽ có kích thước tệp nhỏ hơn, nhưng PNG sẽ là hình ảnh sắc nét hơn nhiều. Đó là vì nén JPEG hoạt động tốt cho ảnh nhưng không hoạt động cho đồ họa. Bạn có thể thấy

Nén mọi hình ảnh. Ảnh dưới dạng JPEG, đồ họa dưới dạng PNG

Giải thích kích thước hình ảnh WordPress

Kích thước hình ảnh của bạn tính bằng pixel cũng quan trọng như kích thước tệp của nó

Thiết kế quan trọng như tốc độ khi nói đến trải nghiệm người dùng. Nếu kích thước hình ảnh không phù hợp, nó sẽ bị mờ và bị pixel, ném các thành phần khác trên trang ra khỏi hàng hoặc gây ra hiện tượng cuộn sang một bên không cần thiết

May mắn thay, WordPress có cách xử lý hình ảnh để ngăn chặn những vấn đề như vậy

Cách WordPress xử lý hình ảnh

Bất cứ khi nào bạn tải lên một hình ảnh mới, WordPress sẽ tạo ba phiên bản bổ sung của nó với các kích cỡ khác nhau. hình thu nhỏ, trung bình và lớn. Hình ảnh gốc của bạn vẫn là một tùy chọn kích thước đầy đủ

Lý do nó làm điều này là để a) giúp cuộc sống của bạn dễ dàng hơn để bạn không phải thay đổi kích thước hình ảnh theo cách thủ công và b) để đảm bảo hình ảnh tối ưu nhất có sẵn cho các vị trí khác nhau

Ví dụ: hình ảnh được sử dụng trong hình thu nhỏ của bài đăng blog trên trang chủ của bạn sẽ nhỏ hơn hình ảnh cần thiết cho tiêu đề bài đăng blog

Kích thước hình ảnh WordPress

Các kích thước hình ảnh được xác định trước mà WordPress sử dụng là

• Kích thước hình thu nhỏ (hình vuông 150px)
• Kích thước trung bình (chiều rộng và chiều cao tối đa 300px)
• Kích thước lớn (chiều rộng và chiều cao tối đa 1024px)
• Kích thước đầy đủ (kích thước hình ảnh gốc/đầy đủ mà bạn đã tải lên)

Thay đổi kích thước hình ảnh mặc định của WordPress

Kích thước hình ảnh mà WordPress tạo ra không cố định. Nếu cài đặt mặc định không phù hợp với những gì bạn cần, bạn có thể dễ dàng chỉnh sửa kích thước

• Điều hướng đến bảng điều khiển quản trị viên WordPress của bạn
• Chuyển đến Cài đặt - Phương tiện
• Trong Cài đặt phương tiện, chỉnh sửa kích thước chiều rộng và chiều cao cho phù hợp với giá trị của bạn
• Nhấp vào Lưu thay đổi để xác nhận

Thay đổi kích thước hình ảnh mặc định trong Visual Composer

Để đơn giản hóa mọi thứ, Visual Composer sử dụng kích thước hình ảnh phương tiện mặc định của WordPress trong các thành phần nội dung sử dụng hình ảnh. Chỉnh sửa kích thước mặc định từ Cài đặt phương tiện của bạn cũng sẽ thay đổi chúng trong Trình tạo trang web, do đó bạn không cần phải loay hoay với mã

Một lợi ích của việc sử dụng Visual Composer là chức năng tối ưu hóa hình ảnh thông minh. Nếu bạn tùy chỉnh hình ảnh của mình theo kích thước ngẫu nhiên, Visual Composer sẽ thay đổi kích thước hình ảnh bằng cách sử dụng PHP thay vì chỉ thu nhỏ hình ảnh. Điều này giúp bạn giữ cho kích thước tệp của mình nhỏ hơn

Kéo và thả hình ảnh dễ dàng

Có thể chỉnh sửa hình nền không liên quan đến các yếu tố nội dung như mô tả tính năng trong Tùy chọn thiết kế. Từ đây, bạn tùy chỉnh hình ảnh của mình, tải lên nhiều hình ảnh, chọn các loại nền khác nhau và định vị lại hình ảnh cho phù hợp với thiết kế của bạn. Xem hướng dẫn này về cách di chuyển hình nền

Thực tế là các chủ đề của chúng tôi phản hồi có nghĩa là kích thước hình ảnh bạn chọn sẽ tự động thay đổi kích thước cho phù hợp với thiết bị được sử dụng để xem trang web của bạn. Bạn có thể ngay lập tức kiểm tra bố cục trang web của mình trên các loại thiết bị phổ biến nhất ở chế độ ngang máy tính để bàn, máy tính bảng và dọc cũng như ngang và dọc trên thiết bị di động, do đó bạn không cần phải lo lắng về việc gặp phải các vấn đề về thiết kế khi trang web của mình đang hoạt động

Kích thước hình ảnh được đề xuất cho nội dung WordPress

Nếu bạn quyết định rằng kích thước hình ảnh mà WordPress tự động tạo khi tải phương tiện mới lên không phù hợp với những gì bạn cần, thì đây là một số kích thước được đề xuất để nội dung trông đẹp nhất trên mọi thiết bị

• Bài đăng trên blog. 1200 x 630px
• Hình ảnh anh hùng (hình ảnh toàn màn hình). 2880 x 1500px
• Hình ảnh đặc trưng phong cảnh. 900 x 1200px
• Hình ảnh chân dung. 1200 x 900
• Trình chiếu toàn màn hình. 2800 x 1500px
• hình ảnh bộ sưu tập. 1500px x chiều rộng tự động

Thêm kích thước hình ảnh WordPress tùy chỉnh

Ba kích thước hình ảnh mặc định của WordPress sẽ phù hợp với bạn trong hầu hết các trường hợp, nhưng điều gì sẽ xảy ra nếu bạn cần hình ảnh tùy chỉnh cho một tiện ích mới mà bạn đã thêm vào trang web của mình?

Trong trường hợp này, bạn sẽ cần thêm kích thước hình ảnh tùy chỉnh của riêng mình, nghĩa là chỉnh sửa mã của trang web của bạn

Ghi chú. Bất cứ khi nào bạn chỉnh sửa mã trang web của mình, trước tiên hãy tạo một tệp sao lưu và chủ đề con

Bạn có thể thêm kích thước hình ảnh tùy chỉnh vào mã trang web của mình theo hai bước

Bước 1

1. Từ bảng điều khiển WordPress của bạn, đi đến Giao diện - Trình chỉnh sửa và chỉnh sửa các chức năng. tập tin php
2. Sao chép đoạn mã sau và dán vào tệp.
   ______0

   Thay thế 'hình ảnh của bạn' bằng bất kỳ hình ảnh tùy chỉnh nào bạn muốn thêm. Ví dụ: 'post-thumbnails' hoặc 'pop-up-banners'

3. Nhấn Save và chức năng add_image-size() sẽ được kích hoạt
4. Thêm hình ảnh và kích thước tùy chỉnh của bạn bằng định dạng này.
   ______1

   Bạn có thể thay đổi 'post-thumbnail' thành bất kỳ hình ảnh nào bạn muốn thêm. Các số 800 và 350 trong ví dụ này lần lượt là chiều cao và chiều rộng của hình ảnh của bạn. Chỉnh sửa chúng cho phù hợp

Bước 2

Khi bạn đã thêm các kích thước hình ảnh mới, bước tiếp theo là làm cho chúng hiển thị trong chủ đề của bạn. Điều này liên quan đến việc thêm một số mã vào vòng lặp đăng nơi bạn muốn hiển thị tệp của mình

Sao chép và dán đoạn mã sau vào tệp chủ đề của bạn trước khi kết thúc vòng lặp

the_post_thumbnail( 'your-image-size' );

Thay thế 'your-image-size' cho hình ảnh của bạn — e. g. 'kích thước hình thu nhỏ'. Khi hoàn tất, bạn sẽ thấy kích thước hình ảnh của mình được liệt kê dưới dạng tùy chọn khi tải hình ảnh mới lên thư viện phương tiện của mình

Bước 3

Thật không may, việc bổ sung mã không làm thay đổi hình ảnh hiện có. Để cập nhật những thứ đó sao cho chúng khớp với thứ nguyên mới của bạn, bạn sẽ cần trợ giúp từ plugin. Và WordPress chắc chắn không thiếu những thứ đó

Công cụ tốt nhất cho công việc này là Tạo lại hình thu nhỏ. Nó miễn phí và xử lý tất cả các công việc nặng nhọc

• Từ bảng điều khiển WordPress của bạn, hãy chuyển đến Plugin - Thêm mới và tìm kiếm ‘Tạo lại hình thu nhỏ’. Người bạn đang tìm kiếm là của Alex Mills
• Cài đặt và kích hoạt plugin
• Chuyển đến Công cụ - Regen. Hình thu nhỏ và nhấp vào Tạo lại hình thu nhỏ

Đó là nó. Tất cả các hình ảnh hiện có của bạn sẽ được tự động thay đổi kích thước để phù hợp với những hình ảnh mới được tải lên

Plugin kích thước hình ảnh WordPress

Vì Visual Composer là một plugin mà bạn thêm vào WordPress để thiết kế một trang web tùy chỉnh, nên bạn có thể thoải mái cài đặt các plugin khác để chạy cùng với nó. Giống như bạn sẽ làm nếu bạn đang sử dụng một chủ đề mặc định của WordPress

Chúng tôi đã nói về Tạo lại hình thu nhỏ, nhưng đây là một số chúng tôi khuyên bạn nên nén hình ảnh để cải thiện tốc độ và hiệu suất của trang web

• Imagify by WP Rocket cung cấp ba cấp độ nén hình ảnh — Bình thường, Tích cực và Cực kỳ — để giảm kích thước hình ảnh mà không làm giảm chất lượng (Tích cực mang lại sự cân bằng tốt nhất giữa nén và chất lượng). Nó cũng cho phép bạn lưu trữ hình ảnh gốc trong một thư mục riêng — tiện dụng nếu có sự cố xảy ra
• ShortPixel là một plugin đơn giản để sử dụng cho phép bạn nén hình ảnh với ít phiền phức nhất. Nếu bạn là nhiếp ảnh gia hoặc sử dụng hình ảnh chất lượng cao cho các sản phẩm hoặc dịch vụ của mình, thì tính năng sáng bóng của plugin sẽ mang lại khả năng nén mà không có nguy cơ ảnh hưởng đến chất lượng
• Thay đổi kích thước hình ảnh sau khi tải lên được thực hiện bởi nhóm phía sau ShortPixel và được thiết kế để cho phép bạn dễ dàng thay đổi kích thước hình ảnh cho phương tiện đã tải lên. Bạn có thể thiết lập chiều cao, chiều rộng cho phù hợp và chọn nén ảnh cùng lúc. Plugin chỉ hoạt động trên các hình ảnh mới được tải lên, nhưng nó có thể tiết kiệm thời gian quay đi quay lại cài đặt WordPress
• Nén hình ảnh JPEG & PNG bằng TinyPNG (một trong những công cụ web tốt nhất để nén hình ảnh) rất dễ sử dụng và sẵn sàng để sử dụng. Bạn có thể tải lên từng hình ảnh để nén hoặc đặt plugin tự động nén, vì vậy bạn không phải lo lắng về việc các tệp lớn sẽ xâm nhập vào trang web của mình
• Imsanity by CHÍNH XÁC WWW tự động thay đổi kích thước tải lên hình ảnh hàng loạt để chúng ở kích thước tối ưu cho trình duyệt. Bạn có thể chọn kích thước cho hình ảnh được tải lên các trang và bài đăng, hình ảnh được tải lên Thư viện phương tiện và hình ảnh được tải lên tiêu đề, hình nền, logo và tiện ích con. Bạn cũng có thể chuyển đổi hình ảnh từ BMP và PNG sang JPEG và chọn cài đặt chất lượng hình ảnh. Nếu bạn phụ thuộc nhiều vào phương tiện truyền thông và tải lên nhiều hình ảnh mỗi tuần, Imsanity sẽ giúp bạn tiết kiệm rất nhiều thời gian

Gói (lại

Đối với hầu hết các tác vụ xây dựng và chỉnh sửa trang web của bạn, kích thước hình ảnh mặc định của WordPress sẽ đáp ứng nhu cầu của bạn. Nếu thiết kế trang web của bạn yêu cầu các kích thước hình ảnh khác nhau, hãy sử dụng thông tin trong bài đăng này để thay đổi kích thước trong Cài đặt phương tiện và mã trang web của bạn. Bất kể kích thước hình ảnh hay số lần bạn chỉnh sửa cài đặt, Visual Composer sẽ hoạt động trơn tru với các lựa chọn của bạn, cho phép bạn dễ dàng kéo và thả hình ảnh vào nội dung của mình