Ready, Set, Go!
Every image for web starts with using your handy dandy Adobe Photoshop program. This will allow you more flexibility and control of reducing the size of your desired image and having the ability to use keyboard shortcuts.
Following a few simple steps will help you master the perfect image for your website. Let’s start with a few things you should keep in mind.
- You can skip this step if you know how to import your image into Photoshop. Start by importing your image into Photoshop. You can do this by navigating to the top left hand corner and selecting File –> Open –> Choose your image for import or by simply dragging your image over the Adobe Photoshop icon on your desktop/laptop which will automatically open your file.
- Once your image has been imported we can start formatting for any web platform. You will need to select specific options that will enable the save for web functionality through Photoshop. You can do this by selecting File –> Export –> Save For Web (Legacy) or by using keyboard shortcuts Command + Option + Shift + S (Mac) and Ctrl + Alt + Shift + S (Windows).
- From the pop up window within Photoshop you can make various adjustments to your image. To change your file extension for web you can do this in the upper right hand corner within the dropdown field directly below Preset. You can choose from a GIF, JPEG, PNG-8, PNG-24, and WBMP depending on your web needs. The quality of your image can also be changed from the dropdown field below the file extension from high to low. You also adjust this manually in the Quality window. This adjusts the image quality with the resolution output.
- To truly condense your image proportions you will want to utilize the Image Size option towards the bottom of the panel. By inputting a smaller width and height this will allow your image to condense to a smaller size, allowing a faster load time on your site. Tip: The link to the right of the image dimensions (the icon that looks similar to a chain link) allows the image to be proportionally resized if you change the width or height. If this link is broken you have the ability to manually enter your own dimensions without one affecting the other. You can also automatically resize your image by changing the percentage to the right.
- Once you have set up your dimensions, percentages, and file extension, the bottom left hand corner will display the details of the image you’re ready to export. A good image will be in the middle to low range of kilobytes depending on the original size of your image. When you have followed all of the steps above you can save your image to your designated area.
- Repeat your process as needed per photo. You can even create a Photoshop action if you’re saving multiple images for web.
Congratulations you have successfully saved an image for web use!