@hashicorp/hashi-image - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

dist/index.js

@@ -36,4 +36,4 @@ 'use strict';
     // optimized version for performance
-    var srcDefault = format(steps, opts, aspect_ratio, src);
-    var srcWebp = format(steps, opts, aspect_ratio, src, { fm: 'webp' });
+    var srcDefault = formatSteps(steps, opts, aspect_ratio, src);
+    var srcWebp = formatSteps(steps, assign(opts, { fm: 'webp' }), aspect_ratio, src);
 
@@ -46,3 +46,3 @@ return preact.h(
         'class': classes,
-        src: src + '?fm=' + opts.fm + '&q=80',
+        src: format(src, opts, aspect_ratio && aspect_ratio[2], aspect_ratio),
         srcset: srcDefault,
@@ -56,10 +56,15 @@ sizes: sizes,
 
-function format(steps, opts, aspect_ratio, src, overrides) {
+function formatSteps(steps, opts, aspect_ratio, src) {
   return steps.map(function (s) {
-    var opt = assign({}, opts, { w: s }, overrides);
-    if (aspect_ratio) opt.h = aspect_ratio[1] / aspect_ratio[0] * s;
-    return src + '?' + queryString.stringify(opt) + ' ' + s + 'w';
+    return format(src, opts, s, aspect_ratio) + ' ' + s + 'w';
   });
 }
 
+function format(src, opts, width, aspect_ratio) {
+  var opt = assign({}, opts);
+  if (width) opt.w = width;
+  if (width && aspect_ratio) opt.h = aspect_ratio[1] / aspect_ratio[0] * width;
+  return src + '?' + queryString.stringify(opt);
+}
+
 module.exports = Image;

package.json

 {
   "name": "@hashicorp/hashi-image",
   "description": "super optimized image element, pulls from dato and formats for 7 screen sizes in two formats. Skips optimization for SVGs.",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "main": "dist",
@@ -6,0 +6,0 @@ "peerDependencies": {

readme.md

@@ -8,9 +8,8 @@ ### Image
 
-* `src` (str): url of the image
+* `src` (str): url of the image [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src)
 * `steps` (arr): [optional] array of screen sizes to optimize for
-* `sizes` (str): [optional] same as sizes on an img tag
+* `sizes` (str): [optional] same as sizes on an img tag [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)
 * `classes` (str): [optional] any classes to be added to the image
-* `alt` (str): [optional] alt text for the image
-* `aspect_ratio` (arr): [optional] automatically adjusts to aspect ratio, for
-  example `[16,9]`
+* `alt` (str): [optional] alt text for the image [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt)
+* `aspect_ratio` (arr): [optional] automatically crops to aspect ratio. first two items in the array are the ratio (ex. `[16,9]`), and the third is the base width that images will be cropped to in IE, which doesn't support srcset (ex. `[16,9,500]`)
 * `params` (obj): [optional] params passed directly to imgix
@@ -17,0 +16,0 @@

No alert changes

Improved metrics

Total package byte prevSize

3646

increased by17.73%

Lines of code

58

increased by7.41%

Worsened metrics

Number of lines in readme file

24

decreased by-4%

No dependency changes