If your image has areas of sky (or areas that have a wide area that is the same colour) or thin lines (such as power lines) crossing a neutral background, check these carefully as they are often the first places you’ll notice pixelation. Look out for any ‘jaggies’ (pixelated areas). To check you haven’t over-optimised your images, open your original image and the optimised image and view them side by side. You can drop 2-3Mb images to 80kb-120kb and not really be able to see any change in visible quality. half the width of a blog post), then 20Kb-30Kb is usually fine.ĭropping image quality to 30-50% of the original usually doesn’t make any difference you can pick with the naked eye. If the image is only part of a page (e.g.
Images with a large file size take longer to download to a visitors browser and slow down your website.įor most ‘full page’ web images, you want the image to be 80Kb-100Kb at most. This is the most important part of preparing an image for your website. These default file sizes in WordPress can be changed under Dashboard, Settings, Media.
You can therefore always choose to use your full size image, or the Medium or Thumbnail. When you upload an image, WordPress not only uploads the original image, it automatically creates three resized images for you: Your WordPress theme normally ensures that larger images will be automatically resized downwards to fit them in the monitor resolution of each visitor. If you are planning on displaying images in full screen mode (such as the wide image shown above), you might want to plan for your full size images to be 1,280px, 1,920px or even wider. On a Mac, you can view directly in the Finder:įrom this information panel you can see the image file (grapes-file-information.png) is 2,000 px wide by 501px high, and is 120KB Dimensions – Physical sizeįor most websites, make sure your file is no wider than the width of your webpage.
To see how big your image files are, use Windows Explorer or the Mac Finder and inspect the file. Nobody wants tiny, grainy images on a website, and it isn’t necessary. Preparing images involves reducing the physical size and file size, while still leaving the images looking good. As you can see from the examples above, your choices are pretty wide. These problems can be avoided if you prepare your images to ensure the dimensions are no larger than required, and the file sizes are reasonable for your purposes. 4,000 px wide is not uncommon, and the file size can be from 4Mb to 10Mb and beyond.Ĭlearly these images are far wider than most monitors can display, and the ‘weight’ would cause delays while the large files download. Images from digital cameras or from stock photo libraries can be very large, both in dimensions and ‘weight’. Make sure you maximise your browser before you click the thumbnail:ģ60 px wide Grapes – click to see 2,000 px wide Grapes! For about 92% of you, it will have to shrink down to fit your monitor. If you use 2,560px wide, you’ll be able to display on large iMac displays at full width.Ĭlick the thumbnail for this next image and you’ll be looking at a 2,000px wide image that ‘weighs’ 120Kb. If you want to fill the browser width for 84% of visitors, 1,366px wide will get there. Any larger and the image will be squeezed down in width anyway. So statistically, if you size your images to 1280 px wide, in 93% of cases the images will be large enough to fill your visitor’s browser. Here are some statistics on minimum screen widths as at Jan 2017 (see for latest information): However you might target wider monitors, depending on your audience. Sizing your images to 1,280 px wide is a good target for many websites. Click on the thumbnail image to see the larger version in a lightbox – you’ll see the 800 px wide version which ‘weighs’ 80KB.ģ60px wide Grapes – click to see 800px version.The thumbnail image you see below is 360 pixels (px) wide and 240 px high and ‘weighs’ 20KB.You can think of these as size and ‘weight’ if you like. file size (Kilobytes KB or Megabytes MB).file dimensions (width and height, in pixels) and.
This article explains the two factors that control how big your image files are and provides links to some free / low cost tools you can use to optimise your images.
The solution is to learn how to optimise (trim images down to size) before you upload them. If you upload very large images to your website, your website will slow down when those images are viewed by your visitors. Preparing Image Files Before Uploading with WordPress Summary