How To Resize Images For Web Use

How To Resize Images For Web Use

It’s incredibly important when adding your images on your new website that they are resized to the smallest possible file size. While not compromising on the overall resolution. Your total web page size should be as low a number as possible ensuring that the page loads as fast as possible. At the same time not eating up all of the disk space where your website is hosted. The majority of your websites size is taken up by images and video content. In this post we’ll teach you how to resize your images. Therefore reducing their file size and at the same time ensuring that no image quality is lost in the process.

Why Resize Images For Web Use?

Images should also be uploaded to the correct size to fit the space where they will be appearing on the page. Failure to do this can result in several different outcomes;

  • Images that don’t fit the space and therefore throw off an entire area.
  • Large images as a result make your website load slowly.
  • Small images that look fuzzy and distorted.

All of the above make your site look less professional and have a negative impact on user experience. How can I fix these issues we hear you cry?

There are a few options out there. Many of which involve resizing your images to the correct size for the area of your website where they’ll be showing. We’ll go through these shortly. However, lets start at the beginning and find out what size you need the image to be? If you need to go back a step and locate images to use on your site then you can check out our recent post about How to Find Free Stock Images to help you with this process.

How Do I find Out My Image Size On WordPress?

You can easily find out your image size from the admin area of your WordPress website. Simply navigating to the admin area of the page that you wish to edit and clicking on the image element for Visual Composer.

How to Resize Images for Web Use

Is there an existing image there that you’d like to replace? You can click on this and check the image size from the media library. Then simply upload your new image to the same size and replace the image.

How to Resize Images for Web Use Using WordPress

Alternatively, if a new image is being added to a completely new area within the website. Then the easiest way to check the required image size is to save a blank image element and click update. Next view the page in the front-end of the website. You can check the size of the box that the image will sit in by right clicking on the box and then clicking inspect element. If you hover over the box it will then show you the image size.

So for instance this image size will need to be uploaded as 685px width to fit the area.

How to Resize Images for Web Use Using Inspect Element

If you’re looking to update images and this method doesn’t work for you then as a general rule of thumb you can use these guidelines below. However please note that this is merely a guide and may vary depending on the area and if padding etc has been used. Best practice is to follow the guidelines outlined above to find the exact size.

Full Page Width Image (ie, header areas)  – 1920px

In Grid Header Images – 1300px

Full width layout half page image – 850px

In grid layout half page images (as show in screenshots above) – 685px

How do I Resize An Image?

Adobe Photoshop

The easiest platform to resize an image is Adobe Photoshop and is what we generally recommend, because it’s fast and user friendly.

To resize an image in Adobe Photoshop start by dragging and dropping the image you’d like to be altered. Then select image from the header menu and image size from the drop down menu. You’ll then be able to enter the new image size that you’d like to update to. Ensure that the image size is in pixels. You’ll only need to enter the width and the height will then update automatically based on your image composition. Once this has been done save your work and your image is ready to upload.

*A small aside. This doesn’t really relate to image size.However, always ensure that your image is renamed to a name that is relevant to the SEO target for the page that you are uploading to. As search engines like image names to be consistent with the content that is on the page.

Other Platforms for Image Resizing

If you aren’t able to access Adobe Photoshop then an alternative platform to use is IrfanView which can easily be downloaded and set up. It’s slightly more complex to use for those who aren’t so IT proficient and is generally better for bulk re-sizing lots of images at the same time.

Although there are also a whole host of image sizing tools online that can help you resize images to the correct size. This blog post by Oberlo helps outline some of the best ones. We would recommend Resize Image  which is an easy to use tool where you can upload, resize and reformat images simply online.

Alternatively if using stock images, some sites have a facility to resize your image before download. These include Pexels and Kaboompics. Whereby the appropriate image size can either be selected from the drop down menu when downloading. Or can be entered manually.

Resizing Images For WordPress

So as we have demonstrated, it’s exceptionally important to upload your images to the correct size. Particularly for the specific area where they’ll be used within your website. As well as selecting high resolution images that appropriately reflect the brand image that you wish to represent. Taking the time to consider the space where images will be used. Then resizing them using the techniques outlined in this blog post, will not only result in a more professional looking website overall. But will increase the load speed of the site as a whole. Improve user experience. As well as positively impacting SEO.

We hope you’ve found this guide helpful giving you a clearer understanding of how to resize images for web use. If you’re still unsure or have a question on a specific area which relates to your own website then please do contact us and we’d be happy to advise you. You can read more helpful guides on the blog section of our website.