Upload or replace an image
We host images through github. One of the benefits of this approach is it gives us a version history if the image changes over time.
- Optimize the image using an image optimizer like Squoosh.
a. Smaller images load more easily on lower-performance devices. This is part of our commitment to accessibility.
- Give the image a descriptive name so you it’s easy to find. Use hyphens between words.
a. For example, if the image is a .jpg file of a woman wearing the mask, use the name woman-wearing-mask.jpg.
- If you’re uploading a new version of an image:
a. Find the current version of your image on the live site. Find a difference between the current version and the one you’re uploading so you can confirm the new version uploads.
b. Rename the updated image so it’s the same as the existing image. The name must be identical.
- Go to https://github.com/cagov/covid-static/tree/master/img.
a. In the upper-right corner, select the Add file button.
b. Select Upload files from the dropdown menu.
c. Upload your file by dragging it into the Drag files here to add them to your repository box or selecting choose your files and using the popup window.
d. In the Commit changes section, enter brief details (less than 50 characters) about what you’re doing in the first line that contains the placeholder text Add files via upload. This information will be available in the Github history and #code-movement on Slack to identify what changes happened.
e. If you have additional details to add, use the larger box with the placeholder text Add an optional extended description.
f. Select the green Commit changes button to upload the image.
h. To track the status of the upload, select Actions in the menu at the top of the page. The text added in the Add files via upload line from the Commit changes section will be listed here. When a green check mark appears to the left of this text, the image has been uploaded.
- Once the upload is finished, the file will be available at the URL files.covid19.ca.gov/img/ followed by the file name. There may be a brief delay.
- If you updated an image, return to the live page and confirm the updated image is showing.
a. It usually takes around 1 minute for image to push to the live site.
b. If it doesn’t come up, confirm in #code-movement that the image went through. If it did, check the filename of the image was the same.
If you have an image with text in different languages, you can upload it so it’s displayed automatically on a translated version of the page. Use the same language-specific suffix that is used for PDFs (for example, –es for Spanish). If there is not a language-specific image, the site will default to the English version.
Use the regular upload process to add your translated image with the appropriate suffix.