Bỏ qua đến nội dung chính

Làm thế nào để tạo hình ảnh Retina Ready cho trang WordPress của bạn

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Chúng ta sống trong một thế giới của độ nét cao. Và vì hầu hết chúng ta dành hơn tám giờ mỗi ngày để xem các loại màn hình khác nhau, nên chất lượng của hình ảnh và nhân vật trong các màn hình này là rất quan trọng.

Mặc dù chúng chỉ mới xuất hiện được vài năm, nhưng màn hình Retina là con đường của tương lai. Mật độ điểm ảnh cao trong màn hình Retina giúp hình ảnh rõ nét và sắc nét. Và ai không thích những hình ảnh đẹp và sắc nét?

Học cách tạo một trang web thân thiện với Retina là một tài sản quan trọng đối với bất kỳ nhà phát triển web nào. Thật không may, không có giải pháp lý tưởng, hoàn hảo để làm cho trang web của bạn thân thiện với màn hình Retina-Ready. Vì vậy, trong khi chúng tôi chờ đợi ai đó tìm giải pháp hoàn chỉnh nhất, chúng tôi đã xem xét một số tùy chọn tốt nhất để chuẩn bị trang web của bạn. Bằng cách này, bạn sẽ không bị mất khi đến lúc tất cả các thiết bị sẽ có võng mạc được hiển thị ở dạng này hay dạng khác.

Tạo nhiều tập tin hình ảnh

Hãy bắt đầu với những điều cơ bản. Cách dễ nhất để hỗ trợ chế độ Retina cho trang web của bạn là tạo nhiều biến thể hình ảnh ở các độ phân giải khác nhau. Điều này có nghĩa là với mỗi loại độ phân giải (ví dụ @ 1x), bạn phải tạo phiên bản có độ phân giải cao của thành phần này (ví dụ: 2x).

Về cơ bản, bạn có thể tạo nhiều phiên bản của cùng một tệp và sử dụng một plugin như WP Retina 2x hoặc tập lệnh như retina.js để tự động tạo các phiên bản "@2x" của từng kích thước hình ảnh hoặc tìm hình ảnh "@2x" và hiển thị kích thước tương ứng với từng thiết bị.

Đúng là việc tạo nhiều phiên bản của cùng một hình ảnh có thể là một quá trình tốn thời gian. Thật không may, không có phương pháp nhanh chóng tự động tạo ra những hình ảnh này cho bạn. Tuy nhiên, có một số plugin Photoshop cho phép bạn sửa chữa hình ảnh của mình một cách nhanh chóng.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Các plugin như " Retinize It , Đó là một loạt các hành động Photoshop cho phép bạn dễ dàng tối ưu hóa các thiết kế của mình cho màn hình Retina. Nếu bạn đang sử dụng phiên bản cũ hơn của Photoshop (tiền CC), bạn có thể sử dụng một cái gì đó như " Bốn Đó thực chất là tất cả những gì công cụ Photoshop Generator hiện tại làm, nhưng đối với các phiên bản Photoshop trước đó.

Đồ họa vector có thể mở rộng (SVG)

Cách dễ nhất để vượt lên với chế độ Retina là sử dụng định dạng Đồ họa vectơ có thể mở rộng (SVG) trên trang web của bạn. SVG là một định dạng hình ảnh vector dựa trên XML. Như tên gọi của nó, hình ảnh SVG có thể mở rộng, điều đó có nghĩa là hình ảnh có thể được kéo dài ra (hoặc ít) khi cần, trong khi vẫn sắc nét và rõ ràng. Đây có thể là một cách nhanh chóng và dễ dàng để bạn thực hiện chế độ Retina mà không cần nỗ lực nhiều.

Tuy nhiên, có hai nhược điểm khi sử dụng SVG trên WordPress. Đầu tiên là vì nó là định dạng vector, SVG không phù hợp với tất cả các hình ảnh. Vì vậy, bạn có thể sử dụng SVG cho logo và biểu tượng, nhưng không sử dụng cho các tệp như ảnh (Điều này hơi đau nếu bạn muốn sử dụng hình ảnh có độ phân giải cao cho trang web của mình). Nhưng nếu bạn muốn sử dụng các biểu tượng, hình động hoặc hình minh họa đơn giản, các tệp SVG chắc chắn có thể là một tùy chọn cho trang web tương thích với Retina.

Nhược điểm thứ hai khi sử dụng SVG trên WordPress là nó không phải là định dạng tương thích chính thức với WordPress vì vấn đề bảo mật. Do tệp SVG về cơ bản là tệp XML, nên tệp này mở ra tất cả các lỗ hổng đã biết liên quan đến định dạng tệp XML, chẳng hạn như phân tích cưỡng chế, tấn công thực thể XML bên ngoài (XEE), tấn công Các cuộc tấn công từ chối dịch vụ (XDoS) XML, v.v.

Tuy nhiên, có một cách để kích hoạt hỗ trợ SVG cho trang web WordPress của bạn, điều này sẽ làm cho các tệp SVG của bạn an toàn.

Cách bật SVG an toàn trên WordPress

Safe SVG là một plugin cho phép bạn kích hoạt an toàn hỗ trợ cho các tệp SVG trên trang web WordPress của bạn. Plugin này đảm bảo rằng các tệp SVG của bạn được khử trùng để ngăn chặn mọi lỗ hổng XML tiềm ẩn ảnh hưởng đến trang web của bạn.

Tránh xa các plugin cho phép loại MIME cho phép tải xuống SVG vào Thư viện phương tiện WordPress vì đây là những plugin nguy hiểm và có khả năng gây nguy hiểm cho trang web của bạn. Vì vậy, nếu bạn thực sự muốn sử dụng định dạng SVG trên WordPress, hãy đảm bảo bạn làm điều đó một cách an toàn và không tải xuống plugin SVG đầu tiên bạn thấy.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Một số plugin để tích hợp khả năng tương thích Retina trên WordPress

Có một số tập lệnh và plugin để tương thích với Retina có thể giúp cuộc sống của bạn dễ dàng hơn rất nhiều khi cố gắng thiết lập trang web tương thích với Retina. Tuy nhiên, như đã đề cập trước đó, hầu hết các plugin và tập lệnh có sẵn, thay thế hình ảnh của bạn bằng hình ảnh có độ phân giải cao chỉ dành cho màn hình độ phân giải cao. Chúng không kéo dài như một SVG: bạn vẫn cần tạo nhiều hình ảnh có độ phân giải khác nhau.

retina.js

retina.js http://imulus.github.io/retinajs/ là một trong những tập lệnh được sử dụng nhiều nhất để phục vụ hình ảnh có độ phân giải cao. Đây là một tập lệnh mã nguồn mở có thể dễ dàng phân phát hình ảnh có độ phân giải cao cho các thiết bị có màn hình Retina.

Kịch bản kiểm tra từng hình ảnh trên trang để xem có phiên bản độ phân giải cao của hình ảnh đó trên máy chủ không. Nếu tồn tại một biến thể độ phân giải cao, tập lệnh trao đổi độ phân giải tiêu chuẩn với hình ảnh độ phân giải cao. Đây là một trong những cách phổ biến nhất để phục vụ hình ảnh cho màn hình Retina trên trang web của bạn.

Ngu si

Tương tự như retina.js, Ngu si là một plugin jQuery cung cấp một cách đơn giản để phục vụ hình ảnh ở định dạng tỷ lệ pixel. Kịch bản gọi phương thức khởi tạo $ .fn.dense (), nhằm vào các thẻ "img" sẽ phục vụ các hình ảnh tương thích với Retina khi cần.

Vì vậy, nó thay thế tất cả các hình ảnh bằng phiên bản có độ phân giải cao tương ứng, giống như tập lệnh retina.js.

WP Retina 2x

Cái sau có thể được ví như một máy tạo hình ảnh ma thuật Retina.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [FREE]

WP Retina 2x là một plugin tạo các tệp hình ảnh theo yêu cầu của các thiết bị DPI cao và hiển thị chúng cho khách truy cập của bạn theo đó. Không giống như hai tập lệnh trước, nó tạo ra các hình ảnh độ phân giải khác nhau từ một hình ảnh ban đầu. Vì vậy, nếu bạn không quá hài lòng với việc tạo thủ công các hình ảnh khác nhau với độ phân giải khác nhau, tùy chọn này là dành cho bạn.

Đó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn chuyển đổi hình ảnh của mình thành hình ảnh sẵn sàng cho võng mạc.

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
7 cổ phiếu
cổ phiếu6
tweet
Enregistrer1