Getting Images Ready for Web

Resizing Images

Resizing images ensure the image fits the designed space perfectly on your website, you can also use Photoshop! However picresize.com is a great free alternative!

Otherwise please contact Pebble and we can resize and upload the images for you! **Please note support charges will apply

  1. Click the blue ‘edit a photo’ button
  2. Open the image within the program by dragging or uploading, then click the blue button ‘Continue to edit picture’
  3. Once the image has loaded, scroll down to’resize your image’ section, and enter the dimensions you need, they do not have to be exact but always larger than the size needed.
  4. After you have the right size, scroll down and click the blue ‘I’m done, resize my picture!’ Please note this may take a few seconds.
  5. The next screen will give you your new image to save, it also shows you the original image size and dimensions and the new size

Getting the best file size

It’s important that we keep all images file sizes as small as possible, as this is a major factor when looking at overall website speed!

After you have resized your images using the above steps, upload them through ImageOptim a great free tool that drastically reduces file size without compromising quality.

We try to aim for less than 300kb and ideally 200kb.

  1. Click the blue ‘edit a photo’ button
  2. Open the image within the program by dragging or uploading, then click the blue button ‘Continue to edit picture’
  3. Once the image has loaded, scroll down to ‘resize your image’ section, and enter the dimensions you need, they do not have to be exact but always larger than the size needed.
  4. After you have the right size, scroll down and click the blue ‘I’m done, resize my picture!’ Please note this may take a few seconds.
  5. The next screen will give you your new image to save, it also shows you the original image size and dimensions and the new size

Where do you find the right image dimensions?

When resizing images for your website, there will be sizes already created in your website admin for where your new images will go – referencing these image sizes will keep the layout consistent.

To find where image sizes are listed, follow the steps below, or feel free to ring the studio and we can step you through it:

  1. Log into the website admin > go to the ‘Media’ module listed on the left panel
  2. Click on an image that is displaying on the website where you wish to add new images to
  3. This opens up the image details, if you look in the top right panel details you will see the image information listed, here you can see the current ‘Dimensions’ use this for your new images, using the above steps.

The Importance of File Names

Using clear and accurate image file names not only helps keep the website admin media module tidy & searchable, but it actually helps with SEO!

The best way to name images is by using the hotel location > followed by the website section it shows on > followed by a description of the image.

Here is an example:

noosa-accommodation-superior-room-bedroom.jpg