How to adjust images – Best practices

Last updated: April 25, 2022 Written by: Avatar Magdalena Dejnak
share
Table of contents
share
Table of contents

To ace your landing page, pop-up, or lightbox, you should take care of the images – their quality, as well as size, format, and adjustment to browsers.

If you are looking for high-quality photos, use the Unsplash free stock images and find your images directly in the editor.

You can browse the image widget category in our Help Center.

REMEMBER: This article shows tips and best practices, you can always manage the images your own way.

Recommended images on a landing page

Dimensions and resolution

Recommended dimensions:

  • Favicon: 192×192 px
  • Landing page/section background image: width 1920 px, height – depending on your needs (maximum of 860 px is recommended to fit the whole section in one view)
  • Section background image with parallax: width 1920 px, height 1080 px
  • Logo: logos vary, but remember to keep them small (especially in the hero section), e.g. 150×50 px

Other graphics and images should be added to the editor in their display dimensions.

Recommended resolution:

Most computer screens’ resolution is 72dpi or 90dpi, thus there is no need to export bigger files from your graphic program.

Formats

Recommended formats:

  • Icons: ideally .svg, if impossible, use .png
  • Other images: .png or .jpg

Images optimization

Proper dimensions, resolution, and format are important, but you should also take care of additional optimization of the images. That way, the page loading will be faster, which in turn will improve rankings and user experience.

Cover these three aspects to optimize images for the web:

  • Design & appearance
  • Fast loading
  • Indexing by search engines

What you can do:

  • Use high-quality images, then resize them and save them in the right format.
  • Save images in mid-quality, e.g., 60-70% (it does not apply to photos in your portfolio). Do not export graphics in high resolutions – be concerned mostly about pixels, not dpi value.
  • Reduce the size of images with a compression tool, e.g., TinyPNG (smaller graphics should not be bigger than 200 KB).
  • Give your images SEO-friendly names.

Images editing options in the editor

Images in the Landingi editor can be refined in several ways. Below, you will find a list of options that may help you create your graphics more efficiently.

Editing options in a toolbar

Click the Image widget and navigate to the right-side toolbar.

You will find three editing tabs: (1) Borders, (2) Rounded corners, (3) Shadow.

After entering the widget, you will see the Gallery, from where you can navigate to additional editing options. Learn more about the Uploadcare editing tool.

Image editing with other widgets

Other widgets may be a great way to create more complex graphics directly in the editor.

For example, with the Box widget, you can create a filter effect on your image.

In the editor, find the Box widget. Drag and drop it in the active area of your landing page.

Adjust the size and position. Navigate to the right-side toolbar and activate the Background (1) tab. Click the Color field and then choose your color and change its transparency (2).

You can also adjust the borders, corners, and shadow of the Box.

Other tips

Multiple small graphics in the same size

While creating multiple small boxes/images, you need them to be exactly the same. To do so, create one element, go to the mobile view and adjust it there.

Go back to the desktop view and copy the element as many times as you need. That way, you do not have to repeat the editing multiple times and each graphic will be equal, also on a mobile view.

Gradient image in the section background

If you want to add a gradient filter to your section background image, add the image to the landing page background and then choose Gradient as a background style for the section.

share

Was this manual helpful?