Picking the right file type
There are a ton of file types out there for images, however, the most common will be JPG, GIF, or PNG. Each has a strength or weakness, and can affect how large of a file size you end up up with.
Before you pick which image type, decide on what you need this for? Is the image a logo or a photo and does it need a transparent background?
Logos are best suited by using either a GIF or PNG as an image type. The bonus of these is that you can set a transparent background. However, GIF only uses a 256 color pallet and you need to pick the surrounding color (which can lead to a halo effect).
PNG is better as it can handle more colors and the transparency is spot on. I almost never use GIF files anymore.
For photos, always choose a JPG for the file type! A PNG will look just as good, however, the file sizes increase dramatically. For example I saved a 1200px X 700px file in photoshop in both formats. The PNG file turned out to be 1.2MB, while the JPG file was only 121K! Now that is an awesome savings!
If you save a file as a JPG, you can also adjust the quality of the photo to save size as well. A safe and good bet is to always choose 60-70% as this will lead to a great image size without sacrificing quality.
If you need to edit, crop or save an image to different sizes, there are a lot of free online image editors out there. Just do a google search for “Free online image editor”. I didn’t spend much time on researching this as I have Adobe Photoshop installed on my computer. However at first glance I think Pixlr (https://pixlr.com)
I think I’ll write a future blog comparing the online editors to find the best 🙂
Scale your images
Making sure your image is the right dimensions can also help with file sizes as well! When picking images, remember that you can always scale an image down, but you will loose quality if you scale it up.
Your typical phone camera even has way too large of photos for the web. For example my iPhone 7 (yes I need to upgrade :), produces images that are 4032px X 3024px. Scaling this down can save a ton of size! If it’s a fullscreen image, I usually can get away by having a width of 1400px.
Rename your images!
After you spent some time on resizing, optimizing and reformatting your images, take some time to name them properly. Google searches though your images as well, so this is very important for SEO.
For example.. if you had an image of a Chicago hotdog, and your image was originally IMG_2453.jpg, name it instead chicago-hotdog.jpg. Now google will index your image with the keywords “Chicago” and “Hotdog”. Don’t put spaces in your image names, instead use hyphens “-” as google will treat those as space.
SEO
Now that your images are properly formatted and you upload them to wordpress, you need to worry about the “Alt text”. Don’t worry about the other fields, unless you are adding captions. The reason the Alt text is important is that it describes your images to the search engines, it shows up if the image is missing, and helps with screen readers.
Now in the example above for renaming the image, I asked you to not use spaces, but replace those wiht hyphens. The reverse is true for the Alt tag. Ie… if your image is of a Chicago hotdog, rename the file to “chicago-hotdog.jpg” but put “Chicago hotdog” in the alt field in WordPress.