آموزش تصاویر در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش تصاویر در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تصاویر در گوگل AMP خواهیم پرداخت.

تصاویر استفاده شده در صفحه Google AMP مشابه نحوه استفاده در صفحه html استاندارد است ، اما تنها تفاوت در نحوه استفاده از نام برچسب با برخی خصوصیات اضافی است. این درس به طور مفصل در مورد این موارد بحث می کند.

نحوهای نشان داده شده در زیر را مشاهده کنید –

HTML استاندارد

&lt;img src = ”example.jpg” width = ”300” height = ”250” alt = ”Example” &gt;&lt;/img&gt;

1	<img src = ”example.jpg” width = ”300” height = ”250” alt = ”Example” ></img>

توجه داشته باشید که تگ از img به amp-img تغییر می کند.

چرا به جای img از amp-img استفاده کنیم؟

دلیل تغییر img به amp-img کنترل بیشتر بر روی صفحه آرایی و درخواست شبکه برای بارگیری تصویر است. Amp بارگذاری تنبل را به منبع تصویر اضافه می کند و بارگذاری را مانند سایر منابع موجود در صفحه در اولویت قرار می دهد.

مثال

برای درک بهتر کد زیر را رعایت کنید –

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - Image&lt;/title&gt;
      &lt;link rel = "canonical" href = "http://example.ampproject.org/articlemetadata.html"&gt;
      &lt;meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initialscale = 1"&gt;

      &lt;style amp-boilerplate&gt;
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            - amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes 
         amp-start{from{visibility:hidden}to{visibility:visible}}
      &lt;/style&gt;
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -msanimation:none;
               animation:none
            }
         &lt;/style&gt;
      &lt;/noscript&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Google AMP - Image Example&lt;/h1&gt;
      &lt;amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
         width = "246"
         height = "205"&gt;
      &lt;/amp-img&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - Image</title>

minimum-scale = 1,initialscale = 1">

body{

-webkit-animation:

-amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:

-amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:

- amp-start 8s steps(1,end) 0s 1 normal both;animation:

-amp-start 8s steps(1,end) 0s 1 normal both

}

@-webkit-keyframes

-ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes

-ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes

-ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes

-ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes

amp-start{from{visibility:hidden}to{visibility:visible}}

</style>

body{

-webkit-animation:none;

-moz-animation:none;

-msanimation:none;

animation:none

}

</style>

</noscript>

</head>

<body>

<h1>Google AMP - Image Example</h1>

<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"

width = "246"

height = "205">

</amp-img>

</body>

</html>

خروجی

هنگامی که کدی را که در بالا نشان داده شده است اجرا کردید ، نتیجه را همانطور که در زیر نشان داده شده است خواهید یافت –

AMP Img
همانطور که در زیر نشان داده شده است ، می توانید تصویر را با افزودن ویژگی layout = ”Responsive” به تگ amp-img پاسخگو کنید

مثال

برای درک بهتر کد زیر را رعایت کنید –

&lt;amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
   width = "246"
   height = "205"
   layout = "responsive"&gt;
&lt;/amp-img&gt;

<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"

width = "246"

height = "205"

layout = "responsive">

</amp-img>

خروجی

AMP Img Executed

منبع.

لیست جلسات قبل آموزش گوگل AMP

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی موبایل آموزش گوگل AMP

نویسنده مطلب saber

آموزش تصاویر در گوگل AMP

آموزش تصاویر در گوگل AMP

چرا به جای img از amp-img استفاده کنیم؟

مثال

خروجی

مثال

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

بدون دیدگاه

آموزش تصاویر در گوگل AMP

چرا به جای img از amp-img استفاده کنیم؟

مثال

خروجی

مثال

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه