Best Practices on how to save images for websites

Top 4 Image format for web

  1. JPG / JPEG
    – JPG is perhaps the most common image format used on the web. It’s highly compatible and boasts a small file size with very little noticeable quality loss. JPG’s are compressed using what is called “lossy” compression, which means there is always a loss of quality as you save.
  2. GIF
    – A unique feature of the GIF format is its ability to be animated. While this functionality has decreased in recent years, subtle and purposeful animation with a GIF image can bring just the right amount of attention to a call to action or another event on your site.
  3. PNG
    – PNG is another very common and versatile image format found on the web today. Boasting a “lossless” compression, you can save a PNG and not lose any quality. However, this will (in most cases) yield a very large file size. PNG is not an option when it comes to print, as it doesn’t support a 4-color (CMYK) process.
  4. SVG
    – The latest of all the file types, SVG (Scalable Vector Graphics) is a vector image file format released in 2001, and is more powerful than other file formats suitable for the web. Unlike raster formats seen in JPG, GIF, and PNG, an SVG image remains crisp and clear at any resolution or size.

Best sizes of images for website

There are different type of images for the website and here are the list:

  1. Logo – the brand or the business name of the website and has 2 orientation
    a. Landscape –  Ideally, the standard size for this kind of orientation is 300px by 100px.
    b. Portrait – and for this orientation is 200px by 200px.
  2. Hero Image – This is the main image of the website, sometimes also called as Key visual Image. The best practice for this is showing the image for 1/2 or 3/4 height size of the screen. Although there is only case that image is showcased whole screen. Important note for this, make sure that the H1 or the welcome message of the website is display above the fold (or in the term is it should be display once the website is load with out scrolling).
    There are 2 types of this, which is the content width with 1200px by the height you want. and the fullwidth is 1920px by the height you want.
  3. Content Image – There are different sizes for this and here is the article we can refer on: https://fieldsgraphicdesign.com/wordpress/right-image-size-your-website/
  4. Product Image – Usually this should be a square in size. Kindly refer to this site for the sizes:  http://fastpivot.com/blog/ecommerce/what-is-the-best-size-for-ecommerce-product-images.

Ways to save images using Photoshop

  1. Click on File > Export > Save For Web (or Ctlr + Alt + Shift + S on keyboard)
  2. There is a window that will pop up and has options you can choose whether JPEG, PNG, or GIF. You can also adjust the quality of image from 1 to 100 together with choosing between LOW to MAXIMUM level of saving the quality of image. Then click the SAVE button.
  3. Another window will pop up for you to input the filename of image and where to save it. And for the last time, click again the SAVE button.

Another way to optimize images

There are user friendly online tools we can use, here are the list:

  1. Optimizilla – https://imagecompressor.com/
  2. Compressor.io – https://compressor.io/
  3. TinyJpeg – https://tinyjpg.com/

Note: Optimizing images can help the website load faster and it can also lessen the usage of website storage.

After considering those steps above, you can now upload the image on the website 🙂