Tại sao wordpress mở rộng hình ảnh của tôi
Cung cấp hình ảnh được chia tỷ lệ là một trong những cách bị bỏ qua nhiều nhất để mang lại hiệu suất trang web tốt hơn. Hình ảnh của bạn có giữ lại trang web WordPress của bạn không? Show
Hình ảnh chiếm rất nhiều dung lượng kích thước tệp, đặc biệt nếu chúng bị cồng kềnh và quá khổ. Đó là lý do tại sao hình ảnh phải là số một trong danh sách những thứ cần tối ưu hóa nếu bạn đang cố gắng cải thiện tốc độ trang, chuyển đổi hoặc bán hàng Trong bài đăng này, chúng tôi sẽ tập trung vào cách cung cấp hình ảnh được chia tỷ lệ với WordPress. Bạn sẽ tìm hiểu cách định kích thước hình ảnh phù hợp trong WordPress theo nhiều cách khác nhau và cách cải thiện đáng kể quy trình tối ưu hóa hình ảnh của bạn với Smush Pro Đây là mọi thứ bạn cần biết về tối ưu hóa, thay đổi kích thước và cung cấp hình ảnh được chia tỷ lệ
Hình ảnh được chia tỷ lệ là gì?Hình ảnh trên web phải nằm trong vùng Goldilocks. không quá lớn cũng khong quá bé. Họ phải vừa phải. Nếu chúng quá nhỏ và được phóng to lên, chúng sẽ bị mờ Hình ảnh này quá nhỏ và được phóng to bằng thuộc tính chiều rộng HTMLMặt khác, nếu một hình ảnh quá lớn, trình duyệt sẽ thu nhỏ nó xuống kích thước phù hợp. Điều này không ảnh hưởng đến hình thức của hình ảnh, nhưng nó sẽ thêm vào kích thước tệp của trang Hướng dẫn đầy đủ để làm chủ việc tối ưu hóa hình ảnh Vì bạn không thể thấy sự thay đổi về chất lượng nên trọng lượng tăng thêm trên các tệp hình ảnh sẽ dễ dàng bị bỏ qua. Và vì hầu hết mọi người không biết có vấn đề nên họ không khắc phục. Họ tiếp tục dựa vào trình duyệt để phục vụ đúng kích cỡ, bởi vì đó là mục đích của trình duyệt, phải không? Sai Khi bạn nhận được cơ hội "hình ảnh có kích thước phù hợp" trong Google PageSpeed Insights, bạn sẽ biết đã đến lúc phải chia tỷ lệ một số hình ảnhTheo Google…
(Nguồn. nhà phát triển. Google. com) Cung cấp một hình ảnh quá lớn gây hại cho bạn theo nhiều cách
Nhập hình ảnh được chia tỷ lệ. Hình ảnh được chia tỷ lệ là hình ảnh có kích thước phù hợp với kích thước chính xác mà bạn đang sử dụng cho. Không giống như cắt xén, cuối cùng có thể thay đổi tỷ lệ của hình ảnh, chia tỷ lệ bảo toàn kích thước Nếu bạn đang đọc bài đăng này trên màn hình kích thước đầy đủ, thì phần thân của bài đăng này có chiều rộng là 600px. Vì tất cả chúng ta đều hướng tới việc tối ưu hóa ở đây tại WPMU DEV, nên khi tôi tạo hình ảnh cho các bài đăng trên blog, tôi làm cho chúng có chiều rộng chính xác là 600px. Đó là kích thước chính xác mà tôi cần để trình duyệt không phải thực hiện thêm bất kỳ công việc nào và do đó bạn không phải sử dụng thêm dữ liệu Hướng dẫn Mega cơ bản để tăng tốc WordPress Các trình tối ưu hóa tốc độ trang web như Hummingbird, GTmetrix và Google PageSpeed Insights sẽ đề xuất chia tỷ lệ hình ảnh để cải thiện hiệu suất GTmetrix sẽ nói "cung cấp hình ảnh được chia tỷ lệ" nếu hình ảnh của bạn quá lớn và đang làm chậm trang của bạn, hãy phục vụThuộc tính srcset và kích thướcKhông phải thuộc tính srcset và size có nhiệm vụ thay đổi kích thước hình ảnh sao? có và không. Bạn muốn tối ưu hóa đỉnh cao phải không? Thuộc tính
Ở trên, WordPress đang nói với trình duyệt, bạn biết nhiều về người dùng hơn tôi, đây là hình ảnh bạn muốn với 3 kích cỡ khác nhau, hãy chọn kích thước phù hợp nhất Khi trình duyệt cần hiển thị Gravatar 75px x 75px bên cạnh một bình luận, nó sẽ chọn tùy chọn đầu tiên trong tập hợp và thay đổi kích thước một chút. Nếu người dùng có thiết bị retina, nó sẽ chọn tùy chọn thứ hai Điều này cắt giảm một số lãng phí, nhưng mở rộng quy mô sẽ cho phép bạn có thêm một chút hiệu suất Cung cấp hình ảnh được thu nhỏ trong WordPressĐể bắt đầu, bạn cần biết kích thước của hình ảnh sẽ được sử dụng trên trang web của mình. Tôi đang nói về hình ảnh biểu ngữ, hình ảnh anh hùng, hình ảnh bài đăng trên blog, Gravatar, v.v. Xem hướng dẫn nhanh của chúng tôi về cách phát hiện hình ảnh có kích thước không chính xác trong WordPress Chúng tôi muốn biết kích thước lớn nhất mà mỗi hình ảnh sẽ được hiển thị là bao nhiêu vì chúng tôi biết rằng mọi thứ vượt quá ngưỡng này đều vô dụng Ví dụ: giả sử tôi muốn sử dụng ảnh đại dương trên trang chủ của trang web của mình. Hình ảnh ở trạng thái không thay đổi là 4534px x 3023px Tôi chưa làm bất cứ điều gì để thay đổi kích thước của ảnh...chưaĐối với hình ảnh trong phần nội dung của bài đăng trên blog, có thể bạn sẽ cần phân phát hình ảnh có chiều rộng từ 600px-960px và đối với hình ảnh nổi bật chính có chiều rộng bằng chiều rộng của màn hình máy tính để bàn, bạn đang xem nội dung có chiều rộng 1600px Ngoài ra, hãy nhớ rằng bạn sẽ cần tăng gấp đôi các kích thước này để phù hợp với màn hình retina. Kích thước lớn nhất mà hình ảnh 1600px sẽ cần là 3200px Để tìm kích thước mà hình ảnh cần phải phù hợp một cách hoàn hảo, chúng tôi sẽ tìm kiếm hình ảnh trên trang web và mở các công cụ dành cho nhà phát triển trình duyệt Nếu bạn đang sử dụng Chrome, hãy nhấp chuột phải vào hình ảnh và đi tới Kiểm tra. Trong Firefox, chọn Kiểm tra phần tử Bạn cũng có thể sử dụng Ctrl + Shift + ITrong Chrome, khi di chuột qua URL của hình ảnh, bạn sẽ thấy kích thước mà hình ảnh được hiển thị với kích thước hình ảnh "tự nhiên" ban đầu trong ngoặc đơn. Tệp hình ảnh lớn đó là những gì khách truy cập của bạn đang tải xuống Hình ảnh trên 3000 pixel quá lớn, thật lãng phíĐiều này tương tự trong Firefox. Khi bạn kiểm tra phần tử, bạn sẽ nhận thấy rằng bên cạnh hình ảnh là kích thước Điều này cho chúng tôi biết kích thước hình ảnh chúng tôi cầnBây giờ chúng ta đã biết kích thước mà chúng ta cần cho hình ảnh, chúng ta có thể thay đổi kích thước hình ảnh đúng cách trong WordPress theo nhiều cách khác nhau Cắt hình ảnh trong Thư viện phương tiệnĐể cắt hình ảnh theo cách thủ công, hãy chuyển đến Phương tiện > Thư viện và nhấp vào hình ảnh bạn muốn cắt. Sau đó, nhấn nút Edit Image để mở giao diện chỉnh sửa Xem chi tiết tệp đính kèm của hình ảnh, sau đó nhấp vào nút Chỉnh sửa hình ảnhChia tỷ lệ hoặc cắt hình ảnh khi cần bằng các tùy chọn tương ứng ở bên phải. Xin lưu ý rằng nếu bạn chia tỷ lệ hình ảnh cho phù hợp với chiều rộng bạn cần, thì chiều cao có thể ngắn hơn hoặc dài hơn kích thước đã xác định trong chủ đề của bạn tùy thuộc vào kích thước của hình ảnh gốc Nếu bạn chọn chia tỷ lệ hình ảnh của mình, nó vẫn ở tỷ lệ phù hợp so với hình ảnh gốc. Mặt khác, nếu bạn quyết định cắt hình ảnh của mình, nó có thể không nhất thiết phải được chỉnh sửa theo tỷ lệ tùy thuộc vào kích thước bạn chọn Bạn có thể chia tỷ lệ hình ảnh của mình bằng cách nhập chiều rộng và chiều cao mong muốn, sau đó nhấp vào nút Tỷ lệ hoặc nếu bạn muốn cắt hình ảnh của mình, bạn có thể làm như vậy bằng cách nhấp và kéo chuột qua hình ảnh và chọn khu vực bạn muốn hiển thị. Sau đó, nhả chuột để hiển thị lựa chọn của bạn 9 tính năng ẩn trong thư viện phương tiện WordPress Chỉ người dùng mới biết Bạn có thể nhấp và kéo các ô vuông trên các cạnh và cạnh để thực hiện bất kỳ điều chỉnh cần thiết nào đối với chiều rộng và chiều cao hoặc bạn có thể nhập kích thước chính xác mà bạn muốn vào trường Lựa chọn ở bên phải Tài khoản WPMU DEV PRO Các công cụ WP chuyên nghiệp tốt nhất của chúng tôi trong một góiNhập email của bạn Bắt đầu dùng thử miễn phí Dùng thử miễn phí trong 7 ngày hoàn tiền trong 30 ngày Bạn cũng có tùy chọn để nhập tỷ lệ khung hình mong muốn cho hình ảnh
Bạn cũng có thể nhấp và kéo khu vực đã chọn để di chuyển đến khu vực chính xác mà bạn muốn hiển thị Nếu bạn đã cắt hình ảnh của mình bằng cách chọn một khu vực của hình ảnh bằng chuột, hãy nhấp vào biểu tượng cắt phía trên hình ảnh của bạn Tiếp theo, chọn kích thước hình ảnh được xác định trước mà bạn muốn áp dụng các thay đổi của mình trong Cài đặt hình thu nhỏ. Tùy chọn này có thể hữu ích nếu bạn muốn chỉnh sửa hình ảnh trong khi vẫn giữ nguyên hình thu nhỏ Ví dụ: bạn có thể muốn có một hình thu nhỏ hình vuông chỉ hiển thị một phần của hình ảnh Khi bạn thực hiện xong các thay đổi của mình, hãy nhấp vào nút Lưu bên dưới hình ảnh của bạn Chọn kích thước hình ảnh mà bạn muốn áp dụng thay đổi kích thước của mình, sau đó nhấp vào LưuBạn cũng có thể thay đổi kích thước hình ảnh của mình theo cách thủ công trong khi chỉnh sửa bài đăng hoặc trang bằng cách nhấp vào nút Thêm phương tiện phía trên trình chỉnh sửa Sau đó, nhấp vào tab Thư viện phương tiện và chọn một trong những hình ảnh được liệt kê. Tiếp theo, nhấn vào liên kết Edit Image bên phải để truy cập vào giao diện chỉnh sửa tương tự đã đề cập ở trên Bạn cũng có thể thay đổi kích thước hình ảnh theo cách thủ công trong khi chỉnh sửa bài đăng hoặc trangWordPress Thay đổi kích thước hình ảnh bằng Cài đặt phương tiện như thế nào?Nếu hình ảnh bạn cần thay đổi kích thước theo cách thủ công là kích thước mặc định mà WordPress tạo, thì bạn có thể thử chỉnh sửa chúng qua Cài đặt phương tiện của bảng điều khiển quản trị viên của mình Kích thước hình ảnh mặc định của WordPress là hình thu nhỏ, trung bình, lớn và kích thước đầy đủ, tuy nhiên, kích thước đầy đủ đề cập đến kích thước ban đầu của hình ảnh được tải lên và không thể thay đổi trong Cài đặt phương tiện. Để chỉnh sửa ảnh gốc, tham khảo chi tiết ở trên Để thay đổi kích thước kích thước hình ảnh mặc định theo cách thủ công, hãy đi tới Cài đặt > Phương tiện và nhập chiều rộng tối đa và chiều cao tối đa bạn cần cho kích thước hình ảnh áp dụng mà bạn muốn thay đổi trong các trường tương ứng Nếu bạn cần thay đổi kích thước hình thu nhỏ, bạn cũng có thể tùy ý giữ hộp kiểm được chọn để cắt hình thu nhỏ theo kích thước chính xác mà bạn chỉ định. Thông thường, hình thu nhỏ được tự động chỉnh sửa theo tỷ lệ Khi bạn hoàn tất, hãy nhấp vào Lưu thay đổi ở cuối trang Bạn có thể chỉnh sửa kích thước hình ảnh mặc định của WordPress thông qua Cài đặt phương tiệnHãy nhớ rằng các kích thước này có thể được sử dụng ở nhiều nơi trong chủ đề của bạn, do đó bạn có thể sẽ chỉnh sửa hình ảnh mà bạn không muốn thay đổi kích thước. Bạn cũng có thể thêm kích thước tùy chỉnh vào WordPress Khi bạn đã lưu các thay đổi của mình, hãy cài đặt và kích hoạt plugin Tạo lại hình thu nhỏ để thay đổi kích thước hình ảnh bạn đã tải lên trước đó để tuân thủ các kích thước mới mà bạn vừa đặt Chỉnh sửa tệp trong PaintMở hình ảnh của bạn trong Paint, Adobe Photoshop hoặc trình chỉnh sửa hình ảnh bạn chọn. Chúng tôi sẽ sử dụng các thứ nguyên mà chúng tôi đã đưa ra trong Công cụ dành cho nhà phát triển Cách thay đổi kích thước hình ảnh trong PaintTrong Paint, chuyển đến thay đổi kích thước trong tab trang chủ. Một hộp sẽ mở ra cho phép bạn nhập các kích thước mới. Chọn nút radio pixel rồi chỉnh sửa kích thước ngang. Kích thước dọc sẽ tự động được thay đổi kích thước nếu hộp kiểm duy trì tỷ lệ khung hình được chọn. đó là những gì chúng tôi muốn. Nếu hộp không được chọn, bạn sẽ phải tự tính toán Khi bạn điều chỉnh xong kích thước, hãy nhấp vào ok. Sau đó, bạn có thể lưu tệp trong Paint, tải lại lên WordPress và thay thế hình ảnh bằng tệp mới Tối ưu hóa hình ảnh với SmushSmush và Smush Pro có thể giúp bạn tiết kiệm rất nhiều thời gian khi bắt đầu tối ưu hóa hình ảnh của mình Phát hiện kích thước saiCả Smush và Smush Pro đều có tùy chọn phát hiện kích thước sai trong cài đặt plugin. Nếu bạn giống tôi và thỉnh thoảng quên thay đổi kích thước hình ảnh của mình, tính năng này sẽ giúp bạn xem hình ảnh nào đang làm chậm trang web của bạn Khi bạn truy cập trang web của mình, hình ảnh quá lớn hoặc quá nhỏ sẽ xuất hiện với đường viền màu vàng Khi bạn mở tab thông tin (có thấy biểu tượng chữ “i” màu vàng không?) Smush sẽ cho bạn biết kích thước hình ảnh có vấn đề gì. cảm ơn Chỉ quản trị viên mới nhìn thấy hình ảnh được đánh dấu và thông báo lỗiĐể bật tính năng này trong Smush và Smush Pro, hãy chuyển đến trình đơn plugin của bạn và trong phần Công cụ, bật Phát hiện và hiển thị hình ảnh có kích thước không chính xác. Sau đó, lưu để cập nhật cài đặt của bạn và xem hình ảnh có kích thước không chính xác ở mặt trước của trang web của bạn Tính năng này có sẵn trong phiên bản miễn phí của SmushTự động thay đổi kích thước hình ảnhBạn muốn ngăn bản thân và những người khác tải lên những hình ảnh siêu khổng lồ để bạn không ngốn quá nhiều dung lượng lưu trữ trên dịch vụ lưu trữ của mình? Trong cài đặt Bulk Smush của plugin Smush, hãy chuyển đến phần Thay đổi kích thước hình ảnh và bật Thay đổi kích thước hình ảnh kích thước đầy đủ của tôi. Trước khi hình ảnh được tải lên thư viện phương tiện của bạn, Smush sẽ thay đổi kích thước hình ảnh đó để phù hợp với chiều rộng và chiều cao mà bạn chỉ định Lưu ý cách Smush cho bạn biết hình ảnh có kích thước lớn nhất trên trang web của bạn là bao nhiêu và sau đó nhân đôi nó cho các thiết bị RetinaSmush cũng cung cấp cho bạn tùy chọn giữ một bản sao của ảnh gốc Lo lắng về việc làm rối tung hình ảnh của bạn?Tính năng này về cơ bản sẽ cắt bỏ phần thừa khỏi hình ảnh lớn nhất của bạn Một giảm, hàng trăm để điNhưng điều gì sẽ xảy ra nếu bạn muốn tất cả các hình ảnh đã tải lên của mình có kích thước hoàn hảo mà không phải thực hiện các bước trên và chia tỷ lệ mọi hình ảnh theo cách thủ công? Thật dễ dàng, hãy trở thành thành viên WPMU DEV và có quyền truy cập vào CDN nhanh như chớp của Smush Pro (hoặc chỉ cần có Smush Pro của riêng mình) Mặc dù máy chủ lưu trữ của bạn có thể bao gồm CDN với tài khoản lưu trữ của bạn để cải thiện hiệu suất trang web của bạn, nhưng CDN của Smush Pro được thiết kế đặc biệt có tính đến việc tối ưu hóa hình ảnh Smush Pro CDN không chỉ cung cấp hình ảnh của bạn với tốc độ cực nhanh mà CDN của chúng tôi còn cung cấp hình ảnh có kích thước hoàn hảo cho người dùng của bạn. Nói cách khác, hãy để việc mở rộng quy mô cho chúng tôi Bạn sẽ cần định cấu hình Smush Pro CDN bằng một vài bước đơn giảnSmush Pro CDN thậm chí có thể giúp bạn nếu bạn gặp sự cố với đề xuất 'Hình ảnh có kích thước phù hợp' của Google PageSpeed Sau khi nhấn nút Bắt đầu, bạn sẽ đến phần cài đặt cấu hình CDNChỉ cần bật tùy chọn thay đổi kích thước tự động và CDN sẽ cung cấp hình ảnh có kích thước phù hợp cho bạn trong khi vẫn giữ nguyên hình ảnh gốc của bạn. Làm thế nào mà cho mát? Đã giải quyết tỷ lệ hình ảnhNhư bạn có thể thấy, có nhiều cách để điều chỉnh kích thước hình ảnh phù hợp trong WordPress, nhưng đó có thể là một quá trình tẻ nhạt nếu bạn có một trang web dành cho người lớn có nhiều hình ảnh. Thay vì giơ tay và nói, “Ồ, đó là vấn đề của người dùng” và để nguyên hình ảnh của bạn, tôi khuyên bạn nên sử dụng một plugin như Smush để giải quyết vấn đề trong năm phút thay vì năm ngày. Bạn cũng có thể dùng thử Smush Pro miễn phí. Người dùng của bạn sẽ cảm ơn bạn. Và bạn có thể sẽ thấy chi phí lưu trữ thấp hơn vì bạn sẽ không cần quá nhiều dung lượng Đó là một kết quả đôi bên cùng có lợi và tốt cho tất cả Nếu bạn chưa xem Smush trong một thời gian khá lâu, thì đã đến lúc xem lại. Chúng tôi đã thêm rất nhiều tính năng mới và Smush Pro mạnh mẽ hơn trước rất nhiều. Smush Pro đã là plugin tối ưu hóa hình ảnh hàng đầu, vì vậy điều đó nói lên nhiều điều. Hãy xem thử, bạn sẽ không thất vọng đâu Bạn đang sử dụng thủ thuật nào để thay đổi kích thước và nén hình ảnh của mình? thẻ
Chia sẻ bài viết này Felicia Ceballos-Marroquin Felicia là một chuyên gia WordPress, chuyên về thiết kế/phát triển web, tối ưu hóa công cụ tìm kiếm, Genesis và WordPress dành cho doanh nghiệp nhiều trang. Cô ấy là một cựu tác giả của WPMU DEV, nơi cô ấy đã sử dụng chuyên môn WordPress hơn một thập kỷ của mình để sử dụng tốt, viết các hướng dẫn thân thiện với tâm hồn. Pixel của DEVShareable, fun, & free WP comics.Check them outXây dựng doanh nghiệp WordPress tốt hơnTake a quick tourBắt đầu dùng thử miễn phí 7 ngày Theo chúng tôi Liên kết tới Facebook của WPMU DEV Liên kết tới Twitter của WPMU DEV Liên kết tới LinkedIn của WPMU DEV Liên kết tới WPMU Bài viết liên quan và gần đây nhấtCách loại bỏ các vấn đề chặn hiển thị với Hummingbird cho WordPress Làm cho trang web WordPress của bạn bay. Hướng dẫn Tối ưu hóa Hiệu suất 27 giải pháp cho 14 vấn đề về tốc độ trang WordPress bị lãng quên Hướng dẫn Mega cơ bản để tăng tốc WordPress Các dự án liên quanchim ruồi chuyên nghiệp Mọi thứ bạn cần để… hậu vệ chuyên nghiệp Thường xuyên quét bảo mật, lỗ hổng… Smush Pro Sự lựa chọn của người dùng, đoạt giải thưởng, và… SmartCrawl Pro Tăng PageRank của bạn và… Nhận các bản cập nhật WP mới trực tiếp vào hộp thư đến của bạn. nhập địa chỉ email của bạn. Đặt muaBằng cách nhấp vào đăng ký, tôi đồng ý nhận tin tức WP vui nhộn. P. S. Chúng tôi giữ email của bạn 100% riêng tư và không gửi thư rác. ) |