Skip to main content

Web-Ready images

Bit Depth

  • PNG bit depth of 24 has the same number of colors as a PNG with a bit depth of 32. Both contain 16.8 million colors.
  • The extra 8 bits is for the additional 8-bit channel for transparency information (alpha channel).

Rasters: To further optimize fast-loading raster images, you might want to create different sizes for different breakpoints and lazy load them. Providing the smallest file size possible and allowing our customers to take advantage of bandwidth-saving measures like caching is key to providing a speedy load time that doesn't kill someone's mobile-plan-allotted-bandwidth for the month.

When should I use a PNG? - Best for: raster graphics like illustrations

  • We recommend exporting any PNGs at 2x the largest display size, so that the graphic's crispness isn't lost on retina displays.

  • Pros

    • Very small file sizes for computer-generated artwork
    • Large file sizes if you include any photographic content, consider using a JPG instead
    • Really good transparency support in newer browsers

  • Cons

    • Can look pixelated if displayed beyond the original export dimensions
    • Poor transparency support in legacy browsers When should I use a JPG? - Best for: photography

  • We recommend exporting any JPGs at 2x the largest display size, so that the graphic's crispness isn't lost on retina displays.

  • Pros

  • Cons

  • Smallest file sizes for photographic images

  • Large file sizes if your artwork is computer-generated, consider using a PNG instead

  • Can look pixelated if displayed beyond the original export dimensions When should I use a GIF? - Best for: Simple animated graphics, transparency support in legacy browsers

  • We recommend exporting any GIFs at 2x the largest display size, so that the graphic's crispness isn't lost on retina displays.

  • Pros

  • Cons

Supports animation of graphics in both modern and legacy browsers Transparency support in PNGs is superior, GIF transparency doesn't support alpha opacity percentages, it's all or nothing Supports transparency in both modern and legacy browsers Can look pixelated if displayed beyond the original export dimensions

Image Compression​

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/ https://freshman.tech/image-optimisation/

https://github.com/GoogleChromeLabs/squoosh

Remove background​

https://www.remove.bg/

WebP & Resize​

https://squoosh.app/

alternate https://imageoptim.com/mac

  • progressive jpeg

CSS Properties​

object-fit explained​

The object-fit property in CSS is used to control how the contents of a replaced element, such as an <img> or <video>, are resized to fit the element's box. It is not part of CSS Grid but can be used in conjunction with CSS Grid to control how images or videos behave within grid items.

The object-fit property offers several keyword values to determine how the image is displayed within its container:

  • cover: The image will cover the entire container, maintaining its aspect ratio. Parts of the image may be clipped if necessary to fill the container.
  • contain: The image will be resized to fit within the container while maintaining its aspect ratio. The image will not be distorted but may not fill the entire container.
  • none: The image will not be resized; it will be displayed at its original size.
  • scale-down: The image will be resized as if using none or contain, whichever results in a smaller image.
  • fill: The image will fill the entire container, and its aspect ratio will not be maintained, which may distort the image.

CSS Grid is a layout mode in CSS that allows you to create grid-based layouts with rows and columns. Grid items are the elements placed within a grid container. While object-fit is not a part of CSS Grid, it can be applied to grid items to control how images or videos are displayed within the grid cells.

For example, if you have a grid layout where each cell contains an image, you can use object-fit: cover or object-fit: contain to ensure the images fit properly within their grid cells without distorting the image.