The Late Crew Creative Blog

Picture perfect? A crash course on images for your website

Ryan Thompson
Tuesday, June 11, 2019

It’s no secret…a picture is worth a thousand words. Imagery makes…or breaks…a website so it is important to have your pictures formatted correctly. Below are answers to common image related questions I’ve fielded from clients over the years.

What’s the best format for website images?
My go-to formats are JPG and PNG. There is an encyclopedia’s worth of content on the web describing the difference between these two formats, but I’ll keep it brief. In almost every instance JPG is your best option on a website. JPGs are smaller files and take less time to “load.” Fast loading pages are loved by everyone from your grandma to Google. When do PNGs come into play? These come in handy when you need to have an image on top of a colored background as PNGs allow for transparency. PNGs also have better image quality, but I’ve found the bump in quality isn’t work the file size penalty.

How should I size my website’s pictures?
Learning how to best size images for a website requires some knowledge of aspect ratio, which has a definition that brings back bad memories from geometry class for me. As described by Tech Terms, an aspect ratio describes the relationship of an object’s width to its height. Common ratios are 16:9 and 4:3. Using these ratios, I usually set my images to 150 dpi, which is high enough to account for almost any device/screen. For images that are full screen, I crop the images to 1920 pixels wide. The folks behind my favorite WordPress theme (Divi) have developed a great guide to simplify the use of aspect ratios. You can see it here. Even if you don’t use Divi, if your website’s content area is 1080 px wide, the recommended dimensions should still work.

What programs (apps) allow me to resize photos?
If you’re using WordPress, there is some built in ability to resize photos right in the platform itself. For more options, I recommend using a separate program. The gold standard is Adobe Photoshop and it’s available as a subscription for $10 per month. While resizing and cropping photos is barely scratching the service in terms of what this powerful program can do, it makes this important task easy. It also has a slick export for web feature that creates perfectly formatted pictures for your site. For those looking for a free option to resize images, Gimp is a good alternative. It’s a funny name, but the price is right. Check it out here.

Do you have questions about formatting images or any other questions about your website? I’m happy to visit. Contact me at 402-677-6880 or shoot me an email. I look forward to hearing from you.