Best practices for images on your website
How and why to make sure your images always look their best
There are certain steps you can take to have your images always looking their best - “optimizing” the content you place on your website to ensure quick loading time and make it easy for search engines is always worth it.
As a general rule, you should always have a high quality image to begin with (ideally shot with a proper camera as opposed to a mobile phone and the original file size should be 2-3 times bigger than what you actually need).
Those images can come from professional photographers you hire yourself or from (free or paid) stock websites.
Photographs should be saved as JPG files, since that ensures you don’t end up with a huge file. Always save JPG files in a sRGB color profile.
Graphics should be saved as PNGs, especially if they have a lot of areas of flat color (this generally includes logos, infographics, etc.).
Saving the images in this manner ensures your graphics to always have crisp lines and your photos to not slow down your website.
On optimal file sizes
It’s important to remember that the higher the resolution of an image, the larger the file size you end up with. Large file sizes slow down your website and hurt your user experience (just ask any mobile visitor about slow loading pages!).
Strictly speaking, “size” here is a relative term, mostly depending on what you want the photo to achieve and where you want to place it. Fortunately, there are some general tips to follow.
Any file that’s 1MB or higher is from the start too big. It’s much better to have one that’s, let’s say,
100KB in size. Most web graphics can be up to 300KB or less. Photos ideally go to 350KB.
The dimensions of your image in pixels can vary, depending on how you’ll be using it. If you’re using a full-screen background, files that are 2000px to 2560px wide are optimal.
Since most monitors display 72dpi or 92dpi, you can save your images as such as well. 300dpi is usually reserved for print.
Keep in mind that while large images can (and should) be made smaller, already small images will in most cases look pixelated if they’re made bigger. Avoid doing that at all costs.
On image consistency
On SEO, captions and alternative text
Properly naming your images (“Cute-Cat.jpg”) will not only make sure that you manage your files better, but will also help your SEO.
Other tips include using hyphens rather than underscores, using lowercase letters or making sure that all words start with a capital letter and using numbers from 0 to 9 (“cute-cat-2.jpg”).
Captions and alt tags/alternative text are important parts for accessibility and should not be overlooked. They’re not visible to most of your visitors, but again help search engines… and most important of all, help visitors that use screen readers. Make sure your alt tags are descriptive enough. Accessibility is cool.
Logo - in header
For full-width images 2560px in width, and any height you prefer (depending on whether you want to keep the original aspect ratio of your photos or go for a more panoramic crop).
Smaller images that use up only part of the hero space - adjust the required image size accordingly (maybe 2000px, or 1800px, etc.). For sections made specifically for mobile phones, images can be from 350px to 500px.
General image size
Content images can have a width of 1500px if horizontal, or 1000px if vertical.
It’s worth noting that there are options to make your images retina ready, in which case you should save your image twice as big as it will be displayed in the end. For example, if you want your image to be displayed as 500x500px, save it as 1000x1000px and it will be both retina display and normal display ready.
In the end, choose the image size best suited for your purpose.
Before being uploaded to your website, all images should be optimized. That can be done in Adobe Photoshop or Illustrator (“save for web”), any other image editing program of your choice or with online compression tools (e.g. plugins).
Some good plugins are:
Smush Image Compression and Optimization
Some good web options are:
ShortPixel (web version of the plugin)
Imagify (web version of the plugin)
Choose the tools that fit you best.
When it comes to the sizes of your images, there are no absolute sizes your images should be under any circumstance.
It’s good to know the standard aspect ratios for images (1:1, 5:4, 4:3, 3:2, 16:9, 3:1) so that you can make your photos conform a certain industry standard (and, interestingly enough, the 16:9 ratio is used in smartphones!). Keeping that in mind, your images will automatically form a cohesive unit and will make your website all the more beautiful for it.
After you’ve decided on the ratio of your image and the final size of the longer side of your image, the editing tool of your choice will do the rest of the size calculating work for you.
Once that’s done, all you have to do is properly save your image and upload it to your website for the world to see and admire.
Additional image tips and tricks
Choose images that fit your subject and the tone of your website well. Images and text should always complement each other.
When deciding on images that are supposed to be used as backgrounds for copy (like in the hero area), try to choose images that aren’t too busy and have consistent colors or textures where you plan on placing your text. Adding a subtle color overlay or color gradient over them (lighter or darker, depending on the color of your text) will also make the copy much easier to read.
Try to make sure your images are as consistent in their color palettes as possible.
The subject of your photos (person, product, service, etc.) should be the focal point of your image. Anything that distracts from your subject should be cropped out.
Don’t be afraid to give the images space to breathe by leaving white space around them. That minimal look is currently en vogue!
Never just take photos you found during a quick Google search - copyright laws are a thing and that can land you in hot water. Always make sure you either use your own photos, ones you yourself commissioned from a photographer or do a search through real stock websites.