WordPress is pretty good at handling the image files you upload for the web. Other systems, like SquareSpace or Wix, not so much. Wherever you are adding images for the web, these 3 simple tips will help you get the best results.
When in doubt, BIGGER is better
Ideally you should know what dimensions are best for where you are uploading the image. Every website is different, and this will vary for different parts of your website. For instance, a background header image may work best when it’s a short 400px tall, and wide at 2000px. A product image may be best at 600px square. Images that are too big will look better than images that are too small though. So when in doubt, upload the largest file you have and double check how it looks on your website. Two important things to look out for when you upload a large image is 1. Does the cropping look right? 2. Is your website loading an appropriately resized file?
Pick the appropriate file format
You want the best looking image at the smallest file size. Here are some tips on how to decide.
JPGs are still probably the most common format used. JPG files are best for photographs and images with many, shaded colors
GIFs work best for images with limited, flat colors, like a logo or infographic. Animated GIFs are a safe way to introduce simple animations. GIF files are also helpful when you want part of your image file to be transparent.
This full color photo works best as a JPG file
Save this high contrast, 2 color image as a GIF file
PNG is maybe the safest format to use if you’re not sure. PNG files can work well for photos or flat graphics. It’s also possible to have parts of a PNG be transparent.
Unless you specifically want users to download a file in that format do not upload your images as a PDF, TIFF, EPS, DOC or PSD file.
Some other image formats you might find online but don’t need to worry about creating yourself are SVGs and WebPs. SVG files are vector files for the web. Your website might generate WebP image files to increase load speed. Neither format is something you would normally save an image as yourself.
Always Add Alt Tags
I’ve talked about this before because one of the most important things to remember when adding images to your website is to be sure they all have good alt tags. An alt tag is a brief written description of the image for those that may not be able to see it (that includes search engines!). Don’t try to stuff keywords, or your brand name, into alt tags if they don’t directly apply to that image. Viewers (and search engines) will get that information from the web page where the image is found. Just do your best to accurately describe the image as concisely as possible.
The alt tag for this image is ‘Adam Sandler saying “It’s On”‘
There are all sorts of other things to consider when adding images online but I think these are the 3 most important. If you think I left something crucial out, or have a question, please let me know. Thanks for reading and have a great Spring!