Block Theme Image Optimization

File Size

An image has no business being over 1Mb in size. This is a red flag. To check, open your inspector > network and filter by images. Load the page and sort by decreasing size to view your largest images.

If you’re unsure, use this app to check for the best file size while keeping an acceptable amount of quality: https://squoosh.app/

Dimension

The biggest factor is the dimension. Due to the prevalence of retina devices these days, your image dimensions need to be twice the displayed pixel size. However, we need to define the upper bounds for images. Generally your biggest image fill be anything that is the full size of the viewport. Your container should also have a maximum size. Suggested maximum container size: 1400px. Therefore the ultimate maximum image width should never be more than 2800px.

Medium images would do fine for most cases at 1000px wide. Use your best judgement. Context matters too. If you’re choosing an image that’s to be used as the hero image on the homepage that’s full width, you may want a higher resolution image to account for large retina screens.

Format

Different kinds of images should use different formats. Follow these guidelines

  • JPEG, for photo realistic, or anything with a lot of gradient colors, shadows, and generally a lot of different colors and no need for sharp edges.
  • PNG, for anything that needs crisp edges, transparencies and has few colors.
  • WebP, due to lower client support as of this day, this should be provided through a service like CloudFlare which will detect client support of WebP and serve in that format.

Compression

Even with the proper format selected, your image may still have a high file size. This is where image compression comes in. Certain software comes with tools that will do this for you.

WordPress

Photoshop

Photoshop offers a “Save for Web” function when saving images. Always use this when exporting assets. Play around with different settings to achieve best results.

MacOS

ImageOptim – handy for bulk optimization on Mac.

Sketch

An ImageOptim Plugin is available for Sketch.

CDN

Besides the file size, sometimes the response time of an image may be due to a network factor. You’ll notice this by a high time value in your inspector. To improve this, implement a CDN. A CDN will distribute your image assets across a large array of servers which reduces the network distance and increases availability of the asset to the user. These servers are also usually configured to serve static assets efficiently as well. The following are some CDN’s that can be implemented:

  • Cloudflare
  • DigitalOcean Spaces
  • Google Cloud Storage
  • Kinsta

WordPress

WordPress has a few plugins that can offload the media library onto a CDN to increase performance and also reduce server storage needs:

Usage

The best image contraception is abstinence. Avoid using images when possible.

  • Don’t load a full icon library when you can embed only the SVGs you need.
  • For simple shapes, use CSS
  • For interactive images (those that are apparent on first load) consider using ajax calls to load them in instead of loading all at once and hiding.
  • Convince clients to avoid sliders.
  • Use lazy loading. This loads assets only when they’re in view. This is especially useful for long or content heavy pages.

Video

It’s not uncommon to use a video as a background. Use the following command to optimize your video

ffmpeg -i video.mp4 -c:v libvpx-vp9 -an -b:v 700k -s hd720 video-700k.mp4

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.