Đúng kích thước hình ảnh WordPress
|
Hình ảnh trung bình chiếm hơn 60% số byte cần thiết để tải một trang web. Bạn cần đặc biệt chú ý đến điều này khi làm việc với trang web của mình Show
"Hình ảnh có kích thước không khớp trên một trang web" nghĩa là gì?Điều này có nghĩa là trang chứa hình ảnh lớn hơn kích thước chúng được hiển thị tại. Tại sao? . Và trình duyệt lãng phí thời gian thay đổi kích thước hình ảnh cho phù hợp. Hơn nữa, người dùng nên tải xuống dữ liệu vô ích, làm tăng thời lượng tải Bạn có thể đọc thêm về cách sử dụng hình ảnh trên trang web của mình Điều gì gây ra vấn đề này?Bạn có một trang web hoạt động tốt trên web và bạn không gặp vấn đề gì với kích thước hình ảnh. Nhưng mọi thứ có thể hoàn toàn khác trong phiên bản di động của dự án của bạn vì bạn không thấy trước câu hỏi này trong tài liệu HTML của các trang. Sau đó, hình ảnh không thể thích ứng với các kích thước màn hình khác nhau của thiết bị di động. Và bạn gặp sự cố “Hình ảnh có kích thước không khớp trên một trang web” Làm thế nào để kiểm tra vấn đề?Bạn cần thu thập dữ liệu trang web bằng máy tính để bàn đặc biệt hoặc các công cụ trực tuyến. Ví dụ: ứng dụng Lighthouse có thể thu thập tất cả hình ảnh trên một trang rồi so sánh kích thước của hình ảnh được hiển thị với kích thước của hình ảnh thực tế. Bạn nhận được cảnh báo rằng hình ảnh không xác thực được nếu kích thước hiển thị nhỏ hơn ít nhất 4KiB so với kích thước thực tế. Tiếp theo, bạn cần kiểm tra các trang khác trên trang web của mình Phân tích không chỉ câu hỏi Hình ảnh có kích thước phù hợp mà toàn bộ trang web Thực hiện kiểm toán đầy đủ để tìm hiểu và khắc phục SEO kỹ thuật của bạn nhằm cải thiện kết quả SERP của bạn Đã xảy ra sự cố. Vui lòng thử lại sau Khởi chạy kiểm toánTại sao nó quan trọng?Người dùng coi trọng tốc độ và muốn làm việc với các trang tải nhanh. Do đó, bạn cần theo dõi sự tương ứng giữa kích thước hiển thị và kích thước thực của hình ảnh trên trang web của mình Làm thế nào để khắc phục vấn đề?Chúng tôi đã chuẩn bị một số mẹo hay nhất để định cỡ hình ảnh phù hợp trên trang web của bạn (dành cho người dùng WordPress hoặc CMS khác)
Những mẹo này giúp tiết kiệm dữ liệu và cải thiện thời gian tải trang Bạn cũng có thể xem video của Pete LePage từ Google Developers về cách sử dụng bí mật cho hình ảnh phản hồi chuyên gia SEO Iryna là chuyên gia SEO tại Sitechecker. Cô chịu trách nhiệm về các danh mục lưu trữ web và đánh giá. Bị ám ảnh với việc tạo nội dung và phân tích có giá trị 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 WordPressTrướ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 hình ảnh phù hợpQuy tắc cơ bản để chọn đúng định dạng là JPEG cho ảnh, PNG cho đồ họa Đẹp và đơn giản
Đ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 ảnhMỗ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
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 được 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 WordPressKí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
Cách WordPress xử lý hình ảnhBấ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 WordPressCác kích thước hình ảnh được xác định trước mà WordPress sử dụng là
Thay đổi kích thước hình ảnh mặc định của WordPressKí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
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 WordPressNế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ị
Thêm kích thước hình ảnh WordPress tùy chỉnhBa 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
Bước 2Khi 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 3Thậ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
Đó 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 WordPressVì 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
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 Kích thước hình ảnh WordPress của tôi nên là bao nhiêu?Các kích thước hình ảnh tốt nhất cho WordPress
. Kích thước hình ảnh tiêu đề WordPress phải là 1048 x 250 pixel. Hình ảnh nổi bật phải là 1200 x 900 pixel ở chế độ ngang hoặc 900 x 1200 pixel nếu ở chế độ dọc. Hình nền phải là 1920 x 1080 pixel. 1200 x 630 pixels. WordPress header image size should be 1048 x 250 pixels. The featured image should be 1200 x 900 pixels in landscape mode or 900 x 1200 pixels if in portrait mode. Background images should be 1920 x 1080 pixels.
Bạn có nên thay đổi kích thước hình ảnh trước khi tải lên WordPress?Mọi hình ảnh bạn thêm vào trang web của mình không chỉ được thay đổi kích thước trước khi tải lên mà còn được nén, ít nhất một chút, trước khi tải chúng lên WordPress . Và không, một plugin tối ưu hóa hình ảnh như WP Smush sẽ không đủ nếu chúng được tải lên ở kích thước lớn (hơn 1MB).
WordPress có tự động thay đổi kích thước hình ảnh không?Giữ cho trang web của bạn được tối ưu hóa với WP Engine
. Tuy nhiên, khi bạn đang sử dụng một chủ đề hoặc plugin cũng tạo bản sao cho hình ảnh của mình, điều này có thể dẫn đến các bản sao lưu lớn không cần thiết và dung lượng ổ đĩa ít hơn. By default, WordPress automatically generates multiple image sizes during the upload process. However, when you're using a theme or plugins that also create copies of your images, this can lead to unnecessarily large backups and less disk space. |
