Có bắt buộc phải giữ hình ảnh ở 72DPI cho thiết kế web không?

Tôi đã thiết kế các biểu ngữ web trong hơn một năm nhưng chưa bao giờ xem xét DPI.

Tôi đã sử dụng 72DPI mặc định, nhưng bây giờ tôi muốn biết có cần thiết phải tạo các thiết kế web trong 72DPI không? Điều gì xảy ra nếu chúng ta sử dụng nhiều hơn thế, ví dụ 200DPI?

Tôi biết rằng nhiều DPI hơn có nghĩa là hình ảnh chất lượng hơn và đó là lý do tại sao tôi muốn sử dụng DPI cao, nhưng gần đây tôi đã đọc ở đâu đó rằng đối với các biểu ngữ web, chúng ta nên sử dụng 72DPI. Tôi chỉ muốn biết nếu nó là bắt buộc và nó có ảnh hưởng tiêu cực trong bất kỳ khía cạnh nào không?

Cài đặt PPI (Pixels Per Inch) không được sử dụng trong hình ảnh web. Hình ảnh trên web, màn hình retina hoặc mặt khác, được hiển thị theo kích thước pixel (chiều rộng và chiều cao) của chúng chứ không phải bất kỳ cài đặt PPI / DPI nào. Trên thực tế, nhiều hình ảnh trên web như png, gif, jpg thậm chí có thể không lưu trữ cài đặt ppi trong dữ liệu nội bộ của chúng và dựa vào cài đặt chiều rộng và chiều cao.

Hình ảnh 100 pixel x 100 pixel hiển thị như trên web bất kể cài đặt PPI / DPI nào.

Đây là lý do tại sao hình ảnh cho màn hình retina được lưu ở kích thước gấp đôi, thay vì cài đặt ppi tăng. Các mật độ điểm ảnh của màn hình võng mạc cao tuy nhiên, họ vẫn hiển thị hình ảnh ở bất cứ tiểu bang màn hình là chiều rộng và chiều cao của một hình ảnh không dựa trên bất kỳ thiết lập PPI.

Trên thực tế, một màn hình sử dụng mật độ điểm ảnh 72ppi đã không được nhìn thấy từ đầu đến giữa những năm 1980. 72ppi đã không chính xác trong gần 30 năm. Trên thực tế, nó không bao giờ chính xác cho các hệ thống Windows vì Windows sử dụng mặc định 96ppi cho mật độ pixel.

Đừng tin tôi? Hãy thử nó cho chính mình. Tạo hai hình ảnh trong Photoshop cả 100 pixel x 100 pixel. Tạo một hình ảnh 72ppi và 300ppi khác. Lưu cả hai cho web .. chúng có khác nhau trong trình duyệt web không? Không. Cả hai đều là hình ảnh 100px x 100px.

Cài đặt DPI (Dots Per Inch) chỉ được áp dụng khi in hình ảnh. DPI không có liên quan đến hình ảnh dành cho màn hình. DPI đề cập đến số lượng chấm / điểm mực mà báo chí sẽ đặt trong một inch. Vì không có màn hình nào trên Trái đất sử dụng mực, DPI là một thuật ngữ không chính xác để sử dụng cho mọi thứ liên quan đến màn hình hiển thị.

Xin lưu ý rằng một số nhà sản xuất di động đã chọn sử dụng thuật ngữ DPIx hoặc xDPI đôi khi được rút ngắn thành DPI đơn giản. Đây không phải là hình thức viết tắt truyền thống và nhà sản xuất chỉ đơn giản là làm vấy bẩn vùng biển rất nhiều. Nếu bạn thấy DPI liên quan đến độ phân giải màn hình di động, họ đang nói về PPI hiệu quả và không thực sự tham khảo Dots Per Inch. Một từ viết tắt thích hợp hơn sẽ là xPPI hoặc PPIx vì màn hình di động, giống như tất cả các màn hình, sử dụng pixel và không phải mực.

Nó không tạo ra bất kỳ sự khác biệt nào với cài đặt ppi mà bạn sử dụng cho hình ảnh trên web. Đó là chiều rộng (pixel) và chiều cao (pixel) của hình ảnh rất quan trọng.

Khi làm việc với nhiều hình ảnh, điều quan trọng là duy trì sự nhất quán. Bạn sẽ muốn tất cả các hình ảnh của mình được đặt ở cùng một ppi để tránh thay đổi kích thước và chia tỷ lệ các khía cạnh nếu bạn di chuyển các mảnh giữa các hình ảnh. Cho dù bạn chọn sử dụng 72, 96, 200 hay 145.8 ppi đều không thành vấn đề, nhưng tất cả các hình ảnh nên được đặt giống nhau.

Tôi sẽ đi vào chi tiết ý nghĩa của "dpi", ví dụ; với điều đó, bạn có thể chỉ nhìn thấy câu trả lời cho mình. :

Nói tóm lại, hình ảnh của bạn bao gồm các chấm màu, nằm cạnh nhau. Nhưng không có kích thước trong bất kỳ ý nghĩa vật lý.

Bây giờ, khi bạn hiển thị một hình ảnh trên màn hình, thông thường bạn sẽ chỉ cần đặt các màu chấm của hình ảnh vào raster của hình chữ nhật màu mà màn hình của bạn có thể hiển thị. Lưu ý rằng cả hai, cái mà tôi gọi là "dấu chấm" và hình chữ nhật ở đây, được gọi là "pixel" - nhưng nhìn kỹ chúng là một cái gì đó khác nhau.

Nếu chúng ta hiển thị một hình ảnh theo cách tự nhiên này trên màn hình, chúng ta có thể đo kích thước của nó.
Ví dụ, hình ảnh của chúng tôi rộng 500 điểm, chúng tôi đặt chúng vào các hình chữ nhật màu trên màn hình và thấy nó rộng 5 inch. Sau đó, chúng ta có 100 hình chữ nhật trên mỗi inch, hiển thị 100 dấu chấm trên mỗi inch.
Đó là, hình ảnh của chúng tôi có 100dpi trên màn hình.
Nhưng chúng tôi thậm chí không nhìn vào giá trị dpi trong tệp hình ảnh của chúng tôi!

Bây giờ, nếu chúng ta nhìn vào tập tin của chúng tôi, nó cũng có thể nói hình ảnh là 200dpi! Giá trị dpi là khoảng bao nhiêu chấm màu hiển thị trên mỗi inch chiều rộng hoặc chiều cao màn hình. Vì vậy, giá trị dpi trong hình ảnh cho chúng ta biết rằng hình ảnh của chúng ta sẽ rộng 2,5 inch khi được hiển thị - như một lời hứa, không phải là sự thật .

Khi chúng tôi gán các chấm hình ảnh cho màn hình, chúng tôi thậm chí không quan tâm đến điều đó, bởi vì chúng tôi chỉ hiển thị nó và đo dpi thực tế của biểu diễn màn hình của hình ảnh.
Vì vậy, như bạn thấy, lời hứa hoàn toàn sai . Và không ai quan tâm! Bởi vì nó chỉ không liên quan.

Các tập tin đã hứa hẹn - bằng cách nói 200dpi - nó sẽ "rộng 2,5 inch khi hiển thị". Sau đó, chúng tôi đã sử dụng một màn hình hiển thị màn hình rộng 5 inch - chúng tôi có thể biết điều đó bởi vì chúng tôi biết màn hình thực tế là gì.
Thông thường chúng ta thậm chí không biết người dùng cuối sẽ sử dụng màn hình gì, vì vậy chúng ta chỉ có thể đoán được,

Vì vậy, bây giờ nó có ý nghĩa:

• Chúng tôi không biết hình ảnh dpi, được hiển thị trên màn hình, sẽ có, bởi vì chúng tôi không biết màn hình.
• Nhưng chúng tôi đã có một ý tưởng về việc nó sẽ trông như thế nào, "khoảng cỡ này ... ok, vậy thì chúng tôi cần khoảng 200dpi hoặc hơn thế." và lưu "200dpi" trong tệp
• Sau đó, chúng tôi nhìn vào màn hình và đo rằng, trên thực tế, 100dpi;

Và, không chỉ có một màn hình mà hình ảnh có thể được hiển thị trên - chúng có thể có kích thước khác nhau, do đó, thậm chí không thể biết giá trị dpi thực khi tạo tệp hình ảnh.

Xem thêm câu trả lời của tôi về "Pixel" chính xác là gì? .

Trực tiếp đến câu hỏi, dựa trên những điều trên:

Khi bạn chỉ định dpi trong một tệp hình ảnh, điều đó không trực tiếp làm hỏng chất lượng của hình ảnh hiển thị cuối cùng.
Nhưng nó có thể được sử dụng để truyền đạt về chất lượng hình ảnh - về ý định: bạn có thể nói "Tôi muốn hình ảnh này được hiển thị trên màn hình 200dpi".

Nếu tôi muốn hiển thị hình ảnh này, tôi có thể quan tâm và tìm kiếm màn hình 200dpi; hoặc có lẽ tôi chỉ sử dụng một màn hình 75dpi cũ có thể ở trên bàn của tôi. Hình ảnh sẽ khá lớn, tôi phải cuộn - nhưng đó là vấn đề của tôi và: bạn thậm chí sẽ không tìm ra cái gì thực sự được sử dụng - giá trị 200dpi không kiểm soát chất lượng hình ảnh - nó chỉ truyền đạt cách hiển thị "đúng cách "nếu tôi quan tâm.

Mặc dù PPI chắc chắn không thành vấn đề - đó là kích thước pixel quan trọng đối với thiết kế web và ứng dụng, bạn nên rất cẩn thận trong việc sử dụng các ứng dụng thiết kế và trộn các cài đặt PPI. Đây là lý do tại sao:

Tuy nhiên, nếu bạn có kế hoạch sử dụng Photoshop và mật độ pixel khác nhau cho mỗi tài liệu, việc kéo các lớp và sao chép các kiểu lớp giữa các tài liệu sẽ chia tỷ lệ các kiểu lớp - kéo một lớp từ tài liệu iPhone Retina 326PPI sang tài liệu iPad Retina 264PPI sẽ có nghĩa là tất cả các kiểu lớp được thu nhỏ bằng 20% ​​(sau đó làm tròn đến số nguyên gần nhất). Và đó có lẽ không phải là điều bạn muốn. Ngoài ra, Bản xem trước của OS X sẽ hiển thị hình ảnh 72PPI ở kích thước chính xác, bất kể bạn đã thiết lập nó như thế nào.

Điểm ảnh trên mỗi inch chỉ là một thẻ

Vì những lý do này, tôi gán 72PPI cho tất cả các tài liệu thiết kế của mình và tôi khuyên bạn nên làm như vậy. Để thay đổi mật độ pixel của tài liệu Photoshop của bạn mà không thay đổi kích thước dữ liệu hình ảnh, hãy mở hộp thoại Kích thước hình ảnh, bỏ chọn Thay đổi kích thước hình ảnh và nhập mật độ pixel mong muốn.

Tôi vừa thử nghiệm hai bản sao của một hình ảnh mà tôi đã tạo bằng Photoshop. Tuy nhiên, tôi đặt một ở mức 72 dpi và cái kia ở mức 720 dpi để xem liệu bất kỳ trình duyệt nào tôi sử dụng sẽ hiển thị cho chúng các kích thước khác nhau trên màn hình.

Trên tất cả các trình duyệt ngoại trừ một trình duyệt, chúng trông giống hệt nhau - khôn ngoan về kích thước và chất lượng. Tuy nhiên, với việc sử dụng Google Chrome, chiếc được sản xuất ở 72 trông rất ổn, nhưng chiếc được sản xuất ở 720 thì cực kỳ nhỏ - giống như nó có kích thước bằng 1/10.

Tốt đau buồn. Điều đó trông giống như một đối số cho việc đặt tất cả các hình ảnh độc lập (không bị hạn chế trong một trang web) ở mức 72. Hầu như tất cả của tôi (con số trong hàng trăm) đều ở mức 120 dpi. Mặc dù chúng trông vẫn đủ lớn trên Chrome, nhưng có lẽ trong trình duyệt đó, tôi nên cố gắng đặt tất cả chúng ở 72. Có lẽ ở đâu đó trong bản in đẹp trong tùy chọn của Chrome có một biện pháp khắc phục.