diff --git a/README.md b/README.md index 29ab1541..5d07f341 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Automatically create & optimize responsive image transforms, using either native **Note**: This plugin may become a paid add-on when the Craft Plugin store becomes available. -![Screenshot](screenshots/image-optimize-splash.png) +![Screenshot](resources/img/plugin-logo.png) ## Requirements @@ -21,6 +21,8 @@ ImageOptimize works on Craft 3.x. ## ImageOptimize Overview +![Screenshot](resources/screenshots/image-optimize-field-composite2.jpg) + ImageOptimize allows you to automatically create & optimize responsive image transforms from your Craft 3 assets. It works equally well with native Craft image transforms, and image services like [Imgix](https://imgix.com), with zero template changes. You use the native Craft UI/UX to create your image transforms, whether in the AdminCP or via your templates. ImageOptimize takes care of the rest, optimizing all of your image transforms automatically by running a variety of image optimization tools on them. @@ -47,7 +49,7 @@ The plugin Settings for ImageOptimize allows you to choose whether to use native To create client-proof optimized images with native Craft transforms, you'll need to also install the image optimization tools of your choice. The ImageOptimize plugin Settings page will show you the status of your installed image optimization tools: -![Screenshot](screenshots/image-optimize-settings.png) +![Screenshot](resources/screenshots/image-optimize-settings.png) Here's how to install a few on Ubuntu 16.04: @@ -80,11 +82,11 @@ Craft will then use Imgix for all Asset URLs, including the original image, its To utilize Imgix, you'll need to enter your **Imgix Source Domain**, and your **Imgix API Key** to allow for auto-purging of changed Assets: -![Screenshot](screenshots/image-optimize-imgix-settings.png) +![Screenshot](resources/screenshots/image-optimize-imgix-settings.png) Then configure your Imgix source via your Imgix.com account. If you're using a Web Folder as a source, make sure it's set to the root of your domain, since you can only have one per site: -![Screenshot](screenshots/imgix-web-folder-source.png) +![Screenshot](resources/screenshots/imgix-web-folder-source.png) Regardless of how many separate Craft Asset Volumes you've set up, you'll just have one Web Folder source. @@ -102,7 +104,7 @@ To create responsive image variants for all of your images, create an **Optimize You can then create as many Optimized Image Variants as you like: -![Screenshot](screenshots/field-settings.png) +![Screenshot](resources/screenshots/field-settings.png) You can add, delete, and re-order the Optimized Image Variants just like you can Matrix blocks. @@ -121,7 +123,7 @@ Whenever you add an OptimizedImages field to an asset Volume's layout, or make c If you double-click on an asset (or click on an asset, and choose **Edit Asset** from the gear menu), you will now see all of your responsive image variants for that image: -![Screenshot](screenshots/image-variant-field.png) +![Screenshot](resources/screenshots/image-variant-field.png) You'll see the responsive width of each image variant above each thumbnail, with the aspect ratio, file format, and file size below it. If you have `.webp` image variants configured, you will see them here as well. @@ -129,11 +131,11 @@ If you click on an image thumbnail, it will open up the full size image in a new The OptimizedImages field also helps content editors by pointing out potential problems as well: -![Screenshot](screenshots/image-variant-warnings.png) +![Screenshot](resources/screenshots/image-variant-warnings.png) In this example, no **Focal Point** has been set via Craft 3's built-in image editor. The **Focal Point** lets content editors choose what portion of the image is most important, and should be kept in the center of any transformed images: -![Screenshot](screenshots/image-editor-focal-point.png) +![Screenshot](resources/screenshots/image-editor-focal-point.png) There are also warnings indicating that the original image is too small, and is being upscaled for one of the responsive variants, and that `WEBP` hasn't been configured, so there are no `.webp` variants created. @@ -262,12 +264,12 @@ All of the placeholder images are stored in the Optimized Image field itself, so The first is `.placeholderBox()` which displays a simple inline SVG with the background color set to the dominant color of the image: -![Screenshot](screenshots/placeholder-image-box.png) +![Screenshot](resources/screenshots/placeholder-image-box.png) (Placholder on the left, actual image on the right) The second is `.placeholderSilhouette()` which displays an inline SVG silhouette generated from the original image: -![Screenshot](screenshots/placeholder-image-silhouette.png) +![Screenshot](resources/screenshots/placeholder-image-silhouette.png) (Placholder on the left, actual image on the right) The SVG image itself will only be 300px wide, so apply CSS styles to it such as: @@ -281,7 +283,7 @@ The SVG image itself will only be 300px wide, so apply CSS styles to it such as: The third is `.placeholderImage()`, which displays a tiny Instagram-style low resolution placeholder image to display while the image is being lazy loaded. -![Screenshot](screenshots/placeholder-image.png) +![Screenshot](resources/screenshots/placeholder-image.png) (Placholder on the left, actual image on the right) The image itself will only be 16px wide, so apply CSS styles to it such as: @@ -310,7 +312,7 @@ ImageOptimize extracts a color palette composed of the 5 most dominant colors us ``` -![Screenshot](screenshots/color-palette.png) +![Screenshot](resources/screenshots/color-palette.png) Dominant Color Palette @@ -361,11 +363,11 @@ This is especially useful when implementing [webp images](https://developers.goo Here's an example of what it looks like for images with the transform `Some Transform` applied to them: -![Screenshot](screenshots/image-variants.png) +![Screenshot](resources/screenshots/image-variants.png) The savings from using `.webp` can be significant, without sacrificing image quality: - ![Screenshot](screenshots/image-variants-filesize.png) + ![Screenshot](resources/screenshots/image-variants-filesize.png) `webp` also supports transparency, so it can be used as a viable substitute for both `.jpg` and `.png` diff --git a/resources/img/plugin-logo.png b/resources/img/plugin-logo.png new file mode 100644 index 00000000..04731236 Binary files /dev/null and b/resources/img/plugin-logo.png differ diff --git a/screenshots/color-palette.png b/resources/screenshots/color-palette.png similarity index 100% rename from screenshots/color-palette.png rename to resources/screenshots/color-palette.png diff --git a/screenshots/field-settings.png b/resources/screenshots/field-settings.png similarity index 100% rename from screenshots/field-settings.png rename to resources/screenshots/field-settings.png diff --git a/screenshots/image-editor-focal-point.png b/resources/screenshots/image-editor-focal-point.png similarity index 100% rename from screenshots/image-editor-focal-point.png rename to resources/screenshots/image-editor-focal-point.png diff --git a/screenshots/image-optimize-field-composite.jpg b/resources/screenshots/image-optimize-field-composite.jpg similarity index 100% rename from screenshots/image-optimize-field-composite.jpg rename to resources/screenshots/image-optimize-field-composite.jpg diff --git a/screenshots/image-optimize-field-composite2.jpg b/resources/screenshots/image-optimize-field-composite2.jpg similarity index 100% rename from screenshots/image-optimize-field-composite2.jpg rename to resources/screenshots/image-optimize-field-composite2.jpg diff --git a/screenshots/image-optimize-imgix-settings.png b/resources/screenshots/image-optimize-imgix-settings.png similarity index 100% rename from screenshots/image-optimize-imgix-settings.png rename to resources/screenshots/image-optimize-imgix-settings.png diff --git a/screenshots/image-optimize-settings.png b/resources/screenshots/image-optimize-settings.png similarity index 100% rename from screenshots/image-optimize-settings.png rename to resources/screenshots/image-optimize-settings.png diff --git a/screenshots/image-optimize-splash.png b/resources/screenshots/image-optimize-splash.png similarity index 100% rename from screenshots/image-optimize-splash.png rename to resources/screenshots/image-optimize-splash.png diff --git a/screenshots/image-variant-field.png b/resources/screenshots/image-variant-field.png similarity index 100% rename from screenshots/image-variant-field.png rename to resources/screenshots/image-variant-field.png diff --git a/screenshots/image-variant-warnings.png b/resources/screenshots/image-variant-warnings.png similarity index 100% rename from screenshots/image-variant-warnings.png rename to resources/screenshots/image-variant-warnings.png diff --git a/screenshots/image-variants-filesize.png b/resources/screenshots/image-variants-filesize.png similarity index 100% rename from screenshots/image-variants-filesize.png rename to resources/screenshots/image-variants-filesize.png diff --git a/screenshots/image-variants.png b/resources/screenshots/image-variants.png similarity index 100% rename from screenshots/image-variants.png rename to resources/screenshots/image-variants.png diff --git a/screenshots/imgix-web-folder-source.png b/resources/screenshots/imgix-web-folder-source.png similarity index 100% rename from screenshots/imgix-web-folder-source.png rename to resources/screenshots/imgix-web-folder-source.png diff --git a/screenshots/placeholder-image-box.png b/resources/screenshots/placeholder-image-box.png similarity index 100% rename from screenshots/placeholder-image-box.png rename to resources/screenshots/placeholder-image-box.png diff --git a/screenshots/placeholder-image-silhouette.png b/resources/screenshots/placeholder-image-silhouette.png similarity index 100% rename from screenshots/placeholder-image-silhouette.png rename to resources/screenshots/placeholder-image-silhouette.png diff --git a/screenshots/placeholder-image.png b/resources/screenshots/placeholder-image.png similarity index 100% rename from screenshots/placeholder-image.png rename to resources/screenshots/placeholder-image.png diff --git a/src/assetbundles/imageoptimize/dist/img/ImageOptimize-icon.svg b/src/assetbundles/imageoptimize/dist/img/ImageOptimize-icon.svg index 5b852bdf..606aef79 100644 --- a/src/assetbundles/imageoptimize/dist/img/ImageOptimize-icon.svg +++ b/src/assetbundles/imageoptimize/dist/img/ImageOptimize-icon.svg @@ -1,37 +1,49 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assetbundles/optimizedimagesfield/dist/img/OptimizedImages-icon.svg b/src/assetbundles/optimizedimagesfield/dist/img/OptimizedImages-icon.svg index 1c2ba2a2..606aef79 100644 --- a/src/assetbundles/optimizedimagesfield/dist/img/OptimizedImages-icon.svg +++ b/src/assetbundles/optimizedimagesfield/dist/img/OptimizedImages-icon.svg @@ -1,49 +1,49 @@ - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + diff --git a/src/icon.svg b/src/icon.svg index 5b852bdf..606aef79 100644 --- a/src/icon.svg +++ b/src/icon.svg @@ -1,37 +1,49 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +