Utilizing images within content is a great way to add visual interest on the page. It can break up blocks of content and make a web page easier to scan. If your images are not optimized for the web it can actually have a negative effect on your page.
Why Optimized Images
The most important reason to optimize images before placing them on a website is because of the download speed. If an image file size is large, it will take longer for that image to download. If there are a lot of images on a website the speed concern gets larger.
Do Images Have to Be Small?
Most people think that in order to optimize an image and to have a smaller file size, the physical dimensions of the image have to be smaller. That is not true. An image can be large (example: 1000px wide) and still have a smaller file size. Take a look at the example below. These images are the same dimensions but the one on the right is optimized for the web and has a smaller file size.
How to Optimize an Image Using Photoshop
Since it is clear now the importance of optimizing an image for your website, you are probably asking: how do I optimize an image? Within Photoshop there is a “Save for Web” option that allows you to adjust an image to a lower file size but still maintain most of the quality. Once you have determined the image size you can check the “Optimized” option.
How to Optimize Without Photoshop
While it would be great if we all had Photoshop, the reality is most people do not. Don’t worry, there are still a number of online tools you can use for image editing. Here are a few tools you can try:
Tips for Optimizing Images
When you begin to optimize images for the web, here are couple tips to keep in mind.
- Reduce by half: If your original image is 2000px wide and you want to get to 500px, make sure to only decrease the image by half at a time. So, go from 2000px to 1000px then to 500px. This will help you get the best possible quality.
- 72 DPI: When you optimize images for the web, use a resolution of 72 DPI. A larger DPI is good for print, but 72 is best for the web
- Alt Tags: After you have the image to the size you want, make sure to add alt tags when placing the images. This will help from a search engine perspective and make it accessible for screen readers.
If you need assistance optimizing your images for the web, please feel free to contact Informatics.
