The file format, resolution, and aspect ratio play a crucial role in ensuring that images on your website are sharp, professional, and displayed without any loss of quality.
The right image files
Depending on the intended use, you should use the following formats:
JPG / JPEG: Ideal for photos and large images with many colors. Good compression with relatively small file sizes.
PNG: Perfect for graphics.
SVG: Ideal for logos and icons, as they are lossless and scalable.
Recommended resolutions
Here are some guidelines for sharp display on desktop and mobile devices:
Cover image / header image (landscape format)
Recommended: 1920 x 1080 px
Minimum: 1600 x 900 px
Normal images in landscape format
Recommended: 1200 x 800 px
Portrait format images
Recommended: 800 x 1200 px
Square images
Recommended: 1000 x 1000 px
Ideal for profile pictures or galleries
Logo
As SVG (preferred)
Alternatively: PNG with at least 500 x 500 px
Background as transparent as possible
Favicon
32 x 32 px (standard)
Format: PNG
Selecting the correct format
A common error occurs when you upload a landscape image, but it is displayed in portrait format on the website.
The system attempts to display the image appropriately by zooming in. This "zooming in" results in a loss of image quality because only a section of the original is used.
An example: You upload a landscape photo. However, the website requires a portrait image.
The system:
zooms in on the image
thus cropping off some of the right and left sides
or artificially enlarges it
Result:
→ Blurred image
→ Important areas of the image are missing
→ Loss of quality
So make sure you upload the image in the desired format.
Examples:
If the image is to be displayed as a square → crop it directly into a square and upload it.
If it is needed in landscape format → crop it into landscape format beforehand.
If it is to be displayed in portrait format → prepare it in portrait format.
Adjust image size in the editor
If "Auto-height", "Fill" or "Scale" is selected for the image size in the editor, the pixels may be stretched.
It is therefore important, as described above, to upload the image in the correct format and resolution.
If the image does not appear sharper online and no manual adjustments are made, it is recommended to select "Fit" for the image size. In this case, the image will be displayed in its original size and will not be scaled additionally.
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂