To get the optimum performance, we have some guidelines on your media files size. Each theme has different design, therefore you have to adjust your media files size to the optimum size. Some issues that might occurs if you upload wrong size media files:
- Slow performance. Uploading big media files size (e.g. larger than 1MB / image) could cause slow loading performance on your website.
- Images blurred. In some elements (e.g. background) you need to upload a "large" size (not too large though), otherwise your images won't look sharp or blurred.
Those issues above are NOT considered as a theme's issue. Uploading the wrong size of media files doesn't mean the theme is "bad designed", or "slow". Please follow these guidelines below:
Breakpoints used in the responsive design:
- Desktop
screen width: 1200px and above
wrapper width: fixed 1080px - Small desktop
screen width: 1024px up to 1199px
wrapper width: fixed 970px - Tablet
screen width: 768px up to 1023px
wrapper width: fixed 730px - Mobile (landscape)
screen width: 520px up to 767px
wrapper width: fixed 480px - Mobile (portrait)
screen width: 519px and below
wrapper width: fluid (auto)
Recommended image size
- Hero Slider image: works as a background (some part of the image might get cropped due to responsiveness), recommended size: 1600px OR 1440px width, the height could vary depends on your needs.
- Row (section) background image: recommended size: 1600px OR 1440px width.
- Blog post featured image: recommended size: 1080px width.
- Product images: recommended size: 1080px width.
Recommended video size
If you are using video background for your hero section, you need to convert your videos into 3 formats: mp4, ogv (or ogg), webm. These 3 formats are recommended since some browsers has their own video support preferences. Each format should have same filename. e.g.:
- http://domain.com/wp-content/uploads/2015/11/hero-video.mp4
- http://domain.com/wp-content/uploads/2015/11/hero-video.webm
- http://domain.com/wp-content/uploads/2015/11/hero-video.ogv
It is also recommended to keep your file sizes at the optimal minimum size, so it's bandwidth friendly. you can try change the frame width/height, lower the bitrate, etc.