What size image should i use for website

Using the methods described above, you can determine the actual width of the content area by measuring any paragraph of text, for example:. Alternatively, you could use a browser extension like View Image Info properties to get that same info:. Armed with that knowledge pixels in this example , you can now double that size to take into account retina screens so pixels in width here.

Depending on your specific site theme, and your image theft risk-tolerance :- , you can lower that number down to a more reasonable pixels on the longest edge so px in width for horizontal images, or px in height for vertical ones, maintaining their original aspect ratio of course.

Which leads us to the second most important aspect…. Choosing something like 60 or 70 gives you good-enough quality for much smaller file sizes sometimes you can see a reduction in file size without any perceived quality loss. But between and , the quality difference is unnoticeable, while the difference in image file size is enormous. Most photographers will know that images with gradients pose a big problem here walls, skies, background colors.

And always save JPG images in the sRGB color profile, which is what most browsers understand, to avoid any image color integrity issues. Besides your photographic work, your website likely contains various other graphical elements: logos, small icons, banners, separators, video thumbnails, etc. Instead of using JPG, any graphics that contain areas of solid color created by you in Photoshop or other tools online could be better saved in other lossless file formats with absolutely no perceived visual differences.

Simple image format decision tree source. Without relying on a pixel-grid, SVG files have the great benefit of being infinitely scalable without any loss in quality. You have to test this out yourself, on a per-image basis. But like I said, this only holds true for graphics with solid colors. Whenever you try this same experiment with a regular photo taken with your camera , JPG usually wins by a lot. Even if you correctly set the right pixel dimensions and compression levels when exporting your images using Photoshop or Lightroom, for example , the following tools can take image optimization to the next level.

Lightroom are already down to their lowest acceptable compression visually, I found using plugin reduces file size but also reduces the noticeable visual quality. But even when going for a lossless compression type, where the results are pixel-identical to your original images, these tools can reduce file sizes as much as possible, along with many other useful features that help make your website faster.

It comes down to personal preference: choose the compression level that best suits your workflow and your goals for the website. Image optimization is both an art and a science: an art because there is no one definitive answer for how to best compress an individual image, and a science because there are well-developed techniques and algorithms that can help significantly reduce the size of an image. There are a bunch of great plugins that do a lot of work for you, automatically.

They take every image you upload and then compress it to optimize the file size. A free account with them gives you a decent monthly quota, and you can get a premium plan to allow optimizing many more images per month if you need to. You can also pay a one-time fee to get a bunch of one-time image optimization credits useful when using their bulk optimizer to go through your existing Media Library.

In this case, make sure you properly configure the plugin settings to only choose the thumbnail sizes that matter to your site. Otherwise, those one-time set of credits will go by really fast. Then regenerate all past thumbnails , and then, finally, do a bulk optimization of your entire Media Library.

Website care plans. Alternatively, a nifty little tool that can quickly analyze and compress your already-published photos is Image Optimization Tool by WebsiteToolTester , the process is quite simple:. Click to download the optimized images as a ZIP archive that you can replace the old images with.

Before diving into image-specific testing tools, know that you can gain a lot of insights from these two popular website speed testing tools: Google PageSpeed Insights and GTmetrix.

The page intentionally does a lot of things wrong in order to highlight its problems in testing tools:. The Google PageSpeed Insights report outlines some important performance opportunities that you might encounter on your own site:. While the browser is responsible for resizing the image to fit its container, it still has to download the full file from the server, taking up more time and bandwidth.

That means that images should only be sized as large as needed by your page layout see part 1 of this guide. Loading all the other ones lower down the image can be delayed until other critical site resources have finished loading. Fixing this issue is relatively simple. Just use an image optimization plugin that supports the lazy loading feature:. But your JPG-based photo capture and upload workflow will likely stay the same for a few years to come, especially since WebP browser support is not yet that good.

But what you can do is use a plugin that can generate WebP images and then automatically deliver them to compatible browsers:. Google determined that your image file sizes could be smaller, even with a pixel-perfect lossless compression. That means that your current images are not optimized to the max. But the basic principles of making a website fast remain the same. You can see that GTmetrix identified the right size at which those images were being displayed on the page.

Make sure your photos are correctly sized based on your page usage see part 1 of this article. Alternatively, you can use this great new performance tool: Page Weight by imgIX.

However you might target wider monitors, depending on your audience. Here are some statistics on minimum screen widths as at Jan see w3schools. Any larger and the image will be squeezed down in width anyway. If you use 2,px wide, you'll be able to display on large iMac displays at full width. Click the thumbnail for this next image and you'll be looking at a 2,px wide image that 'weighs' Kb. Images from digital cameras or from stock photo libraries can be very large, both in dimensions and 'weight'.

Clearly these images are far wider than most monitors can display, and the 'weight' would cause delays while the large files download. 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.

As you can see from the examples above, your choices are pretty wide. Preparing images involves reducing the physical size and file size, while still leaving the images looking good. Nobody wants tiny, grainy images on a website, and it isn't necessary.

To see how big your image files are, use Windows Explorer or the Mac Finder and inspect the file. On a Mac, you can view directly in the Finder:. From this information panel you can see the image file grapes-file-information. 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,px, 1,px or even wider. Your WordPress theme normally ensures that larger images will be automatically resized downwards to fit them in the monitor resolution of each visitor.

When you upload an image, WordPress not only uploads the original image, it automatically creates three resized images for you:. This is the most important part of preparing an image for your website. Images with a large file size take longer to download to a visitors browser and slow down your website.

For most 'full page' web images, you want the image to be 80KbKb at most. If the image is only part of a page e. Try it and see. Rules for Saving Images: Make sure you have saved a copy of the original image, so that you can come back and edit it again later if needed. This may be a different format such as,. However, most image editing tools allow you to select the file compression for. Try saving larger images under several compression settings and then test them for quality rendering and load times.

Balancing quality, compression, and load times can be a judgment call depending on the particular image and the web document it appears in. Images should be saved to the exact size you want them to be viewed on the web. Taking a large image and having it display at a smaller size not only slows down loading times but also distorts your image.

Final web images should be saved same size at 72 pixels per inch resolution. An ALT tag should be used for each picture. Not only does this make your website more accessible for the blind, but many search engines index these tags as well.