General – Optimising Images for the Web

 In General, Wordpress Training

Before placing a new image on your website you need to have an image that is optimised to be placed on the web. If the image is not optimised the load time of your website can increase dramatically, frustrating your visitors.

  1. Resizing images on Windows

    OK! So you are sort of familiar with putting images into Word documents and desktop publishing software. Working in the web environment is a little different, because the actual size of the file is critical. This means you need to modify and manipulate the file before you upload it, to ensure the onscreen dimensions (in pixels i.e. px) and the file size (in kilobytes i.e. kb) is suitable.

    Most cameras take photos that are too big for the web and cause your site to run slowly.
    Before you start uploading image files, make sure their sizes are not too big. Look at the file size in Windows explorer or Finder on Mac. Files no bigger than 50Kb are best for web use, if yours show larger file sizes, you need to modify them.

    There are many ways to resize your images for web on a Windows machine, we’ll familiarise you with a couple of them.

    Option 1 – Resize Images using Webresizer online.

    Easy as Pie!

    Call up http://www.webresizer.com/resizer/ in your favourite browser and follow the instructions.

    1) Choose a photo on your computer using the online uploader.
    choose-file

    2) After you’ve got your photo selected through the uploader, click “Upload” to upload it. Make sure the original Image is under 5 MB. If it is over 5 MB – use the Resize Option 2.

    upload-image

    3) Modify. You can crop your image, using the Crop tool

    crop-image

     

    4) Resize. Use Maximum Width or Height to resize your image. The second parameter will be applied automatically to keep the proportions right.

    resizeUse approximately 300-400 pixels for the width parameter for Landscape oriented photos or 500-550 Height for Portrait oriented.

    5) After you’ve applied all the changes, click apply-changes

    6) Compare the difference between the Original Size and New Size. Good? Now you can download your new resized image and save it under new name.

    compare-image

     

    Option 2 – Resize Images using Windows Paint.

    If you are using a Windows computer, you can resize images very quickly in the built-in graphic editor called Paint. This can be found by clicking the start button and going to your programs, accessories and clicking the “Paint” shortcut.

     

    Once you have opened “Paint”, click File, Open, navigate to the folder with your image, and select your photo.

    paintpaint2

    Once it is open in “Paint”, you will see roughly how large it is in proportion to your screen. Click Image, Resize/Skew and make the Image smaller by changing the percentages from 100% to something smaller, if the original file is a big photo, try setting it to 20% and see what happens. You should experiment a little and come to grips with this exercise, it is important.

    Save your image under a new name and follow the instructions below to upload it to your website.

    Resizing images on Mac

    First, you need to drag the picture/photo from iPhoto onto your Desktop or in a folder – so you could see it in Finder.
    Double click on the image you want to resize – it will open it in Preview Utility.

    After Opening the Image you want to resize with Preview, at the top left go to Tools => Adjust Size.. A window with Image Dimensions will pop up (see screenshot below)

    resize-mac

    Under Fit into option you can select a number of predefined sizes.

    Otherwise, you can adjust the size manually using the next option. For convenience, select “pixels” at the right hand side, make sure you’ve got the proportions locked.
    Then, adjust only the “Width” of the image – the “Height” will auto adjust.

    Keep in mind – for web 300- 400 pixels wide is enough.

     

     

    Unless you want to upload a big high quality picture for your photo gallery or portfolio – in this case use apply about 800-1000 pixels Width.

    After you’re done with resizing, you need to save the image.
    At the top left go to File => Save As, select a new name (e.g. Picture_Web) and a place where you want it to be saved on your disk.

You now have an optimized image ready to upload to the web!

Recent Posts

Subscribe for the lastest Wordpress news, tips & tricks!

Stay up to date on the latest features and important updates for Wordpress.

Ta Da! you are now on the list. Nice work!