نشأت مشكلة عرض الصور منذ ظهور القدرة على التكيف على الإنترنت. نريد أن يبدو الموقع جيدًا على أي جهاز لوحي أو هاتف أو اتجاه شاشة عمودي أو أفقي ، وكذلك على شاشات 5K كبيرة الحجم للغاية. يوجد في السوق أيضًا شاشات Retina ذات كثافة بكسل عالية (DPI) ، حيث تبدو الصور العادية ضبابية. تتزايد حصة حركة الاتصالات المتنقلة ، وتهدف الموارد الكبيرة إلى تحميل الصور اقتصاديًا. دعونا نرى كيف يحلون هذه المشكلات على مواقع الويب الخاصة بـ Apple و Tilda ومنصة المدونات متوسطة.
أبل: مستخدم طاقة خلفية الصورة
تعتمد شركة Apple على التصميم لمنتجاتها ، مع تركيز قوي على أبحاث عرض الصور. على موقع Apple على الويب - وقت كتابة هذا التقرير - يتم توفير تحسين الصورة بواسطة إمكانيات CSS ، وبشكل أكثر دقة ، صورة خلفية. المبدأ الأساسي لهذا النهج هو العرض الثابت للصورة بين نقاط التوقف ، أي رفض الصور "المطاطية". النظر في مثال واحد من الصور من موقع
www.apple.com/mac<figure class="imac-image" data-progressive-image=""></figure>
.section-imac .imac-image { width:939px; height:631px; background-size:939px 631px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large_2x.jpg") } } @media only screen and (max-width: 1068px) { .section-imac .imac-image { width:795px; height:536px; background-size:795px 536px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium.jpg") } } @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium_2x.jpg") } } @media only screen and (max-width: 735px) { .section-imac .imac-image { width:365px; height:246px; background-size:365px 246px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small.jpg") } } @media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small_2x.jpg") } }
للتوافق عبر المستعرض ، يتم استخدام ثلاث طرق على الفور لتعيين كثافة بكسل الشاشة:
-Webkit-min-device-pixel-ratio: 1.5
دقيقة القرار: 1.5dppx
دقيقة القرار: 144 نقطة في البوصة
ما هي إيجابيات وسلبيات هذا النهج؟
الأشياء الجيدة
- سهولة التنفيذ. ربما تكون هذه هي الطريقة الأكثر قابلية للفهم لتغيير الصورة إلى حجم معين وكثافة الشاشة.
- تغطي جميع المشكلات: تتم معالجة مشكلة حجم الشاشة وكثافة البكسل.
- لا يوجد تخطيط القفز بفضل أحجام محددة مسبقا.
- يمكنك استخدام ميزات CSS المضمنة للعمل مع الخلفيات (وضع المزج بين التأثيرات والموضع - قص الصورة إذا لزم الأمر).
سلبيات
- لا يمكنك صنع صورة "مطاطية". تحدد الأحجام الثابتة نسبة العرض إلى الارتفاع ، لذلك عندما تحاول الضغط أو التمدد ، نقوم بقص الصورة أو وجود مساحة فارغة في الأسفل. نعم ، يمكنك استخدام الحشوة السفلية في المئة بدلاً من الحجم ، ولكن هذا هو الحل البديل ، CSS الاختراق الذي يعقد المفهوم الأساسي.
- الكثير من كود CSS. نعم ، من السهل قراءة CSS ، ولكن مع وجود عدد كبير من نقاط التوقف والصور ، يمكن أن يزيد حجم CSS إلى أجل غير مسمى (انظر أدناه "معالجات CSS الأولية للإنقاذ").
- لا توجد سيطرة على تنزيل الصور. إذا استخدمت هذه الطريقة بشكلها النقي ، فستقوم بتحميل جميع الصور على الصفحة في نفس الوقت. و CSS ، بخلاف img ، لا يحتوي على عمليات رد اتصال إضافية تسمح لك بالتحكم في تحميل الصور أم لا.
- يتطلب دقة دقيقة. سيكون لديك لضبط الأبعاد لجميع الصور. وليس أقل أهمية ، عند استبدال صورة مع أخرى ، ستحتاج إلى تحرير CSS للأبعاد الجديدة.
CSS preprocessors للانقاذ
على الأرجح ، أنت تستخدم بالفعل أحد معالجات CSS الأولية مثل SCSS أو LESS أو PostCSS أو Stylus - ويمكنها تبسيط حياتك إلى حد كبير. دعونا نحاول تحسين الشفرة من موقع Apple الإلكتروني باستخدام SCSS. بالنسبة إلى تعبيرات الوسائط ، خذ
مزيج الوسائط واكتب mixin الخاص بنا للحصول على الصورة:
@mixin image($width, $height, $url) { width: $width; height: $height; background-size: $width $height; background-repeat:no-repeat; background-image:url($url); }
دعنا نضبط المتغيرات:
$breakpoints: ( 'phone': 735px, 'tablet': 1068px ); $media-expressions: ( 'screen': 'only screen', 'retina': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi)' );
نحصل على SCSS يجمع واحدًا على واحد في CSS من Apple:
.section-imac .imac-image { @include image(939px, 631px, "image_large.jpg"); } @include media('screen', 'retina') { .section-imac .imac-image { @include image(939px, 631px, "image_large2x.jpg"); } } @include media('screen', '<=tablet') { .section-imac .imac-image { @include image(795px, 536px, "image_medium.jpg"); } } @include media('screen', '<=tablet', 'retina') { .section-imac .imac-image { @include image(795px, 536px, "image_medium_2x.jpg"); } } @include media('screen', '<=phone') { .section-imac .imac-image { @include image(365px, 246px, "image_small.jpg"); } } @include media('screen', '<=phone', 'retina') { .section-imac .imac-image { @include image(365px, 246px, "image_small_2x.jpg"); } }
ملخص
هذه طريقة رائعة لتتعامل معها إذا لم يكن لديك الكثير من الصور أو نادراً ما تتغير.
تيلدا: صورة الخلفية مع تأثير طمس
Tilda هو منشئ موقع يوفر مكونات متنوعة لعرض الصور. النظر في أسهل طريقة ل "كسول" تحميل الصور. ما شكل HTML قبل تحميل صورة:
<div data-original="https://static.tildacdn.com/image.jpg" style="background: rgba(0, 0, 0, 0) url(https://static.tildacdn.com/image-small.jpg) no-repeat scroll center center / cover;"> </div>
يتحقق تأثير التمويه نظرًا لحقيقة أن المعاينة صغيرة (20 × 20 بكسل) ، ولكن باستخدام خاصية css للغطاء ، يتم تمديد الصورة إلى العرض والارتفاع بالكامل. ناقص: هذا الضبابية لا يبدو لطيفًا جدًا ، لكنه بسيط جدًا ولا يثقل كاهل المعالج.
بعد التحميل ، يتم استبدال الصورة كاملة الحجم ببساطة بالنمط المضمن.
الأشياء الجيدة
- تحميل كسول.
- من السهل الحفاظ عليها.
سلبيات
- نفس الصورة لأي جهاز. يتم تنفيذ القدرة على التكيف فقط ضمن حدود الأسلوب (يتم قص الصورة ببساطة بطرق مختلفة).
- تأثير طمس قبيح.
- لا يوجد انتقال بين الضبابية والقرار الكامل.
ملخص
هذه طريقة عمل إذا كنت بحاجة إلى مكون بسيط ولا تريد عناء استخدام ست صور أو أكثر للحصول على دقة شاشة مختلفة. جيد للمواقع مع الكثير من الصور.
متوسطة: طمس قماش
أحدثت منصة التدوين في medium.com فرقًا كبيرًا في عالم صور الويب نظرًا للتأثير الضبابي الجميل للصور الناقصة التحميل. يتم تحقيق هذا التأثير باستخدام مكتبة قماش stackblur.
HTML يشبه شطيرة:
<img src="placeholder.jpg"> <canvas> <img src="full-size.jpg">
هذا يتيح لك إدراك تأثير الانتقال السلس. للحصول على صورة بالحجم الكامل ، التعتيم المبدئي: 0 يمر عبر الانتقال إلى المغلق: 1.
Blur Battle: CSS vs SVG vs Canvas
لذا ، إذا لم نكن Apple ، فمن الأرجح أن يكون التحميل الأكثر سهولة للصور وتأثير الضبابية أكثر ملاءمة. في الوقت الحالي ، هناك ثلاث طرق على الأقل لإنشاء تأثير blair (وخيار آخر من Tilda ، لكننا لن نفكر فيه ، لأن هذا ليس blair "حقيقي").
لماذا يستحق استخدام stackblur-canvas للتشويش إذا كان لديك بالفعل مرشح للتشويش المدمج في متصفح css؟
- المشاكل. تقوم مرشحات CSS و SVG افتراضيًا بطمس حواف الصورة. يوجد حل خاص لمرشح svg ، للمرشح المدمج: blur () يجب عليك استخدام الاقتصاص.
- الأداء. تعمل Stackblur-canvas بسرعة كبيرة ، وتعمل فلاتر css بشكل أسرع ، لذلك مع وجود عدد كبير من الصور الضبابية ، يكون الخيار بالتأكيد هو فلاتر css.
- الجمال. هنا ، ذاتي ، ولكن في رأيي stackblur تبدو أكثر جمالا. مرشح svg له التحف القبيحة.
صورة العلامة - قمة التطور
في البداية ، وصفنا طريقة Apple واكتشفنا أن css لها تعبيرات وسائط لكل من حجم الشاشة وكثافة البكسل. ويمكن استخدامها في وقت واحد لتحديد صورة محددة للعرض. العيب الكبير هو أن الصورة على الخلفية لا "تعرف" نسبة العرض إلى الارتفاع ، ولا يمكن أن تكون "مطاطية". بالإضافة إلى ذلك ، من وجهة نظر دلالات الويب ، فإن استخدام الخلفية غير صحيح لعرض جميع الصور في صف واحد.
قد تحتوي علامة img على سمة srcset ، ولكن يجب عليك اختيار حجم الشاشة أو كثافة البكسل - لا يمكنك دمج هذه المعلمات.
علامة الصورة خالية من هذا العيب ، ومثل IMG ، فإنها "تعرف" نسبة العرض إلى الارتفاع. بالفعل ، يدعمها
92 ٪ من المتصفحات. هذه العلامة مناسبة لأولئك الذين يستطيعون عدم التكيف مع IE.
تقاطع المراقب API
أخيرًا ، دعنا نتحدث عن تنفيذ صور التحميل البطيئة. تتمثل الطريقة الكلاسيكية في استخدام مزيج من أحداث التمرير وتغيير حجمها وتغيير اتجاهها وحساب موضع صورة معينة بالنسبة إلى المنطقة المرئية من الشاشة.
في عام 2019 ، يمكنك استبدال مجموعة العكازات بمتصفح API خاص -
مراقب تقاطع . ويدعمها جميع المتصفحات الحديثة. بالنسبة إلى iOS و IE الأقدم ، يجب عليك استخدام
poly3ill الرسمي لـ
w3c .
نظرة على المستقبل: ما هو الآخر المفقود للسعادة الكاملة
لذلك ، لدينا بالفعل علامة صور ، والتي تتمتع بدعم جيد للمتصفح ، لكن مشكلة التحميل البطيئة لا تزال قائمة. ما زلنا بحاجة إلى الاعتماد على تطبيقاتنا الخاصة القائمة على مراقب التقاطع أو مجموعة من أحداث JS. متى تقدم المتصفحات حلاً أصليًا؟ على سبيل المثال ، يعد الإصدار 75 من Chrome بتقديم دعم لخاصية التحميل لعلامات img و iframe. يمكنك تحديث مكوناتك للحصول على الدعم الأصلي للتحميل البطيء عن طريق التحقق من وجود خاصية في النموذج الأولي للصورة: إذا نجحت ، فيمكنك التخلي عن رمز التحميل البطيء الخاص بك ، نظرًا لأن كل شيء سيتم بواسطة المستعرض لك!
if ('loading' in HTMLImageElement.prototype)
CMS ومحتوى المستخدم
ما هي أفضل طريقة لعرض الصور التي تم تحميلها من قبل المستخدمين؟ كقاعدة عامة ، من الجدير فعل كل شيء بأبسط ما يمكن ، دون إجباره على تحميل الصور بشكل منفصل للهاتف والكمبيوتر اللوحي وسطح المكتب. لذلك ، لدينا صورة واحدة فقط لجميع الأجهزة. في مثل هذه الحالة ، يكون Tilda (لأقصى قدر من البساطة) أو الطريقة المتوسطة مثاليًا - إذا كنت ترغب في إحداث تأثير تمويه حقيقي ، ربما لاستبدال قماش الكومة stackblur بـ css: blur () القياسي للحصول على أداء أفضل.
النتائج
لا يوجد حتى الآن طريقة واحدة "أصح" لعرض الصور. إذا كنت بحاجة إلى دعم المتصفحات الأقدم و IE ، فاختيارك هو صورة خلفية تحتوي على تعبيرات وسائط وتخطيط للحالات البسيطة. بالنسبة للمشاريع الجديدة ، قد يكون من الملائم أكثر استبدال صورة الخلفية بالصورة. إذا كنت تريد القيام بحمل كسول جميل ، فجرّب لوحة قماشية stackblur ، وإذا كان الأداء مهمًا بالنسبة لك ، فقم بعد ذلك بتصفية فلاتر css أو الصور الممتدة على خلفية بأسلوب tilde.