For pictures on your pages, use JPEG for photos, PNG for logos and graphics (especially with a transparent background), GIF for small animations, SVG for logos and icons that must stay sharp at any size, and WebP if you already have it. Convert iPhone photos (HEIC) and print files (EPS, AI, PSD, TIFF) to JPEG or PNG before you add them. PDFs and other documents go in as files that visitors open or download from a link.
Picture types at a glance
| Type | Use it for | What EverWeb does |
|---|---|---|
| JPEG (.jpg, .jpeg) | Photos | Publishes it as a JPEG |
| PNG (.png) | Logos, screenshots, graphics with a transparent background | Publishes it as a PNG |
| GIF (.gif) | Small animations | Publishes it unchanged, so animations keep playing |
| SVG (.svg) | Logos and icons | Publishes the original file, sharp at any size (see below) |
| WebP (.webp) | Photos and graphics, smaller files | Publishes it as WebP |
| HEIC (.heic, iPhone photos) | Convert to JPEG first | May not open on Windows. See below |
| TIFF, PSD | Convert first, or let EverWeb do it | Asks whether to convert it to a web format |
| EPS, AI | Print formats: export as SVG or PNG from your design app | EPS goes to External Files and doesn't show on the page |
To add a picture, drag it from Finder or File Explorer onto your page or into the Assets list. Or choose Insert > Image, then pick the picture in Inspector > Shape Options.
iPhone photos (HEIC)
iPhones save photos as HEIC unless you've changed the camera setting. Turn them into JPEGs before you add them to EverWeb, so they look the same in every browser:
- Mac: open the photo in Preview, choose File > Export..., set Format to JPEG and click Save.
- Windows: open the photo in your photo app and save a copy as JPEG. Windows may need an extra extension from Microsoft to open HEIC files at all.
- On the iPhone: Settings > Camera > Formats > Most Compatible saves new photos as JPEG.
While you're at it, make the photo smaller. A photo straight from a phone is often 3 to 10MB; aim for under 500KB. See Make your website load faster.
SVG logos and icons
You can add an SVG as a picture, like a PNG. It stays sharp at any size and is usually a small file.
If EverWeb says The picture file ... could not be opened. and offers to add it as an external file, or the SVG lands in External Files instead of Images, the file is usually one of these:
- It has text in it. In your design app (such as Illustrator, Affinity Designer or Inkscape), convert the text to outlines (shapes), then export the SVG again.
- It has no size. Export it again with a width and height set.
If it still won't open, export a PNG at twice the size you need, or paste the SVG's code into an HTML Snippet widget.
Print files: EPS, AI, PSD and TIFF
These are made for printing or editing.
- EPS and AI: browsers can't show them. Ask your designer for an SVG or PNG version, or export one from the app that made it.
- PSD and TIFF: EverWeb asks Would you like to convert this image to a web format? Click Convert to Web Resolution to make a JPEG (or a PNG if the picture has a transparent background). Tick Apply to all picture files if you're adding several. Choose Add to External Files only if you want visitors to download the original file.
PDFs and other files
A PDF, Word document, ZIP file or audio file goes into External Files in the Assets list. To let visitors open or download it, link to it: see How do I link to a PDF so visitors can open or download it?. If you drag a PDF onto the page, choose Add to External Files when EverWeb asks, so it stays a PDF you can link to.
Favicon and smaller files
- Favicon (the little icon in the browser tab): choose a square picture, such as a PNG, under Favicon in File > Edit Publishing Settings. See Can I add a Favicon to my site in EverWeb?.
- Export Optimized Images, in the same window, also saves your JPEG and PNG pictures as WebP when you publish, and browsers that can show WebP use these smaller files. SVG and GIF files are left as they are.