Sizing Images for Responsive Pages
When designing your site, it's important to take steps to ensure pages are both readable and aesthetically pleasing at all screen sizes, small and large. In SiteFarm, there are significant limitations to scaling up images to the full width of a container. Images can only be scaled up to 640×480 or 1280×720 dimensions, which is often not large enough (exact dimension options here). In general, this means bigger images are necessary to avoid these issues. However, one major constraint of SiteFarm's media library is its 4MB file size limit. This article will explain how to size images for your pages while staying within size limits.
The most common desktop screen size is 1366×768 (1366 pixels wide and 768 pixels high), followed by 1920×1080. Together, these two screen sizes account for almost half of all computer users. While still not widely used, a screen size becoming more common is the 4K screen, 2560×1440. This means your site should be configured to look good on screen widths up to at least 1920 pixels, and if possible, 2560 pixels.
You will often want to add images that take up the full width of a container on your page. For example, the image below extends from the far left of this article to the far right of this article.
Image Widths Guide
Below are some common site layouts, and the minimum image widths you should have to ensure the image fills up the full width of the container.
The yellow boxes are widths for images within column layouts in the WYSIWYG editor. These values may vary depending on your column layout settings, such as setting wider or narrower gaps between columns. The sizes listed below are for the default settings.
The sidebar widths assume images are contained in a basic block, though images are supported in other block types as well. The suggested values on this page should get you in the ballpark of the width you need, regardless of what block you use.
Full Width Page
- Main Content
- For a 1920px wide screen, your image should be at least 1700px wide.
- For a 2560px wide screen, your image should be at least 2270px wide.
Single Sidebar Page
- Main Content
- For a 1920px wide screen, your image should be at least 1110px wide.
- For a 2560px wide screen, your image should be at least 1490px wide.
- For a 1920px wide screen, your image should be at least 525px wide.
- For a 2560px wide screen, your image should be at least 710px wide.
Double Sidebar Page
- Main Content
- For a 1920px wide screen, your image should be at least 685px wide.
- For a 2560px wide screen, your image should be at least 925px wide.
- First and Second Sidebars
- For a 1920px wide screen, your image should be at least 445px wide.
- For a 2560px wide screen, your image should be at least 605px wide.
Resizing and Compressing Images
Ideally, you should have a high-quality image that is already at or above the necessary widths. If this is not the case, you can still scale your image up by following the steps in our How to Resize Images guide.
Often times, large images mean large file sizes. If your image is larger than 4MB, you'll need to compress the image before uploading. One free, online option is Optimizilla. Large images can often be reduced in size 75% or more with minimal loss in quality. To compress an image, follow the following steps:
- Visit Optimizilla.
- Upload the image you want to compress by clicking "Upload Files" or dragging and dropping the file onto the page.
- Wait for the upload and compressing to complete.
- Click download and then upload the image to SiteFarm as usual.