Scribd
Upload
13 views

2-2 Activity Image Sourcing and Optimization Jan(4) (1)

The document discusses the importance of image optimization in web development, highlighting how unoptimized images can slow down website performance and affect user experience. It explains various image file formats (JPEG, PNG, GIF, SVG) and offers optimization techniques such as choosing the right format, using compression tools, resizing images, and leveraging content delivery networks. The author shares their journey in improving website performance through these strategies while also mentioning their client, Fernscape Interiors, which specializes in indoor plant design and maintenance.

Uploaded by

Zebada Gordon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

2-2 Activity Image Sourcing and Optimization Jan(4) (1)

The document discusses the importance of image optimization in web development, highlighting how unoptimized images can slow down website performance and affect user experience. It explains various image file formats (JPEG, PNG, GIF, SVG) and offers optimization techniques such as choosing the right format, using compression tools, resizing images, and leveraging content delivery networks. The author shares their journey in improving website performance through these strategies while also mentioning their client, Fernscape Interiors, which specializes in indoor plant design and maintenance.

Uploaded by

Zebada Gordon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Zebada M Gordon

GRA-310-11459-M01 - Digital Design for Web


2-2 Activity: Image Sourcing and Optimization
January 22, 2024
Professor Desteni White, M.Ed.
Fernscape Interiors: My Journey into Image Optimization and the Art of Faster Websites
As I delved deeper into web development, the significance of image optimization became
increasingly evident. While visually appealing images can enhance a website, they can also
hinder performance if not optimized correctly. Slow loading times can frustrate users and
negatively impact search engine rankings. To tackle this challenge, I embarked on a journey to
understand various image file formats and explore effective optimization techniques.
Demystifying Image File Formats: The Power of Choosing the Right Tool
One of the first steps in optimizing images is understanding the different file formats available.
Each format, such as JPEG, PNG, GIF, and SVG, has its unique strengths and weaknesses.
• JPEG (Joint Photographic Experts Group): Ideal for photographers due to its ability
to compress images with minimal quality loss. However, it is unsuitable for images with
sharp edges or text, as compression can introduce artifacts.
• PNG (Portable Network Graphic): This lossless format preserves image quality,
making it suitable for graphics, logos, and images with transparent backgrounds.
However, PNG files can be larger than JPEGs.
• GIF (Graphics Interchange Format): This format is best for simple animations and
images with a limited color palette. It is not ideal for photographs or images with
complex color gradients.
• SVG (Scalable Vector Graphics): A powerful format for logos, icons, and illustrations
because it scales without losing quality. However, not all browsers and software fully
support SVGs.
Optimizing Images for the Web: A Toolbox for Faster Load Times
Once I understood the different file formats, I began exploring optimization techniques to
improve image performance. Here are some key strategies I found beneficial:
• Choosing the Right Format: It is crucial to select the format that best suits the image
type and desired quality. For photographs, JPEG is often a good choice, while PNG is
suitable for graphics and logos. GIFs can be used for simple animations, and SVG is ideal
for scalable vector graphics.
• Compression is Key: Image compression tools like TinyPNG, Squoosh, and online
image optimizers can help reduce file size significantly without sacrificing quality.
• Resize for Purpose: Images must be resized to the appropriate dimensions for their
intended use. Uploading oversized images can negatively impact page load times.
• Progressive JPEGs: These load gradually, allowing users to see a low-resolution version
of the image first and then higher-resolution versions as the image loads. This can
improve perceived performance.
• The Power of Content Delivery Networks (CDNs): A CDN can help deliver images
faster by catching them on servers closer to users, significantly reducing load times,
especially for users in geographically distant locations.
By implementing these techniques, I have been able to significantly improve the performance of
my websites and provide a better user experience. As web development continues to evolve, I am
eager to explore new tools and techniques to further optimize images and enhance website
performance.
Client 3: Fernscape Interiors
Fernscape Interiors designs and installs indoor plants in private homes and corporate offices. It
also offers plant maintenance services.
Attributions:
1. Title: Snake Plant
Author: Pexels
Source: Pexels
License: CC0
2. Title: ZZ Plant
Author: Pixabay
Source: Pixabay
License: CC0
3. Title: Pothos
Author: Pexels
Source: Pexels
License: CC0
4. Title: Spider Plant
Author: Pixabay
Source: Pixabay
License: CC0
5. Title: Peace Lily
Author: Pexels
Source: Pexels
License: CC0
6. Title: Fiddle Leaf Fig
Author: Pixabay
Source: Pixabay
License: CC0
7. Title: Monstera Deliciosa
Author: Pexels
Source: Pexels
License: CC0
8. Title: Rubber Plant
Author: Alexandra Vancea
Source: Pixabay
License: CC0
9. Title: Money Tree
Author: Kha Ruxury
Source: Pexels
License: CC0
10. Title: Jumbo Dutch Amaryllis Plant Indoors
Author: Skylar Kang
Source: Pexels
License: CC0
References
Canva® (2024, October 31). The history of web design. Retrieved from
https://www.canva.com/learn/web-design-history/
Learn the Web. Using paths & folders. Retrieved October 31, 2024, from
https://learntheweb.courses/topics/paths-folders/

You might also like