Recommendations on image sizes

You can setup the sizes for the following types of images:

  • Small image – this image is used for the list of competition participants;
  • Medium image – this image is used for participant’s page;
  • Big image – this image is used for image display in the lightbox;
  • Preview image - this image is used for crop mode. It should be not less than small image size. We recommend you to set it as medium image size.

Setting up different sizes you can achieve the optimal result for your website design.

You can apply own sizes for each competition. Take a look how it is organized on the demo website - in all three competitions different sizes are used.

Image settings

We recommend to read the document Images, that describes how to setup image settings.

Crop mode ratio

First of all you should decide on ratio. Small Image Ratio parameter is responsible for the crop area that is displayed on the preview image. The cropped image will be resized according to the small image sizes.

This parameter has the following options: 1:1, 2:3, 4:3 and 16:9. By default it is 4:3. Select the desired one and check is it suitable for you or not.

Image sizes

In most cases users will upload the same images that they got from the photographer or have moved from the digital camera.

Considering that the lightbox effect has a responsive mode, we recommend to set sizes for big image that will look good on wide screens.

Here is the example of big image on the wide screen:

Big image view on the wide display
Big image view on the wide display

In general for medium and big images we recommend to set sizes according to the concept of your website. For example, if it is design projects or CD images then the size of source images could be be the same.

In other cases you should set sizes considering that users can upload landscape and portrait orientation images, so we recommend not to set strict ratios for medium and big images. In this case on the participant’s page medium image size could be both in landscape and portrait orientation. The same applies to big image.

Take a look on this example:

Orientation examples
Two different orientations: landscape and portrait
  • Left image: 1200x800 px
  • Right image: 683x1024 px

In this example we have two images with different ratios. If we setup in settings the same size of one of this images (for example, landscape orientation), then image with the potrait orientation will have too small height in the lightbox.

That is why we recommend to set the maximum size for width and height. In our example that would be 1200x1024.

But for the small image you should set the strict sizes. As a result image with landscape format normally fits into the portrait ratio of small image:

Creation of small image after participant's photo upload
Creation of small image after participant's photo upload

The parameters of small image are important because are used for conception of the website design as you can manually set the output parameters on the competition page; for example, the number of participants per row and the number of rows. That is why the size of small image plays an important role.

Recommendations on creation of watermark

When you want to have a watermark on the uploaded images you should enable it in the image settings. But before that you should create a watermark image. This could be a website name (domain name), trademark or logo.

You should take into account that photos can have completely different colour mixes and watermark should be done universal and good readable.

For that during watermark image creation you can try to use white colour for logo / trademark and a stroke for text titles.

In some cases you may not use transparency, for example if it is a colour trademark that inside the square.

We recommend you to do some testing and choose the optimal watermark before a competition will start and users will start to upload their photos.