added srcset types for safari

README.md

@@ -93,34 +93,53 @@ If **lazyLoad** is true the componnent will use an IntersectionObserver (if it i
   <source
     srcset="assets/images/banner-300.webp"
     media="(max-width: 599.99px)"
+    type="image/webp"
   />
   <source
     srcset="assets/images/banner-600.webp"
     media="(min-width: 600px) and (max-width: 959.99px)"
+    type="image/webp"
   />
   <source
     srcset="assets/images/banner-960.webp"
     media="(min-width: 960px) and (max-width: 1279.99px)"
+    type="image/webp"
   />
   <source
     srcset="assets/images/banner-1280.webp"
     media="(min-width: 1280px) and (max-width: 1919.99px)"
+    type="image/webp"
+  />
+  <source
+    srcset="assets/images/banner-1920.webp"
+    media="(min-width: 1920px)"
+    type="image/webp"
+  />
+  <source
+    srcset="assets/images/banner-300.jpg"
+    media="(max-width: 599.99px)"
+    type="image/jpeg"
   />
-  <source srcset="assets/images/banner-1920.webp" media="(min-width: 1920px)" />
-  <source srcset="assets/images/banner-300.jpg" media="(max-width: 599.99px)" />
   <source
     srcset="assets/images/banner-600.jpg"
     media="(min-width: 600px) and (max-width: 959.99px)"
+    type="image/jpeg"
   />
   <source
     srcset="assets/images/banner-960.jpg"
     media="(min-width: 960px) and (max-width: 1279.99px)"
+    type="image/jpeg"
   />
   <source
     srcset="assets/images/banner-1280.jpg"
     media="(min-width: 1280px) and (max-width: 1919.99px)"
+    type="image/jpeg"
+  />
+  <source
+    srcset="assets/images/banner-1920.jpg"
+    media="(min-width: 1920px)"
+    type="image/jpeg"
   />
-  <source srcset="assets/images/banner-1920.jpg" media="(min-width: 1920px)" />
   <img src="assets/images/banner.jpg" alt="test" />
 </picture>
 ```

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng s --vendor-source-map=true",
     "build": "ng build ngx-picture && ng build demo --prod",
     "copy-files": "copy README.md dist\\ngx-picture && copy LICENSE.md dist\\ngx-picture",
     "coverage": "ng test --no-watch --code-coverage",

projects/ngx-picture/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-picture",
-  "version": "1.0.0-beta1",
+  "version": "1.0.0-beta2",
   "repository": {
     "type": "git",
     "url": "https://github.com/jaychase/ngx-picture.git"

projects/ngx-picture/src/lib/picture/picture.component.html

@@ -4,6 +4,7 @@
       *ngFor="let breakpoint of breakpoints; index as i"
       [srcset]="srcInterpolator(src, imageFormat, breakpoint)"
       [media]="breakpoint"
+      type="image/{{ imageFormat }}"
     />
   </ng-container>
   <img [src]="src" [alt]="alt" />