In the full sense, optimising your images means several things. These are simple processes that every web builder should go through, to decide how to prepare "images" before adding to a web page. The aim here is speed up the web site download time, so that users can get to it quicker and avoid delays in waiting for the site to appear. Google will like you more for doing this too and like you less if you don't.

Tiles, Gradients and colours.

Firstly, we need to decide if an image (JPG or PNG) is the best solution. If we want a graduated colour, or a colour, or tiled pattern, then an image of the whole area to be covered is the wrong solution. In this case we need to optimise that "image" by generating the graduated colours, the fixed colour using just a CSS effect on the page. (If using Stacks, and your choice of stack doesn't offer this feature, then consider getting a better stack). In the case of a repeating pattern, we should isolate the repeating tile to just 1 instance of the repeated image. Ideally, the tile should be sized down, so it isn't further reduced by the page, i.e. don't us a tiled image that will be larger than what appears on the web page.

Images

  1. Check you are using a 72dpi image and not a 300dpi image. Many image download services such as Unsplash, mix 72dpi and 300dpi images. You can use the free Xnconvert to convert from 300dpi to 72dpi.

  2. IMPORTANT We need to assess the largest size that an image will be displayed on a page. E.g. if your maximum page width is 1140px, and your image has to fill that full width space, then the maximum width should be 1140px for that image. Ideally we would also edit the image in a graphics App to trim off any unused height to reduce the physical dimension to be no bigger than required. Remember that generally, an images size in Kb, grows exponentially with image width - 2x the width = 4x the size in Kb!

  3. Images that don't go full width need to be dimensioned to be no wider or higher than they will appear on a page. For example, the images used in the initial bog display here, are all sized at 800px wide x 400px high because that is the maximum dimension they will be controlled to appear on the page. They will never be shown wider than 800px and never taller than 400px.

  4. If you are planning to add an overlay colour or a texture, consider applying this effect to the original image instead, using a graphics App. E.g. a very common effect is to add a 50% transparent dark overlay using CSS, on top of an image. A better way, resulting in a smaller download size, is to apply that effect to the original image and/or reduce the colour luminosity using graphics App, or increase the main optimisation (in Stage 2). A lot of bytes can potentially be saved with this method.

  5. PNG images should really only be used for images that have some transparency and these can be converted to webP to preserve that transparency. JPG images don't support transparency.

  6. If you are deciding on optimising image dimensions to be used in a photographic gallery, then you should decide on a maximun width for all images, that makes a good compromise between image width and image download size in Kb. 4000px wide images will look great for those with a large enough screen but for everyone else, will add a significant download delay if the internet connection is poor. An image width around 1600px may be a better compromise.