images – The Smithy

Performance Lab

April 13, 2022April 13, 2022 TheSmithy

https://wordpress.org/plugins/performance-lab/

Description

The Performance Lab plugin is a collection of modules focused on enhancing performance of your site, most of which should eventually be merged into WordPress core. The plugin allows to individually enable and test the modules to get their benefits before they become available in WordPress core, and to provide feedback to further improve the solutions.

Currently the plugin includes the following performance modules:

WebP Uploads: Creates WebP versions for new JPEG image uploads if supported by the server.
Persistent Object Cache Health Check: Adds a persistent object cache check for sites with non-trivial amounts of data in Site Health status.
Audit Autoloaded Options: Adds a check for autoloaded options in Site Health status.
Audit Enqueued Assets: Adds a CSS and JS resource check in Site Health status.
WebP Support: Adds a WebP support check in Site Health status.

Responsive Image Breakpoints Generator v2.0

September 10, 2020September 10, 2020 TheSmithy

https://www.responsivebreakpoints.com/

Upload an image and Easily generate the optimal responsive image dimensions.

Generates HTML5 Image and Picture tag
Download zip with all generated images

Resourcecards.com and other resources for images, fonts, icons ..

November 3, 2017November 3, 2017 TheSmithy

HN thread

https://resourcecards.com/ is a great resource for literally anything you need

Images

http://pixabay.com/
https://stocksnap.io/
http://www.free-images.cc/
https://unsplash.com/
https://www.pexels.com/
http://librestock.com/
http://skuawk.com/
http://www.sitebuilderreport.com/stock-up
http://finda.photo/
http://foodshot.co/
http://growthtext.com/free-stock-photos/
https://www.stockified.com/
https://www.negativespace.co/
https://everypixel.com/
http://startupstockphotos.com/
https://foodiesfeed.com/
https://picjumbo.com/
https://www.stockio.com/

Icons and fonts:

http://cssicon.space/

https://fontawesome.com/

https://thenounproject.com/

http://ionicons.com/

https://zurb.com/playground/foundation-icon-fonts-3

http://s-ings.com/typicons/

http://fontello.com/

https://useiconic.com/

https://material.io/icons/

https://fonts.google.com/

https://feathericons.com/ (SVG icons)

Lazy Loading Images without relying on javascript

May 23, 2016May 23, 2016 TheSmithy

Source: Lazy Loading Images? Don’t Rely On JavaScript! | Robin Osborne

Inverted mask from AI path

January 20, 2016January 20, 2016 TheSmithy

Create a background layer in the desired color
Select the paths that should form the mask and create a compound path
Expand the transparency window
Open the options menu and make sure ‘new opacity masks are inverted’ is selected
In the same menu choose ‘make opacity mask’

Exporting SVG from Ilustrator

January 14, 2016June 1, 2016 TheSmithy

Update:

Export artboard to SVG ‘for web’.

Save as, use artboard
Choose ‘try’ to export for web
Choose options
Careful when choosing ‘responsive’: it somehow adds vector parts that are outside the artboard area to the svg.

Source

SVG profiles

SVG 1.0: all modern desktop and mobile browsers support SVG 1.1, so never choose this option.
SVG 1.1: You will almost always want this.
SVG Tiny/Basic: this is a subset of SVG intended for mobile devices. Only a handful of devices support SVG Tiny and not the full spec, so go for SVG 1.1.