Duyarlı görüntüleri biliyorsunuz. HTML'deki görüntü sözdizimi ile ilgilidir. Ona doğru bilgiyi doğru sözdiziminde verirseniz, tarayıcıya çok fazla veya çok az görüntü verisi vermeden tam olarak ihtiyaç duyduğu doğru görüntüyü indirmesini sağlayabilirsiniz. Performans için harika.
Duyarlı görüntülerden en iyi şekilde yararlanmak için onu Picturefill ile doldurmanız gerektiğini biliyorsunuz. İndirirsiniz, sayfanıza eklersiniz.
Bir planın var mı. Sayfanızın belirli medya sorgusu kesme noktalarında neyi beğenmesini istediğinizi biliyorsunuz. Hepsini Sketch veya Photoshop'ta hazırladınız.
Duyarlı görüntüler için sözdiziminin nasıl olduğunu bilirsiniz. Durumunuzu tanımlamak için srcset / size sözdizimi gibi bir şeye ihtiyacınız olacak.
Bu ekran video kaydı tüm bunlarla ilgili. Hepsini birbirine bağlamakla ilgili. Tasarım iş akışını ve orada kullanılan yazılımı ön uç iş akışı ve orada kullanılan sözdizimi ile birbirine bağlamakla ilgilidir. İhtiyacınız olan format ve boyutlarda görüntüleri nasıl çıkaracağınızı bilmeniz gerekir. Ne zaman kaliteli çıktı alacağınızı ve ne zaman almayacağınızı bilmeniz gerekir. Bu görüntüleri nasıl ölçeceğinizi ve nerede doğru sayıları kullanacağınızı bilmeniz gerekir. Düzen seçimlerinizi ve medya sorgularınızı bu numaralara nasıl bağlayacağınızı bilmeniz gerekir. Hepsi burada.
CodePen'de Chris Coyier (@chriscoyier) tarafından Duyarlı Görüntülerin Numaralarını Alma Konulu Ekran Kaydı için Kalem Demosuna bakın.