Prepare Images for Website Before Upload

Table of Contents

It’s important you resize image to a good size before uploading them on your website

Naming your images

Always name your images in logically so its easier for you to search it in Media Library.

Avoid something like: image-01.jpeg
Instead use something like: about-us-cover-image.jpeg

File Formats

Using a correct file format will ensure your images look great with lowest file size possible.

JPEG/JPG

You JPEG/JPG when using regular images. Never use PNGs or anything else in such case.

If your image is in PNG, you can conver it into JPEG over here:
https://png2jpg.com/

PNG

Use PNG only when:

  1. Image needs a transparent background
  2. Image has only 2-3 colors (example a two-three colored – logo)

Resizing Images (Dimensions)

In most scenarios, do not upload image which is larger than 1600px in width and 1080px in height.

Below steps are only required if your image is larger than 1600px in width and 1080px in height.

Resizing image on Windows

For steps to resizing images on Windows, refer to this link:
https://www.c-sharpcorner.com/article/how-to-resize-the-image-using-paint-in-windows-10/

Resizing image on Mac

  1. Open image in ‘Preview’ app
  2. Go to Tools > Adjust Resize
  3. Update the new dimensions:
    Based on image orientation, resize either using width or height. Width shouldn’t exceed 1600px and height shouldn’t exceed 1080px.
    Resolution should be ’72’ pixels/inch

Optimize (Compress) Images (File Size)

Once you have named your image properly, ensure it is in correct file format, optimized its dimension, its now time to shrink the file size.

You can use a web service like – TinyPNG:
https://tinypng.com/
(works both for PNGs as well as JPEGs)

Upload your images, optimize it and download it.

Then you can use it on your website.

Related Results