It's considered best practice to keep image files for your website below 100 kilobytes. And, of course, the lower the file size, the better. But depending on an image's purpose, you might want to make some compromises.
If you have a prominent image or gallery pictures where visual quality should be high to show off the subject matter, then it may be worth a slightly higher file size. These kinds of pictures will probably often fare best in the JPEG format, so be especially careful to go easy on quality compression. Most image editing software will give you an option to set a percentage of quality compression when you save an image as a JPEG. Some will even give you a preview window so that you can see if you're losing too much quality as you adjust the compression percentage. Since the image below is of picturesque scenery, it would be ruined if low quality affected its vibrancy.
For smaller images or less vital images, especially if a large number of them are needed, the quality can be on the lower side. Also, try to limit the dimensions to what you need.
This approach is also great when including thumbnails. Thumbnail images are smaller or cropped versions of a larger image. Typically, hyperlinks are added to a thumbnail so that, when clicked, the user can view the full-sized, higher-quality image. Click on the thumbnail of the bee to see the full sized version of the image.
Keeping less important image file sizes as low as possible can help keep loading times down. Even with small files, the data can really add up if there are enough of them!
Last but not least, try to avoid images with a lot of text in them. It may be tempting since it may seem easier to make it fancy or visually striking. However, screen readers can't read text in image form (unless it's all written out in the alt attribute), and it's much harder to make edits like fixing typos. Here are some examples of text based images that would work better as HTML text elements.
You Try!
Open your text editor and play around with different image file types, image sizes, and attributes. Below is a zip file that contains several sample images.
You can download this file and use these images or find your own! Create your own root directory that contains an index.html file and an image folder that will contain practice images.
If you don't have access to images on the computer you are using or you are unable to download the practice images file, you can search for different images on the web and create absolute links to use them for practice. Once you find an image on the web you would like to practice with, you can right click on the image with your mouse and select “copy image link” to retrieve the direct link to the image online for use as an absolute link.
Important to Note: Using images from the web in a live site may violates copyright laws, but using them for practice on your local computer is perfectly acceptable. We will take a deeper look into copyright in the next lesson.
