So you want to add pictures to your website? Smart move. Humans are visual creatures and we love consume data that looks good. It’s one reason why having a visually pleasing website is important. But how and why? Should they be .png? What about .jpg? Can you just send them to your web guy/gal straight from your camera (phone or otherwise)? Grab your notebook and get ready to take some notes, because we’re going to break it down “barney style” as we used to say in the Army.

Adding pictures to your website.

For websites, images should be less than 100KB to optimize the speed of your website. The speed is important when it comes to the user experience and SEO. They should also be about the size that you may want to display them at on your site.  For example, most computer monitors won’t be above 1920 pixels wide. If you send us a picture that is 2000+ pixels (px) it is way too large and we’ll need to scale it down. If you are displaying team/employee pictures, they should be around 800 x 800 pixels. This size is most commonly used in two column designs and products if you have a Woo Commerce store. If your images displays better landscape or portrait, and not square, then having the longest side be 800 pixels is appropriate for most of our uses.

That being said, having a quality image that’s not fuzzy is important too. There is a balance in making the image small as far as size (kb) and the quality (ppi – pixels per inch, aka as dpi – dots per inch). If all this is foreign to you and you want us to handle image optimization, we are happy to! It just cuts into our design time for your website. So if you feel comfortable scaling down/saving your images to be in this size/format, it helps our team maximize our actual design time for your site. Josh Hall of In Transit Studios has a great tutorial for how to optimize your images for non-techy folks. Give it a watch.

Naming your images/files.

File names are another area where you can help us help you (or your web designer/developer). As much as we like to think we can read minds, we may not understand the context of your image correctly. Your images should be named based on its content. If the image is of one of your employees named Jane Doe, it is helpful to have the image named “J.Doe-Designer”. The “Designer” tells us what her title is in your company so we can add it. By naming your images in a way other than “img.20230315_5693”, it helps saves us all time with unnecessary back and forth emails to gain clarification.

Copyright and giving credit.

Copyright is kind of a big deal in our opinion. We believe in giving credit where credit is due and NOT knowingly committing copyright infringement. If the image was taken by a professional photographer, having the name of the photographer is helpful. We always try to credit the copyright owners in the meta/file data. If requested by the original artist/photographer we will also credit them in the caption of the image so it is publicly displayed and not just hidden in the meta data. This can also look like a watermark. You’ve all seen what this can look like in the images created by Kim for us here on the site. Her signature is embedded in the graphic as well as credit that states if the work is a collaboration between her and Shawna.

Those are the basics of what most people need to know when it comes to adding images to their websites. We could get way more in depth, and we may in the future. Hopefully this helps you understand some of the backend work we have to do if images are not sent ready to “load and go”. Give it a try the next time you get ready to update your website or send some pictures over to your web developer to update your site for you. You will be able to feel the appreciation from your web guy/gal if you do this. Don’t believe me? Try it and see.