To begin understanding image resolution, you'll want to be familiar with some of the terms used when discussing image outputs.
- Resolution is the overall number of pixels in your image, ie 2000 x 1333px.
- Quality is the amount of compression added when exporting a JPG (PNG is lossless).
- File size is the actual size of the image that's being saved, usually in kilobytes (KB), megabytes (MB) or gigabytes (GB).
- DPI (dots per inch) is the pixel density of an image and mostly relates to printing.
BeFunky Plus users can save at a maximum of 4088x4088 pixels. Basic users can save at 2500x2500 px. It is not possible to save at an output of higher than 4088x4088 on BeFunky.
When you save as a JPG you are able to adjust the image Quality (amount of compression), and you can preview the image on the 'Save' panel to see the actual results.
Images exported from BeFunky will have a pixel density of up to 300 DPI - however, pixel density is not the same as resolution. Resolution is the total number of pixels, while pixel density is how many of those pixels are grouped into a given area - in the case of DPI, it's the number of pixels displayed/printed in an inch.
Important Notes about DPI
- DPI is not currently saved when exporting as PNG.
- The DPI for exported photos will be the same as the DPI of the original image. This can be up to 300 DPI in the Photo Editor.
- Printers can be set to override DPI in the metadata of an image and print at a higher DPI than saved.
File size vs. Resolution
The file size of an image and resolution both relate to how an image is measured.
Image resolution solely relates to the actual size of your image's canvas in pixels. For example, a resolution of an image in BeFunky would be 2000 x 1333 px.
File size is dependent on how much information is contained within the image. Higher resolution images will typically have larger file sizes. As you crop down a high-res image, the file size may lower as it is not carrying as much information within the file. You can control this in the 'Save' dialogue.
Image quality will affect the overall 'look' of the image you're saving. Moving down the quality slider will resample your image to carry less information, and thus reduce the file size. In general, you'll want to find a balance between lowering the quality down enough to keep a moderate file size without sacrificing too much quality.
Images that are optimized for the web load best at a file size of 500kb - 1mb. Images with many files larger than that risk significantly slowing webpages, or crashing mobile browsers.
Resampling
Resampling refers to how the pixels that make up a digital image change as they're resized. If you make an image smaller than its original resolution, you'll lose some pixels in the process.
Scaling down is easy for images, but scaling up requires the app to resample the pixel areas with information that isn’t there. This creates the ‘pixelated’ low-quality look you may see on images.
You always want to start with the highest resolution or largest images possible to get the best results on output. If you start with a small image and would like to make it larger, this may not be possible.
Takeaways
Do not be alarmed if you see resolution go down as you resize or crop an image. You'll mainly want to be aware of the quality slider as you save your project, and make sure it's a 'High quality image'.
JPGs are considered 'lossy' file types, and every time you save you will add more compression to the image. PNG images are lossless, but are better suited for graphics, texts, or logos where precision clarity is important.
Always start with as high resolution of an image as possible. Keep in mind that the resolution of the image will change as you resize your images. You can keep the quality of an image high even if the resolution of your image changes.
If you’re looking to print your project, check out our Print Quality & Resolution guide, and work with your local printers to help you with the best layout options for your print.