When I sat down to write about my Shiba Inu SVGs, it became clear that I was writing two blogs. One, a tutorial for SVGs in React, and this one, demystifying sourcing images for your website. Here are the topics this article will cover:
- Image Types
- Image Optimization for the Web
- SVGs for Your Site
- PNGs and JPEGs for Your Site
- HTML and CSS to Take Your Images to the Next Level
- Conclusion
Image Types
I enjoy making logos and other graphics for my apps, and I use Adobe Illustrator, a vector-editing tool, to do it. Vector images are made using mathematical formulas and code. When I create one in Illustrator, I save it as an .svg file.
SVGs in a .svg file work just like a coded <svg>. In contrast, JPEGs (.jpg) and PNGs (.png) are raster images, made with static pixels. Vector images can scale up and down without pixelating (looking grainy and blurry), while raster images are limited by the number of pixels saved in the image. You can save an .svg file as a .jpg or .png file of any size.
At this point, you might be thinking, why would I use anything other than SVGs? Each image format has its pros and cons to consider when using them in a site.
JPEG stands for Joint Photographic Experts Group, which is the committee that made the JPEG format. Back when file extensions were limited to 3 letters, they chose .jpg. JPEGs are great for color and photography. It's easy to keep their file sizes small and they are basically universally supported in browsers and email clients. They don't support transparency or animation and text images form jagged edges. They support descriptive metadata, which is good for accessibility.
JPEGs can be compressed in a lossy or lossless fashion. They are typically used to take a huge RAW photograph with lots of pixels and compress them in a lossy fashion that still looks lossless to the naked eye. As a result, just re-saving a JPEG file is lossy compression and you will use quality.
PNGs, on the other hand, use lossless compression. They support transparency and are good for images with text and logos because they don't form jagged edges. Using PNG-8, with a limited color palette, is usually lightweight and ideal for web graphics. They also support descriptive metadata.
PNGs do not support animation. Older email clients can have trouble with them. Their file size grows quickly with the complexity of the image. PNG-24 has unlimited colors and their file size gets bigger than you usually want for the web.
GIFs are the precursor to PNGs and they are not ideal for the web due to their large file size. They are only recommended if you need them for the animation. They use lossless compression and support descriptive metadata, but do not support transparency and are limited to 256 colors.
SVGs are lightweight, use lossless compression, and can use unlimited colors. They're easy to resize and support transparency and animation.
SVGs have limited support in degraded browsers and email clients. To add descriptive metadata, you'd have to use a <metadata>. Furthermore, making them can get complicated - the more complex your lines, the more likely it is the lines will form jagged edges when scaled up or down. Plus, they're often treated differently than raster images in code. My Adding Shiba Inu Loading and Error SVGs to My React Site example details the 4 different ways you could import an SVG into a React app.
Image Optimization for the Web
After you've picked a file type for your use case, you'll still need to optimize your image for the web. If you're creating your images, that starts with working in RGB color mode and checking that your colors are accessible. When you save your file, give it a name with keywords in it for SEO.
Before adding your image file to your site repo, you'll want to compress it. If you're creating your image, there will be settings in your tool when you go to save. If you've got a saved image that needs compressing, you can use tools like Photoshop, Photopea, Gimp, tinyjpg, compressor or the Mac utility ImageOptim.
Finally, after compressing, you'll want to look at your code/site design. What's the maximum size you'll want that image to appear on the screen? Resize the photo to match that. No need to send a giant photo to your user's browser if you're only going to show it at a quarter that size. Mac and Windows' default photo editor tools both have a resize option that will scale your image for you. Sometimes, you'll want to crop instead of resizing (e.g. banners and cover images).
SVGs for Your Site
Free to Use SVGs
My portfolio site includes SVGs from my two favorite sources - DevIcon for your skills, languages, and technologies section and HOLA SVG for SVGs in basic shapes and their demos and tutorials. Another excellent resource is heroicons. You can also use icon libraries like Font Awesome and Bootstrap Icons. Check out undraw for illustrations.
Coding SVGs
You don't have to start from scratch - the turning arrow on my landing page was a caret from HOLA SVG to which I added a <line>.
However, if you even remotely like math, geometry, or playing around with x and y coordinates, I recommend working through a tutorial. Essentially, coding an SVG starts with an <svg> with some basic properties like width and height. The viewbox property takes 4 coordinate parameters to form a box that is the actual size of your SVG. The width and height properties will only affect the size of your <svg>'s children elements. The children elements are things like <line>, <circle>, and <polygon> that take different parameters to create different shapes.
Using a Vector-Editor
I've been making SVGs in Illustrator for about 11 years now, so I prefer using a vector-editor over coding an <svg>. I don't think Illustrator is the end all be all of vector-editing tools, but it's the tool with which I'm most familiar. (Still, I have to relearn a lot every time I use it.) There are a number of alternatives, some of which are free.
Essentially, I start by getting a working outline of my idea. In Illustrator, I draw a line using the brush tool with the smoothing feature enabled. Illustrator turns that line into a path with a series of anchor points. Each anchor point has handles. I can move the anchor points within the path individually so that my line looks how I want. I can adjust the handles to get the line curving just right. Ideally, the image will be simple enough that the anchor point at the end of each path will touch an anchor point on the end of another path. If these two anchor points are touching, I can right click and join them and fill the lines I've made with color (just like MS Paint). The result looks something like this:
For an actual Adobe Illustrator tutorial, check out a getting started video or Adobe's free course for beginners.
The Shiba Inu SVGs in this example were not that simple. After getting the lines done, there were only a few I could fill. I ended up making a new layer and setting it to sit behind my lines. Then I copied and pasted the original lines on my new layer, and turned them into orange and cream blobs to color in my Shiba. They do not scale as well as simpler, one-layer SVGs.
When I feel they're close to done, I take an extended break. I revisit the SVGs later and catch more things I want to fix with fresh eyes.
Finally, I flatten my layers, save, export, and optimize the images I want to use on my site. The result looks something like this:
Finally, before importing SVGs into your site, check out CSS-Tricks' guide to making SVGs accessible.
PNGs and JPEGs for Your Site
The easiest way to get free PNGs and JPEGs for your site is to make them. Since PNGs are typically used for images with a transparent background, they're often made by saving SVGs as a .png file. However, you can also convert a JPEG to a PNG to take advantage of the transparent background using a tool like Photoshop, Gimp, or Kapwing.
Since JPEGs are typically used for photos, you can just use a camera. If you take the image, the only thing you have to worry about is not taking pictures of things other people have copyrighted. This includes pictures of other people - models own their own likeness, but should be willing to sign a model release. You don't even have to have a fancy camera - I've used plenty of images I took with my phone.
You can pay for stock images or source free images that use licenses or creative commons. Often the website you're getting them from will tell you exactly what you have to do to use them. Typically, it looks like a caption attributing credit to the owner of the photo.
For more information on licensing, creative commons, model releases, and other types of photo copyrighting you can encounter, checkout these resources:
- https://www.pixsy.com/academy/image-user/using-copyrighted-images/
- https://www.pixelrockstar.com/the-risks-of-using-creative-commons-photos/
- https://www.websolutions.com/blog/what-images-can-you-use-on-your-website-for-free/
Here are a few lists of websites with images free to use:
- https://buffer.com/library/free-images/
- https://blog.snappa.com/free-stock-photos/
- https://www.wpbeginner.com/showcase/16-sources-for-free-public-domain-and-cc0-licensed-images/
Take diversity into account when choosing your images:
- https://www.wocintechchat.com/blog/wocintechphotos
- https://unsplash.com/s/photos/african-american
- https://nappy.co/
- https://www.blackillustrations.com/
- https://createherstock.com/
Finally, when you import your PNGs and JPEGs into your site, don't forget your descriptive alt-text.
HTML and CSS to Take Your Images to the Next Level
I highly recommend Mozilla Developer Network's Getting Started with the Web series, and the guides for responsive image HTML and responsive image CSS are must-reads.
You can also use images for fun, repeating backgrounds for your HTML elements using the CSS background-image property.
Finally, you can do a lot with your SVGs. My Shiba Inu SVG and Toggle Dark Mode In React blogs have fun color animations. CSS-Tricks has a great animated text example. Furthermore, GreenSock is doing the good work of reviving the animations like moving along a path that the dying SMIL used to provide.
Conclusion
I've dabbled in creating images since 2009, including a semester of college where I thought I might become a graphic designer. I've never become more than a dilettante, but now an app doesn't feel "real" to me until I've made the logo. I hope this article has helped you become confident in choosing and even making images for your website. If you're left with questions, please leave a comment!
Top comments (0)