4/2/2023 0 Comments Imageoptim npm![]() ![]() Removes solid-color border from the image. This way the focal point can be specified independently of image's actual size.įor example, crop focusing on a point that is in left third of the image, about 20% from the top of the image: These numbers are x pixel position divided by width and y pixel position divided by height. 0 is top/left, 0.5 is center, 1 is bottom/right. The point's coordinates are specified within uncropped image, but the position is expressed using fractional numbers between 0 to 1, e.g. The image will be cropped so that the given point always remains in the image. You can select which side of the image should be kept when cropping by adding an argument with one of top, left, right, bottom.įor example, this always keeps the top of the image, and the bottom will be cut off if necessary: Same as crop, but instead of cropping towards image center, automatically selects the most important aera of the image. ![]() Image is scaled and cropped to completely fill the given width and height, so that the resulting image always has exactly the dimensions specified, e.g. This is the default method, so you don't need to specify it explicitly:ĥ00x500,scale-down would resize a 1000x200 image to 500x100, but a 16x16 image would stay 16x16. Image size is always equal or smaller than the given dimenions. Like fit, but the image is never enlarged. Small images will be enlarged if necessary.ĥ00x500,fit would resize a 1000x200 image to 500x100, and a 16x16 image would be (wastefully) enlarged to 500x500. Aspect ratio is preserved, so one of the dimensions may be smaller than the specified maximum. Image is resized to completely fit within the given dimensions without cropping. in srcset), and it's more convenient to append ,2x to existing settings than to multiply the dimensions. Most of the time you need both 1x and 2x versions of each image (e.g.Makes dimensions always match lengths specified in CSS and HTML.Knowing physical pixel size enables ImageOptim API to fine-tune image sharpness and perceptual lossy compression settings, which gives better quality and file size (when pixels are smaller, then image details are smaller too, and lossy compression can take advantage of that).Resizing to 160x100,2x will create an image that is up to 320x200 pixels large (in "device" pixels), and is optimized for display at size of 160x100 CSS px on double-density displays. This is for use with HTML5's srcset attribute that defines higher-resolution image alternatives.īy default resizing to 160x100 will create an image that is up to 160x100 pixels large, but: Multiply image dimensions by 2 or 3 for High-DPI ("Retina") displays. The height will vary depending on image's aspect ratio, e.g.Įxact interpretation of dimensions depends on the following options: 1x, 2x or 3x default 1x You don't have to multiply image dimensions for High-DPI (“Retina”) screens that require multiple “device pixels” per CSS pixel. Why CSS pixels are better than device pixels? It's convenient when dimensions in the markup, such as and #img, use the same unit as image dimensions in the API URLs, regardless of screen DPI. Images are always resized preserving aspect ratio. 160x100/ĭimensions are specified in CSS pixels, but without the px suffix. full/ width x height Maximum image width and height, e.g. ![]() Multiple options are separated with commas, e.g. eX4mp1E4pI/ 100x100,crop/ For a site with this account ⤵︎ get the source image from ⤴︎ and crop it to 100px square Options overview ImageOptim will automatically set optimum quality for optimized files if the source images had sufficiently high quality. If the image isn't available publicly on the Internet, you can upload it directly instead.įor best results, please use JPEG files saved at very high quality (PNG files are good to). ( optional) an absolute URL of the image to optimize, e.g. In case you don't want to specify any options, and only optimize images without resizing them, use the full option (as in full-size). ![]() ( width x height, 2x, full, scale-down, fit, crop, quality, timeout). a comma-separated list of values and keywords that describe desired image dimensions, quality, etc. identifier of your ImageOptim API account.Įnter your e-mail address to get your username right away: im2.io / username / Options/ Image URL username Make a POST request ( how to) to a URL constructed as follows: Save the optimized files and serve them from your server. Basically, you download a better version of any image from the ImageOptim API. The ImageOptim API will download the image, perform its magic, and return an optimized image as a response to the request. To use the API, make an HTTP request with an URL of an image to optimize (you can make the request using PHP, NodeJS or even Bash). ImageOptim API Documentation HTTP API Overview ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |