The key to great images for your blog + site

They say a picture is worth a thousand words. With that in mind, what are your blog + website images saying to your visitors, fans + potential clients?

tiny blue orange // the key to great web images for your blog + website


The biggest issue I see with images + photos on websites is that the quality is not right for web. Usually it’s because the image quality is so poor, but that isn’t always the case. In fact, you can go too high quality when saving images for your site.

Poor quality images

What happens when you save a picture that is low quality or try to increase the size of a tiny image on your site? You get a horribly pixelated image that doesn’t look good for anyone — especially you. This is why it’s important to find images that are high quality + that show well for everyone.
We all know that devices are just getting nicer + nicer screens that we have to save images for. And as the resolution on these devices rises, the need for higher quality images goes up too.
Without turning this into an advanced web class, I want to explain the math behind web image sizes + how it has changed in the last few years. It used to be that images were saved for web at 72 ppi {pixels per inch}. but the latest retina devices allow for 144 ppi, which is exactly twice as many pixels in every square inch. That means your website images need to be twice as good now in order to look crisp on those new iPhones.
If you don’t have a retina device to look at your site on, save your images for those visiting your site that do have a slick screen. They will appreciate it, I promise.

Too much of a good thing

On the flip-side of poor quality images are the mega files that take forever to load because they are just too much for the purpose they serve. This happens a lot with folks that take their own photos {which is awesome} using a DSLR + drop the image into their sidebar, for example without resizing the original file.
Again, avoiding as much math + complexity as I can, imagine your camera takes a photo at over 3,000 pixels wide. If your sidebar is 250 pixels wide, the biggest file you’d need would be a 500-pixel-wide image for retina screens. That means the original file is 6 times bigger than it needs to be. That super high-quality photo is going to take up server space, bandwidth + slow your site’s load time for your visitors.
As important as it is to have great looking images, make sure you aren’t slowing your site down with mega files. Because if your page takes forever to load, users won’t stick around to see your pretty pictures.

File types

There are so many ways to save your images for web, but the two main ones you’ll want to know are jpg + png.

jpgs — for solid images

If you are saving an image for your site + it is a perfect rectangle or square with no transparent elements where you want the site background to show through, jpg is the file type you want to use. You may see it saved as .jpg or .jpeg, Either is perfectly fine. And if you get the option to set the jpg quality, I’d recommend going for a 10 or higher, when possible.
tiny blue orange // the key to great web images for your blog + website // jpg example
This image is a jpg because this site has a white background + I don’t want this element overlapping anything.

pngs — for transparent images

For those irregular shaped images or elements where you need the background to show through, a png is just right. png files allow for transparent areas, which means the image may be a rectangular shape overall, but it has areas that are see-through which allow for more unique shapes like circles, wavy lines + cut-outs.
tiny blue orange // the key to great web images for your blog + website // png example
Paul’s photo is a png because I wanted the orange background to show around the circular shape. {this can also be done with CSS, but that’s getting super nerdy.}

Image sources

While I love using my camera whenever possible, there are some great online resources for free or well-priced images that save me time + energy.
These are my favorites, in order of how often I use them —

The thing that I love about most of the images on those 3 sites is that they are licensed through creative commons or in a way where it is not required to give credit on the image source. But it is mission critical that you make sure the images you put on your site are either yours to use without giving credit or that they are yours to display as long as you provide a photo credit where the image is placed.
Just like it would break your heart to find your most popular blog post copied word-for-word on a competitor’s site without any reference to you as the original author, photographers take tons of pride in their work. And if they want a link to their site or their name shown as the image taker, you are responsible for doing that in order to use their image. If not, you run the risk of getting a cease + desist letter… or worse. {but I’m not a lawyer, so this isn’t legal advice.}

Long story short: Keep your image quality great without going overboard on the image size + give credit where credit is due. AKA, be a good person.
Looking for some photo inspiration for your next post? Check out my photography board + let the creative juices go!

on your keyboard hit enter to search or esc to close